HI there, I am a little puzzled about how to position few divs in a site I am working on, here's the url http://antobbo.webspace.virginmedia.com/Martin/contact.htm
Basically here the idea is that the yellow main div .content is the content wrap and should be around all the content of the page. That worked fine till I floated left the .navigation (magenta with the navigation) box and the .paragraph (black with the text) one, so now they are outside the yellow box.
Now from memory some time ago I read somewhere that if you float something you remove it from the normal flow, which is why presumably they are now not inside the yellow box anymore, if that's the case how do I bring them back inside?
thanks

Recommended Answers

All 4 Replies

After something's been floated, it has to be cleared on the SAME level. So, after the div with class paragraph, create yet another div and give it a class clear. NOTHING GOES BETWEEN THE STARTING TAG AND ENDING TAG OF A CLEAR!

The CSS style is a simple clear:both;

<div class="paragraph">...</div>
<div class="clear"></div>

Hi floatingDivs : - ),
thanks for that. Yes it works perfectly (I tried on the local copy of the website so it's not live). Now, what's that empty div doing then, I mean how does it fix it?
With that I am basically creating an extra box and make sure that floating elements are not allowed right and left of it, so I presume the box is pushed down or something like that ...I have read few things about the clear:both but didn't find anything about empty div. So how does your trick work or if you have a link to sth will do it too : - )?
thanks

It doesn't have to be a div. It can be a break tag (<br />), a span tag, or any other tag. It's just an attribute that resets anything following it to a non-floating position (the default value for float is none).

ok thanks for that!

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.