Is there a trick for clear:left not to affect parent divs

F

Floortje

Hi, I have cerated a page with a 2 colum layout by floating the left
column top the left and adding a left margin to the main div.

The only problem is when I float divs in the main div I cant use
clear:left anymore since it does not only clear the floating divs in the
main div bu also the floating div outside the main div.

Does anymone know a workaround that lets me keep the left div floating ?


Here is the html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style>
#page{width:800px;margin 0 auto;}
#header{background-color:#1D1;height:50px;}
#left{background-color:#C2C;float:left;width:200px;}
#main{background-color:#EFE;margin-left:220px}
#footer{background-color:#ABA;clear:both;height:50px;}

..lft{float:left;width:200px;}

</style>
</head>
<body>
<div id="page">
<div id="header">Header</div>
<div id="left">
left<br />
left<br />
left<br />
left<br />
left<br />
left<br />
</div>
<div id="main">
<div class="lft">word1</div>
<div class="lft">word2</div>
<div class="lft">word3</div>
<div class="lft">word4</div>
<div class="lft">word5</div>
<div style="clear:left">This should be on a new line just below word5
but I cant use clear:left. If I use clear left the div drops below the
the div#left;</div>
</div>
<div id="footer">footer</div>
</div>
</body>
</html>

See an example on arjenkarel.nl/test.php and arjenkarel.nl/test2.php

floortje
 
R

rf

Floortje said:
Hi, I have cerated a page with a 2 colum layout by floating the left
column top the left and adding a left margin to the main div.

The only problem is when I float divs in the main div I cant use
clear:left anymore since it does not only clear the floating divs in
the main div bu also the floating div outside the main div.

Does anymone know a workaround that lets me keep the left div
floating ?
Click to expand...

Let the the main div establish a a block formatting context. The best way is
to specify overvflow: auto;

Mentioned here
http://www.w3.org/TR/CSS21/visuren.html#flow-control

Follow the 'block formatting contexts' link to here:
http://www.w3.org/TR/CSS21/visuren.html#block-formatting
 
R

rf

rf said:
Let the the main div establish a a block formatting context. The best
way is to specify overvflow: auto;
Click to expand...

It's getting late :) overflow: auto; of course.
 
R

richard

Hi, I have cerated a page with a 2 colum layout by floating the left
column top the left and adding a left margin to the main div.

The only problem is when I float divs in the main div I cant use
clear:left anymore since it does not only clear the floating divs in the
main div bu also the floating div outside the main div.

Does anymone know a workaround that lets me keep the left div floating ?
Click to expand...


The simple solution would be to have two divisions not floated at all.
Inside the first division you would then have the two floating
divisions.

Play with the "float:none" and see which way it works best for what
you want.

You could also wrap all inside a main container if you'd like.

<div class=header>

<div class=sub1 style="float:left;">

</div>

<div class=sub2 style="float:none;">

</div>

</div>
<div class=footer>

</div>
 
D

dorayme

Floortje said:
Hi, I have cerated a page with a 2 colum layout by floating the left
column top the left and adding a left margin to the main div.

The only problem is when I float divs in the main div I cant use
clear:left anymore since it does not only clear the floating divs in the
main div bu also the floating div outside the main div.

Does anymone know a workaround that lets me keep the left div floating ?


Here is the html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html x...

See an example on arjenkarel.nl/test.php and arjenkarel.nl/test2.php
Click to expand...

Stick a missing colon in your CSS. But more importantly try overflow:
hidden (or auto) on your #main div.

However, take a look at Opera when you do this!

Remove the margin altogether on #main and for a bit of grace, put in
padding-left: 20px; This brings Opera on board.

However... no we are not done (we are never done whilst ever IE is
stomping all over this world):

Take IE7!

To fix,

1. Hide the (clearing) style altogether on the div that contains your
words "This should be on a new line"from IE's eyes.

2. For IE eyes only, put the margin-left: 220px back in instead of the
padding I suggested above on your #main.

3. For IE eyes only, put in a <br /> after the last div of class "lft"

You can do these things by classing the div you want to clear and using
conditionals for IE, also let IE see a different CSS. If you need help
on this, shout out.

The other way to go is to recast the whole thing. But I will stop for
now.
 
F

Floortje

dorayme schreef:
The other way to go is to recast the whole thing. But I will stop for
now.
Click to expand...

Thx u verry much ! This has given me a new perspective :)

Floortje
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Aligned to the left 3
Help with Visual Lightbox: Scripts 2
Help with code 0
Need help , Having problem with Drag n Drop... 1
Justify-content not working 1
Need help , Having problem with Drag n Drop ? 9
How can I get my menu inside of a menu to function properly? 1
Why is the e.target not working here? 1

Members online

Total: 32 (members: 1, guests: 31)
Robots: 355

Forum statistics

Threads
473,755
Messages
2,569,537
Members
45,020
Latest member
GenesisGai

Latest Threads

Top