Some questions about float

[Guest DeNayGo]

I'm currently building my first CSS website, and I got some problems. I'm used to using tables for everything, but now I want to use <div>s, because I was told that's better (but I do believe that, since I know that tables tend to ignore your layout wishes).Now, let's say I have a <div> with a border. Inside that <div> I want two columns, both <div>s. The height of the <div>-columns varies, so it is never known. If I do this with float (one to the left, one to the right), the border of the main-<div> is not drawn around the two columns, and it looks like the <div> is 0px high. The only way I know to do what I wanna do is to insert a fourth <div> beneath the two floating <div>s, and give that a "clear: both;". But that empty <div> has to be written in the HTML file, and then I'd have layout information mixed with HTML... again. I don't like that, is there a better way?

[real_illusions]

once you add content to the div's, without the 'footer' div in place, the borders should appear around the content.by default, a divs height is 0, unless you change it manually in the css or add content, in which case it stretches.hope that helps:)

[Guest DeNayGo]

maybe I'm doing something wrong, but it doesn't seem to work..the following code produces a red bar (4 pixels high) at the top of the page and the two columns.

<div style="border: thick solid red;">  <div style="border: thick solid blue; float: left; width: 30%;"><p>asdf</p><p>asdfasfd</p></div>  <div style="border: thick solid green; float: right; width: 60%;"><p>asfdasfd</p><p>asdasfdasfd</p></div></div>

when I add the following to the main <div>, there's a red border around the two columns:

<div style="clear: both;"></div>

[Guest DeNayGo]

I just read that this is only true when using W3C-compliant browsers. Internet Explorer seems to do exactly what I want... is there a way to trigger that behavior (which shouldn't be done automatically like in IE) in other browsers?

[croatiankid]

what doctype are you using?

[ste]

I just read that this is only true when using W3C-compliant browsers. Internet Explorer seems to do exactly what I want... is there a way to trigger that behavior (which shouldn't be done automatically like in IE) in other browsers?

you need to understand why what IE is doing is wrong. when you float an element you take it out of the flow of the document in standards complacient browsers. This is why the container element is empty, because the float is not filling up your container. there are 2 solutions to your problem:1) float the container element 2) clear the float after your contentyou dont need a pointless empty div like this: <div style="clear: both;"></div> you can just clear the float by applying that style to whatever comes next in your markup. for instance a horizontial rule e.g. <hr style="clear: both;">hope this helps