Floating divs woes

D

danyw

New Member
Hi folks, I'm a newbie when it comes to web design and layout. I am trying to achieve a very simple layout which has worked on one other side before. It basically has 1 div in the body. This div contains 3 nested div, ie. header, content, and footer. The content div has 2 nested divs, one floats left, the other floats right. It all sounds very simple and works for one website: savitarbernese.com.

I tried to do the same thing to another website but it's not working as I expected. This one is on our dev server. I have probably missed something simple and fundamental but, due to my inexperience, I can't for the life of me see what that is! :confused:

Any suggestions/hints would be greatly appreciated.

Many thanks,
Dany.
 
jcollings89

jcollings89

New Member
Say you have a wrapper div holding the main content then two sub divs left and right e.g.

Stylesheet: style.css
Code: 
div#wrapper{
	width:800px;
	background:#000;
	overflow:hidden;
}

div#wrapper div#left{
	width:300px;
	margin-left:75px;
	float:left;
	background:#333;
}

div#wrapper div#right{
	width:300px;
	margin-right:75px;
	float:left;
	background:#CCC;
}


HTML: index.html
HTML: 
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="wrapper">
	<div id="left">
	<p>lol</p>
	</div>
	<div id="right">
	<p>lol jkh fjksdhfiusdhfiusd hfiuh sdiufh sdiufh siudhf iusdhf iusdh fiusheiuhrf jhkg jhrgfsjhg fjhsdgfjhgsdfjhgsdjhfgsd jhfgsdjhf gjhsdg fjhsdg fjhsdg fjhsdgf jhsdg fjhsgd fjhgsdjhf gsdfjh gsdjhf sdjhfg jshd fgjhsdf .</p>
	</div>
</div>
</body>
</html>

Try creating this without the clear:both; section this sometimes can go unoticed that why i have put the wrapper background as black. hope this helps you out
 
Last edited:
PixelPusher

PixelPusher

Super Moderator
Staff member
If all the "content" div contains is two floated divs, you don't need to use float left and float right. Set them both to one or the other. If you use left, the first floated div listed in the markup will display left with the next one after it and visa versa for float right.

Don't use an empty tag to clear the floats
HTML: 
<div style="clear:both;"></div>
This is bad practice. You should avoid using empty tags if you can. The better solution is to use
Code: 
overflow:hidden;
on the float container.
 
jcollings89

jcollings89

New Member
Thanks pixelPusher for his knowledge. ive been doing it that way for years wasting the div tags. just tried it and it works the same. really appriciate it, every line of code saved is saving bandwidth:)
 
D

danyw

New Member
Thanks for that - it certainly did the trick! For some reason I also had "overflow: hidden;" for the two child divs, as well as the container div - not sure what effect that had but I have removed them. Now only the container div has that style property defined. I also discovered I stupidly assigned to much width to one div, resulting in the other one "wrapping" to the next "line". It appears okay to me, but yet some people have problems with the layout in their browsers.

Can someone please verify this link looks okay? Don't worry, the site has no malware, it's just our dev server.

Thanks again.
 
PixelPusher

PixelPusher

Super Moderator
Staff member
danyw said:
Can someone please verify this link looks okay? Don't worry, the site has no malware, it's just our dev server.

Thanks again.
Click to expand...

The link works yeah, and at first glance the site/nav seems to function correctly. Is there something in particular you want us to look for?
 
You must log in or register to reply here.
Top