Forums: Front End:

...when the divs are being floated.

Say I've got in the stylesheet:

.container
{
   width:600px;
   margin-left:auto;
   margin-right:auto;
   background-color:#fff;
}
.column1
{
   width:200px;
   float:left;
}

.column2
{
   width:350px;
   float:left;
}

<div class="container">
    <div class="column1">Hi, I'm in column one.</div>
    <div class="column2">Hi, I'm in column two.</div>
</div>

Hmm, I guess an easy way would be to..

<div class="container">
    <div class="column1">Hi, I'm in column one.</div>
    <div class="column2">Hi, I'm in column two.</div>
    <br style="clear: both;" />
</div>

I have no idea why that works, but you are a fucking genius. This has been a problem I have been struggling with for ages.

Thank you thank you thank you.

No problem It works because that break is clearing all other floats, i.e. it'll be underneath it. And as it's still in the container div, it's wrapped inside there. BINGO!

Just an aside on floats:

You can do away with the markup clear if your container div has a pixel width, and overflow set to "hidden".
A container with "overflow:hidden" will automatically clear all of its children.

So these two bits of code would give you EXACTLY the same result:

.container {
   width:600px;
}
.column1 {
   width:200px;
   float:left;
}

.column2 {
   width:350px;
   float:left;
}

----------

<div class="container">
    <div class="column1">Hi, I'm in column one.</div>
    <div class="column2">Hi, I'm in column two.</div>
    <br style="clear: both;" />
</div>

.container {
   overflow: hidden;
   width:600px;
}
.column1 {
   width:200px;
   float:left;
}

.column2 {
   width:350px;
   float:left;
}

----------

<div class="container">
    <div class="column1">Hi, I'm in column one.</div>
    <div class="column2">Hi, I'm in column two.</div>
</div>

Don't know what JimmytheGent was up to there, but it reminded me to check this thread... The overflow:hidden trick is a good one, Jerky. I'll try that next time. Cheers, boys.

I had posted a related question but then changed my mind

Sometimes you may not want to specify a pixel width for your container div, in this case using overflow: auto; will do the same job, but it has to be specified.