I am working on something using this template: http://www.ssi-developer.net/main/te...d-ft-fixed.htm

I ran into a problem today that I can't find a solution to. I have a very long menu on the left side. I started floating some divs in the content area, and when I clear the float, the next image/text/div/whatever jumps down until it clears the content in the left side. I understand why it is doing this, it is doing just what I told it to do. But I don't want it to do that! (Do what I mean, not what I say, right?)
Is there any solution to this? If you have a really long side menu (left side), can you not float stuff around in the content (right side) area?

**EDIT**
I just attached a screenshot of what happens if you clear a float. I used a line break with a style of clear:both.

I guess a flippant answer would be only float things left so you can clear right.

I managed to get this working in two ways, though I'm not sure how widely they are supported in terms of content / styling variations or browser types. For testing, I added links to the sidebar like yours and amended this line:

<p style="clear: both;">One drawback we see immediatly

Both involve additions to #l-col.

#l-col { ... position: absolute; left: 0; /* For IE7 */ }

Obviously you can kill the float in this case.

#l-col { ... height: 0; }

This one will probably go wrong in IE6. Both versions seem to work in Fx, IE7, Opera and Safari (Win) with my limited example.

Thanks for bringing this up and let me know if it actually works. I had a similar problem a while ago that I, ah, ignored, and it's been bugging me on and off ever since.

Stephanie, what did you do to fix it, or did you ? I'm not seeing any problem in IE6 or Firefox. In looking at the screenshot.. WHERE did you put the clearing element ?? All that's really needed, in that example, is to put a clear:both on the footer.

BTW, I disagree with both of the above 'solutions', I don't think either is good.

The link above is to the template she is using, not her version with a long menu and a cleared element.

And I was rather hesitant because they do seem a little hacky to me as well. But please help me learn something here - how would you do this properly?

I would suggest floating the main content div itself, which will separate it from the flow of the document and allow you to float stuff within it.

Yes, I've just done that. (Don't know why I didn't think of that earlier, actually...) Though the footer needs to clear: both and move inside bodyblock. Is there a way to do this without floating the main content?

Here is an example page I put together to show what happens:
http://www.decoratemyweb.com/float-example.html

I have tried to float the content div to the right, but that didn't work. Maybe I did something wrong??

I don't want to use absolute positioning if at all possible.

If you look in the code, I put comments where I added code.

I will admit that floats are not my strong point with CSS. Maybe I am not floating the divs correctly. If you would float the 2 divs next to each other differently, let me know.

Ok, this works. I made some minor modifications in order to clear the floats w/o needing any extra non-semantic clearing elements. By floating #cont, it solves the dropping problem you had before:

<style type="text/css">
body {
margin:20px;
background:#808080;
color: #333333;
text-align:center;
padding:0;
}

#outer {
text-align:left;
border:1px solid #000000;
width:650px;
margin:auto;
}

#hdr {
height:60px;
background:#eeeeee;
color: #333333;
}

#bar {
height:25px;
background:#c0c0c0;
color: #333333;
border:solid #000000;
border-width:1px 0 1px 0;
}

#bodyblock {
position:relative;
background: #dcdcdc;
color: #333333;
width:650px;
padding:0;

}

#l-col {
float:left;
background:#dcdcdc;
color: #333333;
width:145px;
text-align: center;
}

#cont {
width:503px;
background:#ffffff;
color: #333333;
border: solid #000000;
border-width:0 0 0 1px;
text-align:left;
float: left;
}

#ftr {
height:25px;
background:#c0c0c0;
color: #333333;
border:solid black;
border-width:1px 0 0 0;
margin:0;
clear: both;
text-align: center;
}

h3, p {
margin:0;
padding:15px;
}

h4 {
margin:0;
padding: 5px 0;
}

p:first-letter {
font-size: 80%;
font-weight: bold;
color:blue;
}

/* ------------ My Added CSS ------------------- */
.sample_div{
width: 210px;
height: 50px;
float: left;
background-color: #000066;
margin: 10px;

}
.clear{ /* Use a break with this class to clear float containers on both sides */
clear:both;
/*height:0;
margin:0;
font-size: 1px;
line-height: 0; */
}


</style>
</head>
<body>
<div id="outer">
<div id="hdr" align="center"><a href="http://www.ssi-developer.net/" title="Go to main page."><img src="float-example_files/logo.htm" alt="" border="0" height="50" width="230"></a>
</div>
<div id="bar">&nbsp;<span style="padding: 5px; font-size: 11px;">30 Dec
02</span>
</div><!-- end bar-->
<div id="bodyblock" align="right">
<div id="l-col">
<h4>Menu</h4>
<a href="#">Link</a><br>
<a href="#">Link</a><br>
<a href="#">Link</a><br>
<a href="#">Link</a><br>
<a href="#">Link</a><br>
<a href="#">Link</a><br>
<a href="#">Link</a><br>
<a href="#">Link</a><br>
<a href="#">Link</a><br>
<a href="#">Link</a><br>
<a href="#">Link</a><br>
<a href="#">Link</a><br>
<a href="#">Link</a><br>
<a href="#">Link</a><br>
<a href="#">Link</a><br>
<a href="#">Link</a><br>
<a href="#">Link</a><br>
<a href="#">Link</a><br>
<a href="#">Link</a><br>

<br />
<a href="http://www.ssi-developer.net/main/templates/">View more
templates.</a>
</div><!-- end left column -->

<div id="cont">
<h3 align="center">Two Column Fixed Width with Header &amp; Footer</h3>

<!-- ............... This is the markup that I added ................ -->
<div class="sample_div"></div>
<div class="sample_div"></div>
<!-- <br class="clear" /> -->
<!-- ........ This is the END OF the markup that I added ............ -->

<h3 class="clear" style="color: red; text-align: center;">Ver 2.3</h3>
<p>This template is actually a replica of one of my other
websites which uses tables for the very same layout. I wanted to
see could it be done and it seems to work perfect.</p>
<p>This is basically set up as follows: there is a main outer div
which centers the page and is a fixed width. There are 4 main
div's within this outer div; header (#hdr), bar (#bar), body
(#body) and footer (#ftr). The body div holds 2 more divs, the
left div which is for navigation and the right div which is for
our content.</p>
<p>One drawback we see immediatly is getting equal heights for
the left navigation div and right content div. The work around I
use for this is: whichever is likely to be the shortest (in
height) div, probably the left navigation div, set the background
of the #body div the same as this, also the border separating the
two divs - that should be on the right content div.</p>
<p>Another problem discovered recently was that when you use the
float property it can cause the floated divs to "jump out" of
their container block. The workaround I found for this was simply
to specify a height for the container div.</p>
<p>This template has been tested in:</p>

<ul style="margin: 2px 20px; padding: 2px 20px;">
<li>Mozilla 1.5b &amp; Firebird 0.6.1</li>
<li>Internet Explorer 6</li>
<li>Netscape 7.1</li>
<li>Opera 7.11</li>
</ul>

<p>Changes in this version:</p>
<!-- list styles set to fix opera problem -->
<ol style="margin: 2px 20px; padding: 2px 20px;">
<li>removed box hack</li>
<li>added margin:auto; to #outer div for centering.</li>
<li>big problem in moz/ns was the bodyblock div,with both the
left col and content col floated they were "lifted" out of the
bodyblock with then collapsed. IE and Opera were ok. removed
float left from content div, added align="right" to the html of
the bodyblock and then text-align:left; to the content div to
bring the content back. it's ugly but works. using
text-align:right; instead of align="right" will not work in
moz/ns</li>
</ol>
<br>
<p style="font-weight: bold;">Filler Content</p>
<p lang="ga">Dáig alta in mac sin i tig a athar &amp; a mathar
icon airdig i m-Maig Muirthemne, ocus adfeta dó scéla na maccaemi
i n-Emain. Dáig is amlaid domeill Conchobar in rigi, o ro gab
rígi in rí, .i. mar atraig fóchetóir césta &amp; cangni in
choicid d'ordugud. In lá do raind i trí asa athlil: cetna trian
de fóchetóir ic fegad na maccaem ic imbirt chless cluchi &amp;
immanae, in trian tanaise dond ló ic imbirt brandub &amp;
fidchell, &amp; in trian dedenach ic tochathim bíd &amp; lenna,
con-dageib cotlud for cách, aes cíuil &amp; airfitid dia thalgud
fri sodain. Ciataim ane ar longais riam reme dabiur bréthir, ar
Fergus, na fuil in hErind no i n-Albain óclach macsamla
Conchobair.</p>
<p lang="ga">Ocus adfeta don mac sin scéla na maceáem &amp; na
maccraide i n-Emain, &amp; radis in mac bec ria mathair ar co
n-digsed dá chluchi do chluchemaig na Emna. Romoch duitsiu sain a
meic bic, ar a mathair, co n-deoch anruth do anrothaib. Ulad lett
no choimthecht ecin do chaimthechtaib Conchobair, do chor th'
aesma &amp; t'imdegla for in maccraid. Cían lim-sa di sodain a
mathair, ar in mac bec, &amp; ni biu-sa oca idnaide acht
tecoisc-siu dam-sa cia airm itá Emain. Is cían uait, ar a
mathair, airm in-das-fil. Sliab Fúait etrut &amp; Emain. Dobér-sa
ardmes furri amne, ar esium.</p>
<br>

</div><!-- end cont -->
<div id="ftr">Copyright (c) You 2003</div>

</div><!-- end bodyblock -->

</div><!-- end outer -->

Thanks! This one was really puzzling me. Maybe the template I have been using isn't the best??? It seemed pretty solid until I came across the long menu.
Anyway, thanks for everyone's help.
And thanks LadyNRed, I knew you would be able to figure it out. Is there anything you can't do?

Is there anything you can't do?

LOL I can't write PHP

Glad I could help!