SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,734
    Mentioned
    31 Post(s)
    Tagged
    1 Thread(s)

    HELP!! --CLEAR : BOTH question....

    I am working a 2 col. site ( navigation on the left, content on right.. blah blah).

    Everything was going along fine until I started working on the content.. where I had some floated-left elements ( li's to be precise) to keep the next element after the li/ul from floating I used a div with a clear: both rule applied to it. I am sure most of you know that technique.

    Anwyay and long story short. After what I first thought to be a problem with bottom margin or padding ... I realized that the CLEARING DIV was actually the problem. even though is nested within a UL tag, which itself is nested in in a DIV nested in YET ANOTHER div.. which is nested in the container div (along with the left column div) it's actually clearing based on the left column div.

    I know thats a confusing description of the problem. I guess what I am trying to say is why doesn't the CLEAR:BOTH rule only apply to the div within which it's nested?? I created a simple test and I still got the same problem...


    CSS
    #left { background-color: #ffc; width: 100px; height: 200px; float: left }
    #right { background-color: #f90; width: auto }
    .clr{clear:both}

    MARK UP
    <div class="cont">
    <div id="left"></div>
    <div id="right"><div class="clr"></div>test phrase</div>
    </div>


    If it worked as I imagined.. the words "test phrase" should appear at the TOP of the right column, as the clearing div should not be affected by the left column, since it is NESTED IN THE RIGHT column..

    Maybe I am too much of a noob , but any assistance would be greatly appreciated.

  2. #2
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,233
    Mentioned
    47 Post(s)
    Tagged
    1 Thread(s)
    People often have a situation where there's a left floated sidebar, and in the right side of the page, something gets floated and then it needs to be cleared-- yet doing a clear: left on whatever's floating left inside the right content also clears the sidebar. Which is a pain in the butt.

    There are two solutions usually: if the clearer is inside another float (for instance, if the whole right content part where floated left or right) then it only clears things inside that float.

    Uh, I forget the second solution... I think it was using wrapping (with overflow: hidden for example or one of those methods) instead of clearing.

    But basically if one of those other containers can get floated, you can have your clear inside and it'll only affect other floats inside that float.

    If I could see all of your code I could probably find a nicer way to clear or stop additional floating, cause clearing divs give me allergies : )

  3. #3
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,734
    Mentioned
    31 Post(s)
    Tagged
    1 Thread(s)
    Stomme.. thank you.. i put the clreaing element inside the last floated li it worked... OR I THOUGHT it worked..

    a CLEAR WITHIN the element.. will not clear it. it still gets floated left of things outside of the ul... if I put a clear as div after the last li then it clears everything including the navigation bar ( with is not even nested within the same ul??) WTF??
    Last edited by dresden_phoenix; Aug 27, 2008 at 13:52.

  4. #4
    SitePoint Enthusiast ydesignsx™'s Avatar
    Join Date
    Dec 2007
    Posts
    85
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    dresden_phoenix,

    I don't know if I am completely clear on what you are trying to do, but I think your issue may be with the placement of the clear div.

    I am attaching an example of the code you provided and a possible solution. I added the text, "nested clear div" in the clear div you can see what happens when using the clear div in each example. All I did was swap the clearing div placement in the right div. I also added style to the cont div to space between the two examples, added "left column" text to the left div and colored the text (because my default text color setting is set to light gray).


    See the attachment below to see what happens and if it is the effect you're searching.
    Attached Files Attached Files

  5. #5
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,734
    Mentioned
    31 Post(s)
    Tagged
    1 Thread(s)
    I have managed to weirdly solve the problem by FLOATING the CONTAINER... I think it was what Stomme suggested...

    Tho I still dont understand why it works.

  6. #6
    SitePoint Wizard silver trophybronze trophy
    Join Date
    Jul 2008
    Location
    New York, NY
    Posts
    1,432
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by dresden_phoenix View Post
    I am working a 2 col. site ( navigation on the left, content on right.. blah blah).

    Everything was going along fine until I started working on the content.. where I had some floated-left elements ( li's to be precise) to keep the next element after the li/ul from floating I used a div with a clear: both rule applied to it. I am sure most of you know that technique.

    Anwyay and long story short. After what I first thought to be a problem with bottom margin or padding ... I realized that the CLEARING DIV was actually the problem. even though is nested within a UL tag, which itself is nested in in a DIV nested in YET ANOTHER div.. which is nested in the container div (along with the left column div) it's actually clearing based on the left column div.

    I know thats a confusing description of the problem. I guess what I am trying to say is why doesn't the CLEAR:BOTH rule only apply to the div within which it's nested?? I created a simple test and I still got the same problem...


    CSS
    #left { background-color: #ffc; width: 100px; height: 200px; float: left }
    #right { background-color: #f90; width: auto }
    .clr{clear:both}

    MARK UP
    <div class="cont">
    <div id="left"></div>
    <div id="right"><div class="clr"></div>test phrase</div>
    </div>


    If it worked as I imagined.. the words "test phrase" should appear at the TOP of the right column, as the clearing div should not be affected by the left column, since it is NESTED IN THE RIGHT column..

    Maybe I am too much of a noob , but any assistance would be greatly appreciated.
    http://www.positioniseverything.net/easyclearing.html

  7. #7
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,233
    Mentioned
    47 Post(s)
    Tagged
    1 Thread(s)
    I have managed to weirdly solve the problem by FLOATING the CONTAINER... I think it was what Stomme suggested...

    Tho I still dont understand why it works.
    Yup, lemme post this from Paul...
    *edit yesh:
    Firefox clearing all floats!

    I should mention here that when you clear a float you are effectively clearing all content above the float. If you have a columnar layout then you could find that clearing an element in one column causes the clearing element to drop below all columns.

    This is the correct behaviour according to the specs and one that you should be aware of. There is a solution in that you can contain the clearing effect by making sre the parent is also floated. Any clears are contained within that parent float as it can't really clear itself.

    Here is an example that demonstrates the above.


    Hope thats cleared the floats up for you!
    http://www.sitepoint.com/forums/show...5&postcount=15

    But there are also other ways of clearing stuff, without the clearing div-- read the link cooper pointed to. I never use the content thingie because it's not simple and needs stuff for IE and I'm lazy, but it's pretty popular.

  8. #8
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,734
    Mentioned
    31 Post(s)
    Tagged
    1 Thread(s)
    read this post late, but I wanted to say..thanks again.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •