Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    WA
    WA is offline
    Administrator
    Join Date
    Mar 2002
    Posts
    2,596
    Thanks
    2
    Thanked 19 Times in 18 Posts

    Does the CSS attribute "clear" work in NS6+?

    I'm currently trying to create a table layout using DIVs exclusively. By default, when resizing the window to a small size, the DIVs on the right get squeezed over to the same column as the left adjacent DIV.

    I tried adding the CSS attribute clear:right to each DIV to prevent this from happening, though this seems to only work in IE. I thought the clear attribute was supported in NS from version 4 and up.

    Anyhow insight appreciated,
    - George
    - JavaScript Kit- JavaScript tutorials and 400+ scripts!
    - JavaScript Reference- JavaScript reference you can relate to.

  • #2
    Regular Coder
    Join Date
    Jun 2002
    Location
    NL
    Posts
    421
    Thanks
    0
    Thanked 0 Times in 0 Posts
    You need the clear attribute after floating one or more elements, not within.

    <div style="width:400px;">
    <div style="width:150px;float:left;">floating div 1</div>
    <div>div 2</div><br style="clear:both;">
    </div>
    Above, the clearing is used for the 400px div to encompass the floats. A width is set to the outer div to keep both divs in place. No div will drop down when the window is resized.



    <div>
    <div style="width:400px;float:left;">floating div 1</div>
    <div>div 2</div><br style="clear:both;">
    </div>
    Same code, but without setting a width to the outer div. Resizing the window makes the second div drop below the 400px div. If the outer div has no width set, there's no way to prevent this.



    <div>
    <div style="width:400px;float:left;">floating div 1</div>
    <div>div 2</div>

    <div style="clear:both;"></div>

    <div style="width:100px;float:left;">floating div 1</div>
    <div style="width:100px;float:right;">div 2</div><br style="clear:both;">
    </div>
    Empty clearing div to separate the lower two divs from the two above. Again, the clearing break is used to let the main div encompass the five divs.

    When no width is set on a div that contains floats, resizing the window always makes the div at the right drop below the left div. We have to wait a few years until 'min-width' is supported by all browsers, I guess.
    Or use absolute positioning.

    'Float' is not supported by NS4. <br clear="all"> is, but I'm not sure about the 'clear:both;' CSS-variant.

  • #3
    Regular Coder
    Join Date
    Jun 2002
    Location
    NL
    Posts
    421
    Thanks
    0
    Thanked 0 Times in 0 Posts
    >> Does the CSS attribute "clear" work in NS6+?
    Yes. When used at the right place

  • #4
    WA
    WA is offline
    Administrator
    Join Date
    Mar 2002
    Posts
    2,596
    Thanks
    2
    Thanked 19 Times in 18 Posts
    Hi:
    Thanks for the info. I tried playing around with your suggestion above, though can't quite get it to work. Here's a sample code I'm trying to get to clear correctly onwindowresize:

    Code:
    <div id="DIV1" style="width:200;float:left; background-color:lightblue">
    <p>This is some text</p>
    <p>This is some text</p>
    </div>
    
    <div id="DIV2" style="width:500;float:left;background-color:lightyellow">
    <p>This is some text</p>
    <p>This is some text</p>
    </div>
    I tried adding <br style="clear:both"> to the end of either and both DIVs, though resizing the window still caused the second div to jump over to the first div's space.
    - George
    - JavaScript Kit- JavaScript tutorials and 400+ scripts!
    - JavaScript Reference- JavaScript reference you can relate to.

  • #5
    Regular Coder
    Join Date
    Jun 2002
    Location
    NL
    Posts
    421
    Thanks
    0
    Thanked 0 Times in 0 Posts
    If DIV1 and DIV2 are not in a container div with an absolute width (like below) of minimal 700px (depending on margins and paddings) there's no way to prevent DIV2 from dropping below DIV1 on window resize. 'Clear' doesn't help here. If a floating div doesn't fit it will simply find another place.
    You need a clearing break or div when you want to place another div below DIV1 and DIV2 to prevent overlapping.
    Code:
    <div style="width:720px;">
    
    <div id="DIV1" style="width:200;float:left; background-color:lightblue">
    <p>This is some text</p>
    <p>This is some text</p>
    </div>
    
    <div id="DIV2" style="width:500;float:left;background-color:lightyellow">
    <p>This is some text</p>
    <p>This is some text</p>
    </div>
    
    <div style="clear:both;"></div>
    ..more divs here..
    
    </div>

    Without a container div with an absolute width a more elegant way would be to leave out the width of DIV2. On window resize it's contents will wrap around DIV1 until there's really no space left. But if you can use it depends on the page lay-out.
    Code:
    <div id="DIV1" style="width:200;float:left; background-color:lightblue">
    <p>This is some text</p>
    <p>This is some text</p>
    </div>
    
    <div id="DIV2" style="background-color:lightyellow">
    <p>This is some text</p>
    <p>This is some text</p>
    </div>
    Here's more about floating and clearing:
    http://www.alistapart.com/stories/practicalcss/

    http://users.rraz.net/mc_on_the_rock.../peekaboo.html
    http://users.rraz.net/mc_on_the_rock.../bughouse.html

    In theory, it's simple stuff. We have standards..

  • #6
    WA
    WA is offline
    Administrator
    Join Date
    Mar 2002
    Posts
    2,596
    Thanks
    2
    Thanked 19 Times in 18 Posts
    Ah yes it all makes sense now. I should be wrapping the two divs in another DIV with a controlled width. The result works in NS6/Mozilla as well.

    Thanks MCookie for the help.
    - George
    - JavaScript Kit- JavaScript tutorials and 400+ scripts!
    - JavaScript Reference- JavaScript reference you can relate to.


  •  

    Posting Permissions

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