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

Discussion in 'HTML' started by Floortje, May 6, 2009.

  1. Floortje

    Floortje Guest

    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
     
    Floortje, May 6, 2009
    #1
    1. Advertising

  2. Floortje

    rf Guest

    Floortje wrote:
    > 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 ?


    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

    --
    Richard
     
    rf, May 6, 2009
    #2
    1. Advertising

  3. Floortje

    rf Guest

    rf wrote:

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


    It's getting late :) overflow: auto; of course.
     
    rf, May 6, 2009
    #3
  4. Floortje

    richard Guest

    On Wed, 06 May 2009 16:20:54 +0200, Floortje <> wrote:

    >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 ?
    >



    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>
     
    richard, May 6, 2009
    #4
  5. Floortje

    dorayme Guest

    In article <4a019cc6$0$22211$>,
    Floortje <> wrote:

    > 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


    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.

    --
    dorayme
     
    dorayme, May 7, 2009
    #5
  6. Floortje

    Floortje Guest

    dorayme schreef:
    > In article <4a019cc6$0$22211$>,
    > Floortje <> wrote:
    >

    ....

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


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

    Floortje
     
    Floortje, May 10, 2009
    #6
  7. Floortje

    Floortje Guest

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

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

    Hi, thx verry much !!

    Floortje
     
    Floortje, May 10, 2009
    #7
    1. Advertising

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

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. =?ISO-8859-1?Q?Tom=E1=9A_Bedn=E1=F8?=

    DIVs floating to left display incorrect if IE4

    =?ISO-8859-1?Q?Tom=E1=9A_Bedn=E1=F8?=, Oct 23, 2003, in forum: HTML
    Replies:
    2
    Views:
    543
    Toby A Inkster
    Oct 24, 2003
  2. Jens Lenge

    'clear' inside of nested divs

    Jens Lenge, Mar 10, 2005, in forum: HTML
    Replies:
    22
    Views:
    1,249
    Jens Lenge
    Mar 15, 2005
  3. rich
    Replies:
    0
    Views:
    752
  4. Replies:
    1
    Views:
    407
    Jonathan Wood
    Jun 18, 2008
  5. maya
    Replies:
    4
    Views:
    262
Loading...

Share This Page