SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Member
    Join Date
    Aug 2004
    Location
    West Chester, PA, U.S.A.
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Stretching out a DIV to fit nested DIVs...

    I am learning to build a page without tables, and small details keep getting in my way. This is very frustrating!

    I want a container DIV to stretch to fit the nested DIVs inside it. I want this container div to have a single background color that will show through the nested divs. Seems simple enough... I could just put all my divs inside a single cell table and be done w/ it. But I want to learn how to do it table-less.

    The code is posted below. This seems to work on IE6win (although the text in the middle column sometimes disappears!) However, in Netscape 6 win, the middle column does not stretch out. How can i get this to be cross-browser compatible?

    I'd appreciate any help you can give... thanks!

    John

    <html>
    <head>
    <style>
    #container {
    background-color:lightblue;
    }

    #left {
    float: left;
    width: 175px;
    }
    #right {
    float: right;
    width: 175px;
    }
    #middle {
    margin:0 175px;
    border: 1px solid red;
    background-color:lightyellow;
    }

    .clear {
    clear: both;
    }

    </style>
    </head>
    <body>
    <div id="container">
    <div id='left'>
    <p><strong>#left {<br>
    float: left;<br>
    width: 175px;<br>
    }</strong></p>
    <p>Float Left Float Left Float Left Float Left Float Left Float Left Float
    Left Float Left Float Left Float Left Float Left Float Left Float Left
    Float Left Float Left Float Left Float Left Float Left Float Left Float Left
    Float Left Float Left Float Left Float Left Float Left Float Left Float Left
    Float </p>
    </div>
    <div id='right'>
    <p><strong>#right {<br>
    float: right;<br>
    width: 175px;<br>
    }</strong></p>
    <p>Float Right Float Right Float Right Float Right Float Right Float Right
    Float Right Float Right Float Right Float Right Float Right Float Right Float
    Right Float Right Float R Right Float Right Float Right Float Right Float
    Right Float R Right Float Right Float Right Float Right Float Right Float
    R Right Float Right Float Right Float Right Float Right Float R Right Float </p>
    </div>
    <div id='middle'>
    <p><strong>#middle {<br>
    margin:0 175px;<br>
    border: 1px solid red;<br>
    background-color:lightyellow;<br>
    }</strong></p>
    <p>Text in the middle Text in the middle Text in the middle Text in the middle
    Text in the middle Text in the middle Text in the middle Text in the middle
    Text in the middle Text in the middle Text in the middle Text in the middle</p>
    <div class='clear'></div>
    </div>

    </div>
    </body>
    </html>

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,535
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    although the text in the middle column sometimes disappears!)
    Add position:relative to the middle style will make the text appear.

    However, in Netscape 6 win, the middle column does not stretch out
    Why should it! The middle column isn't linked to the 2 side columns in anyway. It only works in IE because you have placed a clear:both at the end of the middle and IE's buggy implementation is clearing both the floats. Other browsers do not exhibit this behaviour and will not extend the middle content to match the side columns.

    In fact other browsers will also a require a clearing div before the final closing div of #container otherwise the floats will extend out of the container.

    Its a shame that it doesn't work like this because it would make things a lot easier . However you will be unable to make equalising columns cross-browsers with this method.

    You will have to use a more complicated method such as in my 3 col demo sticky thread or just go without equalising columns.

    Paul

  3. #3
    SitePoint Member
    Join Date
    Aug 2004
    Location
    West Chester, PA, U.S.A.
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B
    You will have to use a more complicated method such as in my 3 col demo sticky thread or just go without equalising columns.
    Paul
    Hi Paul, and thanks for your reply.

    I checked out your link, and it's very interesting! However, for my page, this will not work. The expanding DIV is for a small section of the page; not for an entire page.

    I simply want a "container" for a bunch of DIVs, that will hold a color. The color is needed to cover the entire area of sub/nested DIVs. So when the content of one of the nested divs increases or decreases, the overall background color will expand/contract along with it.

    Instead of a container DIV, i could just use a container 1 cell table. The table would easily expand and contract along with the amount of data inside it.

    Any more suggestions for what i'm trying to do? Or should i just stick w/ the Table solution?

    Thanks!

    John

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,535
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi John,

    If you have just one colour for all three containers then your method will work ok.

    You just need to put the clear:both before the closing div of the container.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
    #container {
    background-color:lightblue;
    }
    #left {
    float: left;
    width: 175px;
    }
    #right {
    float: right;
    width: 175px;
    }
    #middle {
    margin:0 175px;
    }
    .clear {
    clear: both;
    height:1px;
    overflow:hidden;
    margin-top:-1px;
    }
    </style>
    </head>
    <body>
    <div id="container"> 
      <div id='left'> 
    	<p><strong>#left {<br>
    	  float: left;<br>
    	  width: 175px;<br>
    	  }</strong></p>
    	<p>Float Left Float Left Float Left Float Left Float Left Float Left Float 
    	  Left Float Left Float Left Float Left Float Left Float Left Float Left Float 
    	  Left Float Left Float Left Float Left Float Left Float Left Float Left Float 
    	  Left Float Left Float Left Float Left Float Left Float Left Float Left Float 
    	</p>
      </div>
      <div id='right'> 
    	<p><strong>#right {<br>
    	  float: right;<br>
    	  width: 175px;<br>
    	  }</strong></p>
    	<p>Float Right Float Right Float Right Float Right Float Right Float Right 
    	  Float Right Float Right Float Right Float Right Float Right Float Right 
    	  Float Right Float Right Float R Right Float Right Float Right Float Right 
    	  Float Right Float R Right Float Right Float Right Float Right Float Right 
    	  Float R Right Float Right Float Right Float Right Float Right Float R Right 
    	  Float </p>
      </div>
      <div id='middle'> 
    	<p><strong>#middle {<br>
    	  margin:0 175px;<br>
    	  border: 1px solid red;<br>
    	  background-color:lightyellow;<br>
    	  }</strong></p>
    	<p>Text in the middle Text in the middle Text in the middle Text in the middle 
    	  Text in the middle Text in the middle Text in the middle Text in the middle 
    	  Text in the middle Text in the middle Text in the middle Text in the middle</p>
      </div>
    	<div class='clear'></div>
    </div>
    </body>
    </html>
    If thats what you meant

    Paul

  5. #5
    SitePoint Member
    Join Date
    Aug 2004
    Location
    West Chester, PA, U.S.A.
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B
    If thats what you meant

    Paul

    Exactly! Thanks so much. I attempted that before, but Netscape wouldn't render it properly... it was the "height=1" part that you added that fixed it. I guess Netscape collapses a DIV to nothing if there is no height info in there.

    Thanks!

    John


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
  •