SitePoint Sponsor

User Tag List

Results 1 to 23 of 23

Thread: div height

  1. #1
    SitePoint Zealot
    Join Date
    Mar 2002
    Location
    New York, NY
    Posts
    170
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    div height

    i have two divs that run side by side... one of them scales its height according to how much content is inside it and i want the other div to be the same height as the div with the content in it.. hope this makes sense

    is there any feasible way of doing this with css?
    Better-Barter.com
    Logo store full of unique, professional identities
    perfect for you or your client!

  2. #2
    Caveat surfer Buddy Bradley's Avatar
    Join Date
    May 2003
    Location
    Cambridge, UK
    Posts
    2,366
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Can't think of anything off the top of my head - apart from adding empty space to the second div to make up the same number of lines as are in the first div, but that's not exactly elegant. Only other way to force the height is to specify an exact height, but since you said it scales i guess you don't want to do that.

  3. #3
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by zing
    is there any feasible way of doing this with css?
    I'll give you an example of the only way I've been able to work around this:
    If you know that one of the two <div>s will always be larger than the other, then put a side border on the larger <div>, and if there is going to be a color difference, put the other color (the one that differs from the <body>'s color) in the larger <div> as well. So if you have a left and right div, and the right one will always be larger than the left one, put a left border on the right <div>. Any other way I'd suggest would use tables or Javascript.

  4. #4
    Caveat surfer Buddy Bradley's Avatar
    Join Date
    May 2003
    Location
    Cambridge, UK
    Posts
    2,366
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I just had to read that three times to get it to make sense.

  5. #5
    Rabble Rouser bronze trophy
    Join Date
    Jan 2003
    Location
    Mountain View, CA
    Posts
    427
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by zing
    i have two divs that run side by side... one of them scales its height according to how much content is inside it and i want the other div to be the same height as the div with the content in it.. hope this makes sense

    is there any feasible way of doing this with css?

    It's not possible to really do, but the effect is possible to mimic. Are you trying to have background colors or borders grow the length or trying to position something underneath or what?

  6. #6
    SitePoint Zealot
    Join Date
    Mar 2002
    Location
    New York, NY
    Posts
    170
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    unfortunately for now it just looks like i'm going to have to use tables... however, another question.. does anyone know why you cant specify the height of a <div> as 100%? seems quite illogical considering you can set its width as 100%..

    EDIT: please ignore me, i'm an idiot
    Better-Barter.com
    Logo store full of unique, professional identities
    perfect for you or your client!

  7. #7
    SitePoint Enthusiast
    Join Date
    Oct 2001
    Location
    Orlando, Florida, United States of America
    Posts
    59
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This seems to be a lot like my problem.

    http://www.sitepointforums.com/showt...hreadid=111120

    Check that out and see if it helps any.
    Mirrors are more fun than television.

  8. #8
    Rabble Rouser bronze trophy
    Join Date
    Jan 2003
    Location
    Mountain View, CA
    Posts
    427
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by zing
    unfortunately for now it just looks like i'm going to have to use tables... however, another question.. does anyone know why you cant specify the height of a <div> as 100%? seems quite illogical considering you can set its width as 100%..

    EDIT: please ignore me, i'm an idiot
    Well, I'll answer this anyway as it seems to come up a lot -
    You can.
    However, if the parent element doesn't have a specific height set the % for the child's height gets treated as 'auto'.

  9. #9
    Ceci n'est pas Zoef Zoef's Avatar
    Join Date
    Nov 2002
    Location
    Malta
    Posts
    1,111
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Also a procentual height seems to relate to the height of the viewport rather then to the height of the page.

    Rik
    English tea - Italian coffee - Maltese wine - Belgian beer - French Cognac

  10. #10
    Rabble Rouser bronze trophy
    Join Date
    Jan 2003
    Location
    Mountain View, CA
    Posts
    427
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It relates to the height of the parent element. With no other parent element present the viewport tends to be used. The specs say this is okay, but don't specify the behavior.
    http://www.w3.org/TR/CSS21/visudet.h...eight-property
    for more info

  11. #11
    SitePoint Zealot
    Join Date
    Mar 2002
    Location
    New York, NY
    Posts
    170
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul_C
    Well, I'll answer this anyway as it seems to come up a lot -
    You can.
    However, if the parent element doesn't have a specific height set the % for the child's height gets treated as 'auto'.
    so does this mean there is no way to make an element 100% the height of a parent element that has been scaled depending on content?
    Better-Barter.com
    Logo store full of unique, professional identities
    perfect for you or your client!

  12. #12
    Rabble Rouser bronze trophy
    Join Date
    Jan 2003
    Location
    Mountain View, CA
    Posts
    427
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Correct. CSS is sorely lacking in verticle handling. However, there are ways to mimic the behavior depending on exactly what you're doing.

  13. #13
    SitePoint Zealot
    Join Date
    Mar 2002
    Location
    New York, NY
    Posts
    170
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    oh well.. guess its tables for me
    Better-Barter.com
    Logo store full of unique, professional identities
    perfect for you or your client!

  14. #14
    Rabble Rouser bronze trophy
    Join Date
    Jan 2003
    Location
    Mountain View, CA
    Posts
    427
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Tables may be the way to go, but if you tell us the effect you're going for there may be a way to mimic it without them. Do you have a background color or a border you need stretched the length of the page? This is possible. Kinda hacky, but still cleaner than tables in some cases.

  15. #15
    SitePoint Zealot
    Join Date
    Mar 2002
    Location
    New York, NY
    Posts
    170
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul_C
    ... a border you need stretched the length of the page?
    this is what i need... but i also need two separate divs inside it, one aligned to the top and one to the bottom... if this helps at all

    zing
    Better-Barter.com
    Logo store full of unique, professional identities
    perfect for you or your client!

  16. #16
    Rabble Rouser bronze trophy
    Join Date
    Jan 2003
    Location
    Mountain View, CA
    Posts
    427
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    For starters try poking around the techniques presented at http://www.fu2k.org/alex/css/

    The div aligned to the bottom thing could be tricky. If you have a tabled version please post a link so I can check it out.

  17. #17
    Ceci n'est pas Zoef Zoef's Avatar
    Join Date
    Nov 2002
    Location
    Malta
    Posts
    1,111
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by zing
    this is what i need... but i also need two separate divs inside it, one aligned to the top and one to the bottom... if this helps at all

    zing
    Making a border that stretches all the way is not that difficult. Basically you set a right border on the left column and a left border on the right column and set the margin of the right column so that both borders overlap. An example is in
    this thread.
    To have a div at the top, just put it first, to have one at the bottom, put it last. Or am I not understanding what you want?

    Your 'specification' is rather vague, is I may say so (or maybe that's just me again ). Maybe try, as Paul has pointed out, to past a link to a tabled version or make a little drawing (like with colored boxes or something) and post it here.

    Don't give up! People in here enjoy helping others out.

    Rik
    English tea - Italian coffee - Maltese wine - Belgian beer - French Cognac

  18. #18
    SitePoint Zealot
    Join Date
    Mar 2002
    Location
    New York, NY
    Posts
    170
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ok.... sorry it took me a while to get back to you guys... this is a simple mock up of what i want (sorry its a little messy)

    basically, red box 2 needs to expand to the height of red box 3 depending on the content of box 3.... blue sub box 1 needs to be aligned to the top of red box 2 and blue sub box 2 needs to be aligned to the bottom of red box 2.... hopefully that makes sense

    zing
    Better-Barter.com
    Logo store full of unique, professional identities
    perfect for you or your client!

  19. #19
    Rabble Rouser bronze trophy
    Join Date
    Jan 2003
    Location
    Mountain View, CA
    Posts
    427
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Makes sense.. kinda what I was worried about, but still not necessarily impossible. Depends on some conditions.
    Which, if any, of the boxes have specific heights and/or widths?
    Is the page itself a fluid width?
    Do you ever expect the combined heights of the sub boxes (plus anything in between them) to be greater than the height of box 3?
    How much of a margin will you have at the bottom of your page? How much at the bottom of box 3's content area?

  20. #20
    SitePoint Zealot
    Join Date
    Mar 2002
    Location
    New York, NY
    Posts
    170
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Which, if any, of the boxes have specific heights and/or widths?
    The two sub boxes will have a specific height... and so will box 1 though that one doesn't really apply to the issue
    Is the page itself a fluid width?
    no, its set to 690px
    Do you ever expect the combined heights of the sub boxes (plus anything in between them) to be greater than the height of box 3?
    no, it will always be smaller
    How much of a margin will you have at the bottom of your page?
    not sure.. probably about 7px... does this matter though?
    How much at the bottom of box 3's content area?
    not sure what "how much" refers to.. i assume you mean margin and if so probably 7 px also... again, does this matter?

    zing
    Better-Barter.com
    Logo store full of unique, professional identities
    perfect for you or your client!

  21. #21
    Rabble Rouser bronze trophy
    Join Date
    Jan 2003
    Location
    Mountain View, CA
    Posts
    427
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I was curious about the bottom margins to see what kind of areas were down there to play with.
    The sub box 2 having a specific height will help make this possible. Follow the techniques at the site I linked to earlier to place boxes 1, 2, and 3, subbox 1, and to draw the border between them. Then to place sub box 2 you're actually going to put it at the very foot of the page, in a div after all other boxes, and use relative positioning to bring it up to where you want it.

  22. #22
    Ceci n'est pas Zoef Zoef's Avatar
    Join Date
    Nov 2002
    Location
    Malta
    Posts
    1,111
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul_C
    Then to place sub box 2 you're actually going to put it at the very foot of the page, in a div after all other boxes, and use relative positioning to bring it up to where you want it.
    Nice one, Paul! I learned something new again .

    Well, I couldn't help myself having a little play, so here's the result:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html>
    <head>
    <title>Zing's boxes</title>
    <style type="text/css">
    body,div {margin:0; border:0; padding:0;}
    body {background-color:#fef;}
    #container {width: 690px; background-color:#efe;}
    #box1 {height:70px; background-color:#fee}
    #box2 {
    	position:absolute; top:70px; left:0;
    	width:150px; height:200px; background-color:#efe;
    }
    #box3 {margin-left:150px; height:350px; background-color:#ffe}
    #subbox1 {height:50px; width:130px; margin-left:10px; background-color:#eef}
    #subbox2 {
    	position:relative; top:-50px; left:0;
    	height:50px; width:130px; margin-left:10px; background-color:#eef;
    }
    </style>
    </head>
    <body>
    <div id="container">
    	<div id="box1">box 1</div>
    	<div id="box2"><div id="subbox1">subbox 1</div>box 2</div>
    	<div id="box3">box 3</div>
    </div>
    <div id="subbox2">subbox 2</div>
    </body>
    </html>
    I've used a container div with the same background color as box 2 to disguise that this box is shorter.

    What do you think, guys?

    Rik
    English tea - Italian coffee - Maltese wine - Belgian beer - French Cognac

  23. #23
    SitePoint Zealot
    Join Date
    Mar 2002
    Location
    New York, NY
    Posts
    170
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    zoef.. thats amazing.. thanks so much
    Better-Barter.com
    Logo store full of unique, professional identities
    perfect for you or your client!


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
  •