1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Expanding DIV

Discussion in 'CSS' started by digitalpoint, Jul 22, 2009.

  1. #1
    Does anyone know of a way to get a floating div to expand into unused area?

    This is the HTML...

    <html>
    <head>
    <title>My test page</title>
    
    <style>
    #box1 {
    	background-color: #f00;
    	margin: 5px;
    }
    #nav {
    	background-color: #0f0;
    	float: left;
    	margin: 5px;
    }
    </style>
    
    </head>
    <body>
    
    <div id="nav">this is an navigation thing</div>
    <div id="box1">part 1</div>
    <div id="box1">part 2</div>
    <div id="box1">part 3</div>
    
    </body>
    </html>
    HTML:
    [​IMG]
     

    Attached Files:

    digitalpoint, Jul 22, 2009 IP
  2. quickcash

    quickcash Peon

    Messages:
    112
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #2
    I dont get the full idea of what your require but to make a div use the full area provided to it add 100% to the width/height attribute

    eg

    #divid {
    height: 100%;
    width: 100%;
    }
    HTML:
    Hope that helps! :)
     
    quickcash, Jul 23, 2009 IP
  3. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #3
    It depends on what that space is. Ignore quickcash's idea (sorry quickcash), you cannot set % height on children of non-explicit-heighted patents (excepting the html and body elements' direct child). Width: 100% would work but that doesn't look like you want to increase the width any.

    If that space is simple to give some breathing room, you could easily add some padding-bottom: whatever looks nice in em;
    #nav {
    styles;
    padding-bottom: 1em;
    }


    but if it's supposed to grow with whatever's going on with the non-floated parts, that's different. We would need much more information to figure out a solution.

    How is this page supposed to react to new content?
     
    Stomme poes, Jul 23, 2009 IP
  4. digitalpoint

    digitalpoint Overlord of no one Staff

    Messages:
    38,333
    Likes Received:
    2,613
    Best Answers:
    462
    Trophy Points:
    710
    Digital Goods:
    29
    #4
    The height: 100% doesn't work because I don't want it to push part 3 (in my first example) to the right like part 1 and part 2 are.

    In the end part 1 and part 2 could be a widely variable height, without the background red of course (it was just for example). The navigation div ends up looking much better if it was able to expand vertically with blank are as far as it can go without causing the next part x under it to be pushed to the right.
     
    digitalpoint, Jul 23, 2009 IP
  5. quickcash

    quickcash Peon

    Messages:
    112
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #5
    maybe you can higher the z-index of part3? Try it or you can add part 1 and part 2 into a main div and put nav into it with height at 100% nav will not go outside the main div area :)
     
    quickcash, Jul 23, 2009 IP
  6. digitalpoint

    digitalpoint Overlord of no one Staff

    Messages:
    38,333
    Likes Received:
    2,613
    Best Answers:
    462
    Trophy Points:
    710
    Digital Goods:
    29
    #6
    The height of part 1 and part 2 are highly variable... Sometimes just part 1 alone is big enough that the nav wouldn't clear it. So isolating some into different divs wouldn't work.
     
    digitalpoint, Jul 23, 2009 IP
  7. quickcash

    quickcash Peon

    Messages:
    112
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #7
    you did not get what I meant!
    <a main div>
    <nav div with height 100% and floated to left>
    <part1></part1>
    <part2></part2>
    </nav div with height 100% and floated to left>
    </a main div>
    <part3></part3>

    The nav will be INSIDE the main div and hence will be limited to its boundaries, 100% for nav will be the size of the main div and the main div's size will be what part1 and part2 cover together. :)

    Hope it helps!
     
    quickcash, Jul 23, 2009 IP
  8. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #8
    This is trivial in new browsers. The problem lies with IE<8. The following breaks the DRY principle, but server side automation ought to make things safe.
    <!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">
    <head>
      <meta name="generator"
            content=
            "HTML Tidy for Linux (vers 7 December 2008), see www.w3.org" />
    
      <title></title>
      <style type="text/css">
    /*<![CDATA[*/
    
      #wrap {
        width: 600px;
        }
    
      #nav {
        background-color: green;
        display: table-cell;
        vertical-align: top;
        width: 300px;
        }
    
      #box1 {
        display: table-cell;
        vertical-align: top;
        width: 300px;
        }
    
      #box1 div,
      #box2 {
        background-color: red;
        margin-bottom: 5px;
        }
        
      /*]]>*/
      </style>
    </head>
    
    <body>
      <div id="wrap">
        <![if !ie]>
        <div id="nav">
          this is an navigation thing
        </div>
    
        <div id="box1">
          <div>
            part 1
          </div>
    
          <div>
            part 2
          </div><![endif]>
    
          <!--[if lte ie 7]>
          <table summary="" style="width:100%;">
            <tr style="vertical-align: top">
              <td style="background-color: green; width: 50%;">this is a navigation thing</td>
              <td>
                <div style="background-color: red; margin-bottom: 5px;">part 1</div>
                <div style="background-color: red; margin-bottom: 5px;">part 2</div>
              </td>
            </tr>
          </table>
          <![endif]-->
        </div>
    
        <div id="box2">
          part 3
        </div>
      </div>
    </body>
    </html>
    Code (markup):
    cheers,

    gary
     
    kk5st, Jul 23, 2009 IP
  9. quickcash

    quickcash Peon

    Messages:
    112
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #9
    ^^ that's a better answer I did not have time to write all the code, but my basic concept was the same! :)
     
    quickcash, Jul 23, 2009 IP
  10. digitalpoint

    digitalpoint Overlord of no one Staff

    Messages:
    38,333
    Likes Received:
    2,613
    Best Answers:
    462
    Trophy Points:
    710
    Digital Goods:
    29
    #10
    Well, that almost works... except it's not always going to be 2 "parts" to the right of the navigation. Depending on the size of each part (which each one can be anywhere from very small to very large), it could be only 1 fits to the right, or it could be as many as 5 fit to the right (or any number in between)...
     
    digitalpoint, Jul 23, 2009 IP
  11. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #11
    Look again at the structure. Put as few or as many 'parts' into #box1 as you like. Same with the second td for IE<8.
    <!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">
    <head>
      <meta name="generator"
            content=
            "HTML Tidy for Linux (vers 7 December 2008), see www.w3.org" />
    
      <title></title>
      <style type="text/css">
    /*<![CDATA[*/
    
      #wrap {
        width: 600px;
        }
    
      #nav {
        background-color: green;
        display: table-cell;
        vertical-align: top;
        width: 300px;
        }
    
      #box1 {
        display: table-cell;
        vertical-align: top;
        width: 300px;
        }
    
      #box1 div,
      #box2 {
        background-color: red;
        margin-bottom: 5px;
        }
        
      /*]]>*/
      </style>
    </head>
    
    <body>
      <div id="wrap">
    
        <![if !ie]>
    
        <div id="nav">
          this is an navigation thing
        </div>
    
        <div id="box1">
          <div>
            part 1
          </div>
    
          <div>
            part 2
          </div>
          
          <div>
            part 3
          </div>
    
          <div>
            part 4
          </div><![endif]>
    
          <!--[if lte ie 7]>
          <table summary="" style="width:100%;">
            <tr style="vertical-align: top">
              <td style="background-color: green; width: 50%;">this is a navigation thing</td>
              <td>
                <div style="background-color: red; margin-bottom: 5px;">part 1</div>
                <div style="background-color: red; margin-bottom: 5px;">part 2</div>
                <div style="background-color: red; margin-bottom: 5px;">part 3</div>
                <div style="background-color: red; margin-bottom: 5px;">part 4</div>
              </td>
            </tr>
          </table>
          <![endif]-->
        </div>
    
        <div id="box2">
          part 5
        </div>
      </div>
    </body>
    </html>
    Code (markup):
    cheers,

    gary
     
    kk5st, Jul 23, 2009 IP
  12. digitalpoint

    digitalpoint Overlord of no one Staff

    Messages:
    38,333
    Likes Received:
    2,613
    Best Answers:
    462
    Trophy Points:
    710
    Digital Goods:
    29
    #12
    Yeah, except the ones you put in the box1 div will never wrap under the nav div. In the sample you just posted I would want part 3 and part 4 (maybe part 2) to wrap under nav (ie be in the box2 div). The problem is we never know the height of the part x potions (they are dynamic), and only want the minimum number of parts to wrap to the right of nav (we don't have a way of knowing how many it will be, so can't really isolate some of them into a cell.
     
    digitalpoint, Jul 23, 2009 IP
  13. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #13
    Hell, you keep moving the goalposts.

    What determines how many boxes do not wrap, and thus determine the height of the nav box? Or, is the nav box a fixed height, and you want only complete 'parts' to wrap or not wrap?

    How about tightening up the specs a bit?

    cheers,

    gary
     
    kk5st, Jul 23, 2009 IP
  14. digitalpoint

    digitalpoint Overlord of no one Staff

    Messages:
    38,333
    Likes Received:
    2,613
    Best Answers:
    462
    Trophy Points:
    710
    Digital Goods:
    29
    #14
    No, not moving the goal posts, it was what I was trying to explain in my first post (screenshots and everything). :)

    The nav box is a fixed width, the part x items are always (highly) variable). It's really just a cosmetic thing... my original example works, just would rather have nav be able to fill down as much as it can without wrapping the next part. Just looks bad imo because if the last wrapping part is big, you end up with a massive empty area under the nav... rather be able to have the background of the nav fill down to fill that space.
     
    digitalpoint, Jul 23, 2009 IP
  15. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #15
    This is the best I can do; there's too much shifting ground; though you might try playing with the faux column method.
      <div id="wrap">
        <div id="nav">
          <ul>
            <li>menu item</li>
    
            <li>menu item</li>
    
            <li>menu item</li>
    
            <li>menu item</li>
    
            <li>menu item</li>
          </ul>
        </div>
    
        <div id="boxes">
          <p>item1</p>
    
          <p>item2
          <br />
          and more</p>
    
          <p>item3
          <br />
          and more
          <br />
          and more</p>
    
          <p>item4</p>
    
          <p>item5</p>
    
          <p>item6</p>
    
          <p>item7</p>
        </div>
      </div><!-- end wrap -->
    ====================
      #wrap {
        border: 1px dotted black;
        color: black;
        width: 600px;
        }
    
      #nav {
        background-color: green;
        border: 1px dotted gray;
        float: left;
        width: 300px;
        }
    
      #boxes {
        background-color: red;
        padding: 1px;
        }
    
      #boxes p {
        overflow: hidden;
        padding: 0 5px;
        }
    Code (markup):
    Play with the number of nav and boxes entries, and the contents of each. There is no wrap under unless the entire p can wrap under.

    cheers,

    gary
     
    kk5st, Jul 23, 2009 IP
  16. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #16
    Well, I tried my own advice. Using faux columns and new block formatting contexts seems to do the job.
      #wrap {
        background: url(dp-faux.png) left top repeat-y;
        border: 1px dotted black;
        color: black;
        width: 600px;
        }
    
      #nav {
        float: left;
        width: 300px;
        }
    
      #boxes {
        padding: 1px;
        }
    
      #boxes p {
        background-color: red;
        margin: 0;
        overflow: hidden;
        padding: 1em 5px;
        }
    Code (markup):
    Specimen image attd.

    cheers,

    gary
     

    Attached Files:

    kk5st, Jul 23, 2009 IP
  17. luckymurari

    luckymurari Active Member

    Messages:
    629
    Likes Received:
    40
    Best Answers:
    0
    Trophy Points:
    90
    #17
    IMO This is kind of like a problem where you need to have something fixed.

    1> Either you have the height of the #nav fixed -> then you can have any random number of part x's on the right ofit depending on requirement. This can be accomplished byg iving #nav its height
    2> You have number of parts fixed( you can take freedom in their heights) . This can be accomplished by placing #nav and the number of required part x's in a wrapper

    Hope I cleared it up.
     
    luckymurari, Jul 24, 2009 IP