Wrox Programmer Forums
Go Back   Wrox Programmer Forums > Web Programming > CSS > CSS Cascading Style Sheets
|
CSS Cascading Style Sheets All issues relating to Cascading Style Sheets (CSS).
Welcome to the p2p.wrox.com Forums.

You are currently viewing the CSS Cascading Style Sheets section of the Wrox Programmer to Programmer discussions. This is a community of software programmers and website developers including Wrox book authors and readers. New member registration was closed in 2019. New posts were shut off and the site was archived into this static format as of October 1, 2020. If you require technical support for a Wrox book please contact http://hub.wiley.com
 
Old December 6th, 2012, 09:55 PM
Authorized User
 
Join Date: Nov 2012
Posts: 25
Thanks: 3
Thanked 0 Times in 0 Posts
Question Trouble formatting divs using CSS float command

I am trying to format some divs on my webpage using CSS. I am trying to float left that are themselves in a container div (Three equaly spaced boxes within a box). I have been unable to get the three divs to be spaced equally in the conatiner div. I did the calculations so that each of the three divs are equal width. I also took into consideration the borders that I put around them. Each border is styled using pixels. If someone could help me so I could get these divs looking they way I want them, I would apperciate it.

Thanks,
Truck35
 
Old February 3rd, 2015, 06:01 AM
Registered User
 
Join Date: Jan 2015
Posts: 4
Thanks: 0
Thanked 0 Times in 0 Posts
Default Trouble formatting divs using CSS float

are define the div following format

Html

<div id="wrapper">
<div id="c1"></div>
<div id="c2"></div>
<div id="c3"></div>
</div>
Quote:
css:

#c1, #c2, #c3 {
width: 33%; // 1/3 of 100%
}
 
Old February 3rd, 2015, 03:17 PM
Registered User
 
Join Date: Feb 2015
Posts: 2
Thanks: 0
Thanked 0 Times in 0 Posts
Default

Hey Truck35. mathssjohn is spot on. I might suggest using one class instead of separate id's for efficiency that way you only need one definition:
(Also, if you are having trouble floating the elements, remember that the parent container should be positioned "relative".)
.wrapper {
position:relative;
width: 600px;
min-height:600px;
}
.oneThirdWidth {
float:left;
width:33.3%;
}

<div class="wrapper">
<div class="oneThirdWidth">Div#1</div>
<div class="oneThirdWidth">Div#2</div>
<div class="oneThirdWidth">Div#3</div>
</div>

Last edited by GuinnessShawn; February 3rd, 2015 at 03:21 PM..
 
Old February 1st, 2018, 07:33 AM
Registered User
 
Join Date: Jan 2018
Posts: 9
Thanks: 0
Thanked 0 Times in 0 Posts
Default

Now there is a new option called flex box layout. It is very simple to use and is more effective.

You have a parent div which contains 3 child divs.

.parent-div{
display: flex;
}

Add this code and immediately all the child div will be placed horizontally inside the parent div.

If it is not working, you can add one more line

.parent-div{
display: flex;
flex-direction: row;
}


This should work fine.

You can learn more about flex-box layout techniques online.


Regards,

Pavithra Ramesh
Spidergems





Similar Threads
Thread Thread Starter Forum Replies Last Post
CSS - float property stormage BOOK: Beginning ASP.NET 4 : in C# and VB 1 October 17th, 2011 11:39 PM
Formatting CSS to center Monochrome CSS SamuelMSr BOOK: Beginning ASP.NET 4 : in C# and VB 2 September 20th, 2011 03:50 AM
CSS Float Display Problem socoolbrewster CSS Cascading Style Sheets 12 October 20th, 2005 07:22 AM
CSS Float error socoolbrewster CSS Cascading Style Sheets 3 July 18th, 2005 09:25 AM
CSS Layout Divs Truce77 PHP How-To 2 March 29th, 2004 07:29 PM





Powered by vBulletin®
Copyright ©2000 - 2020, Jelsoft Enterprises Ltd.
Copyright (c) 2020 John Wiley & Sons, Inc.