TUTORIAL: Using Floats (Floating Divs)

PixelPusher · 08-25-2010, 05:11 PM

Several people have inquired about how to correctly use floats (e.g. How to float divs with in divs on a page).

The code below show a simple layout for floating three divs inside a container.
**Please note this layout is not limited to divs, floats can be used with a wide variety of page elements (P, UL, A, IMG, etc.)

Enjoy. PM me if you have any questions.

HTML

HTML Code:

<div class="container">
	<div>
    	<h2>Heading One</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id nunc lacus. Integer bibendum varius fringilla. Suspendisse potenti. Donec nec tincidunt tellus. Curabitur fringilla viverra placerat. Sed quis turpis nunc.</p>
        <a href="">Read more &rarr;</a>
    </div>
    <div>
    	<h2>Heading Two</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id nunc lacus. Integer bibendum varius fringilla. Suspendisse potenti. Donec nec tincidunt tellus. Curabitur fringilla viverra placerat. Sed quis turpis nunc.</p>
        <a href="">Read more &rarr;</a>
    </div>
    <div>
    	<h2>Heading Three</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id nunc lacus. Integer bibendum varius fringilla. Suspendisse potenti. Donec nec tincidunt tellus. Curabitur fringilla viverra placerat. Sed quis turpis nunc.</p>
        <a href="">Read more &rarr;</a>
    </div>
</div>
<div class="container">
	<div>
    	<h2>Heading One</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id nunc lacus. Integer bibendum varius fringilla. Suspendisse potenti. Donec nec tincidunt tellus. Curabitur fringilla viverra placerat. Sed quis turpis nunc.</p>
        <a href="">Read more &rarr;</a>
    </div>
    <div>
    	<h2>Heading Two</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id nunc lacus. Integer bibendum varius fringilla. Suspendisse potenti. Donec nec tincidunt tellus. Curabitur fringilla viverra placerat. Sed quis turpis nunc.</p>
        <a href="">Read more &rarr;</a>
    </div>
    <div>
    	<h2>Heading Three</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id nunc lacus. Integer bibendum varius fringilla. Suspendisse potenti. Donec nec tincidunt tellus. Curabitur fringilla viverra placerat. Sed quis turpis nunc.</p>
        <a href="">Read more &rarr;</a>
    </div>
</div>
<div class="container">
	<div>
    	<h2>Heading One</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id nunc lacus. Integer bibendum varius fringilla. Suspendisse potenti. Donec nec tincidunt tellus. Curabitur fringilla viverra placerat. Sed quis turpis nunc.</p>
        <a href="">Read more &rarr;</a>
    </div>
    <div>
    	<h2>Heading Two</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id nunc lacus. Integer bibendum varius fringilla. Suspendisse potenti. Donec nec tincidunt tellus. Curabitur fringilla viverra placerat. Sed quis turpis nunc.</p>
        <a href="">Read more &rarr;</a>
    </div>
    <div>
    	<h2>Heading Three</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id nunc lacus. Integer bibendum varius fringilla. Suspendisse potenti. Donec nec tincidunt tellus. Curabitur fringilla viverra placerat. Sed quis turpis nunc.</p>
        <a href="">Read more &rarr;</a>
    </div>
</div>

CSS

Code:

div.container {
	margin:20px auto;
	border:solid 1px #ccc;
	width:790px;
	overflow:hidden;
	position:relative;
}
div.container div {
	float:left;
	margin:1px 0 1px 1px;
	border:solid 1px #069;
	width:260px;
	height:193px;
}
div.container h2, div.container p, div.container a {
	font-family:Arial, Helvetica, sans-serif;
	font-size:8pt;
	color:#444;
	padding:0 10px;
}
div.container h2 {
	font-size:10pt;
	line-height:25px;
}
div.container p {
	line-height:15pt;
}
div.container a {
	display:inline-block;
	line-height:17pt;
	color:#C60;
	text-decoration:none;
}
div.container a:hover {
	text-decoration:underline;
}

GeneticOpera · 08-25-2010, 09:38 PM

Wow, this will be really helpful! I've used floats, but usualy just left and right and I wasn't entirely positive on what else to do with them. Thank you!

PixelPusher · 08-26-2010, 03:53 PM

Your welcome

Marc · 09-08-2010, 10:12 PM

Quote:

Originally Posted by GeneticOpera

Wow, this will be really helpful! I've used floats, but usualy just left and right and I wasn't entirely positive on what else to do with them. Thank you!

It's easy to design but it's very helpful for people that are still learning.

Great tutorial Pixel,

HMI Guy · 09-11-2010, 10:07 AM

I noticed that the divs appear centered in Chrome, but on the left side in IE. Is this expected?

PixelPusher · 09-12-2010, 04:39 PM

Quote:

Originally Posted by HMI Guy

I noticed that the divs appear centered in Chrome, but on the left side in IE. Is this expected?

Which version of IE?

PixelPusher · 09-12-2010, 04:46 PM

Just checked it now in IE6- IE8...all centered. Not sure why it is not working for you

Maybe double check the markup? You might have forgot to close the main container div

nedo · 10-02-2010, 01:35 PM

I am still learning about web design, and this will most certainly be very handy. Thanks.

PixelPusher · 10-04-2010, 05:33 PM

Quote:

Originally Posted by nedo

I am still learning about web design, and this will most certainly be very handy. Thanks.

Your welcome

lynx · 10-17-2010, 05:41 PM

this code is nice and clean but i'm still a bit of a noob so i gotta ask: your second class declaration

Code:

div.container div {
	float:left;
	margin:1px 0 1px 1px;
	border:solid 1px #069;
	width:260px;
	height:193px;
}

am i understanding this correctly if i say you're defining how to handle divs that are nested within divs? and will this work for any level of nesting?

i assumed this because you only use class=container once in each div

also, since the main reason i read this was because i was trying to nest divs and align them differently from just having each under the other, which part exactly is it that allows the nested divs to appear next to each other instead of right under each other? i'm assuming it has to do with an interaction between align, setting the dimensions to be exact and maybe with overflow and position - but i'm not sure about it.

08-26-2010, 03:53 PM	#3
PixelPusher Super Moderator Join Date: Oct 2008 Location: Arizona, USA Posts: 1,053	Your welcome __________________ John Darling Graphic / Web Designer SmarterTools Inc. (877) 357-6278 www.smartertools.com

09-11-2010, 10:07 AM	#5
HMI Guy New Member Join Date: Sep 2010 Posts: 5	I noticed that the divs appear centered in Chrome, but on the left side in IE. Is this expected? __________________ The HMI Guy For the Top 7 Web Design Products head over to hmiguy.com.

09-12-2010, 04:46 PM	#7
PixelPusher Super Moderator Join Date: Oct 2008 Location: Arizona, USA Posts: 1,053	Just checked it now in IE6- IE8...all centered. Not sure why it is not working for you Maybe double check the markup? You might have forgot to close the main container div __________________ John Darling Graphic / Web Designer SmarterTools Inc. (877) 357-6278 www.smartertools.com

10-02-2010, 01:35 PM	#8
nedo Bronze Member Join Date: Oct 2010 Posts: 89	I am still learning about web design, and this will most certainly be very handy. Thanks. __________________ vps hosting-my vps hosting choice \|\| web hosting-Web hosting blog

10-17-2010, 05:41 PM	#10
lynx New Member Join Date: Oct 2010 Posts: 2	this code is nice and clean but i'm still a bit of a noob so i gotta ask: your second class declaration Code: div.container div { float:left; margin:1px 0 1px 1px; border:solid 1px #069; width:260px; height:193px; } am i understanding this correctly if i say you're defining how to handle divs that are nested within divs? and will this work for any level of nesting? i assumed this because you only use class=container once in each div also, since the main reason i read this was because i was trying to nest divs and align them differently from just having each under the other, which part exactly is it that allows the nested divs to appear next to each other instead of right under each other? i'm assuming it has to do with an interaction between align, setting the dimensions to be exact and maybe with overflow and position - but i'm not sure about it.

08-25-2010, 09:38 PM	#2
GeneticOpera Bronze Member Join Date: Aug 2010 Location: Phoenix, Arizona Posts: 32	Wow, this will be really helpful! I've used floats, but usualy just left and right and I wasn't entirely positive on what else to do with them. Thank you!

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode