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 9 of 9
  1. #1
    IBM
    IBM is offline
    New Coder
    Join Date
    Jul 2002
    Posts
    42
    Thanks
    0
    Thanked 0 Times in 0 Posts

    CSS divs+100% height

    Are there any css gurus that can answer this question for me?

    How do you set a two column css div layout to expand with the content. Using height:100% for the divs won't do it. If you have to float the divs to get them to align side by side for the layout each div that floats leaves it's container.

    Here is an example of what I am trying to do.

    One horizontal div on top div, the header.
    Two vertical divs aligned side by side to eachother by the only way I know how, using float:left, below.

    One more horizontal div-the footer below the two vertical divs.

    Problems, if content in the two vertical divs grow beyond the window's viewable size, the content overflows the footer div.. not good.
    I want to make the two vertical divs able to grow and shrink just like tables would in a tabular layout. Keep in mind that this would have to work on atleast IE and opera.

  • #2
    Senior Coder
    Join Date
    Oct 2003
    Location
    Australia
    Posts
    1,963
    Thanks
    0
    Thanked 0 Times in 0 Posts
    How about a link? Where are you up to?
    I'm no guru, but I would think that if you keep all elements inline (ie: don't use absolute positioning) and give the footer {clear:both} you shouldn't have any problem (except to tweek it for IE).
    Link to your code, and I'll have a quick bash.

    I take no responsibility for the above nonsense.


    Left Justified

  • #3
    IBM
    IBM is offline
    New Coder
    Join Date
    Jul 2002
    Posts
    42
    Thanks
    0
    Thanked 0 Times in 0 Posts
    mind if I uplaod it at a text file?

    I don't have the code up yet..

    But an exmple of what I mean is:

    PHP 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></title>
    </
    head>
    <
    body>

    <
    div style="border:2px solid green;width:750px;position:relative;margin-left:auto;margin-right:auto;">

    <
    div style="float:left;width:150px;border:2px solid red;"></div>

    <
    div style="width:550px;border:2px solid red;float:left;position:relative;left:0px;top:0px;">
    <
    h1>red fungus hurts everyone</h1>
    </
    div>

    </
    div>
    </
    body>
    </
    html
    If you view the page you'll notice that the left inner div doesn't expand to the size of the parent container. All I want is to have a main div container, and two divs within. One on the left and one on the right.
    Both inner divs should expand to the full height of the main div.

    But, if I do it one way it will only work in IE, I want it to also work in mozilla...

    Anything you can advise me on at this point would be fantastic!

  • #4
    Senior Coder
    Join Date
    Oct 2003
    Location
    Australia
    Posts
    1,963
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Mmmm.. Try starting with a layout example , deconstruct it, and see why it works
    The one I provided does a fair bit more than you required, but should be easy enough to srtip back.
    Andrew

    I take no responsibility for the above nonsense.


    Left Justified

  • #5
    IBM
    IBM is offline
    New Coder
    Join Date
    Jul 2002
    Posts
    42
    Thanks
    0
    Thanked 0 Times in 0 Posts
    thank you.
    I'll check out the example, I've saved a copy so it's up to you if you wanna keep it up.

    I'll see what makes your example tick..
    Then I'll break it

  • #6
    New Coder
    Join Date
    Nov 2003
    Posts
    74
    Thanks
    0
    Thanked 0 Times in 0 Posts
    this is a little late:

    wrap a div around both left and right floaters, then set the actual width of wrap div + height:auto, overflow:hidden, this is also where you change the bg color (you can color the floaters bg, but if they are side by side and one has more content it will break to reveal the bg of wrap).

  • #7
    Master Coder
    Join Date
    Apr 2003
    Location
    in my house
    Posts
    5,211
    Thanks
    39
    Thanked 201 Times in 197 Posts
    Hang about. I have just been working on a site similarly laid out. One top div the width of the window and below that two divs vertically sized and sitting side by side. Below both of these is the footer div. Just about the only difference is that below the top div, I have a menu line, which can easily be removed and in the centre is a centre div, which if removed makes no difference to the vertical divs. I'l look out the two files (html and css) and zip them for you. Since its nearly 2am here, I'll try to do it tomorrow - or later today as it is now Sunday.

    Bazz
    "The day you stop learning is the day you become obsolete"! - my late Dad.

    Why do some people say "I don't know for sure"? If they don't know for sure then, they don't know!
    Useful MySQL resource
    Useful MySQL link

  • #8
    New Coder
    Join Date
    Nov 2003
    Posts
    74
    Thanks
    0
    Thanked 0 Times in 0 Posts
    * fixed width/centered

    i just made this for an employee:

    http://www.jmparsons.com/divexample.htm

    it shows what i meant by using height:auto, overflow: hidden.

    i kept the css in the file. works in mozzila/ie.
    Last edited by lejon; 04-11-2004 at 07:21 AM.

  • #9
    Master Coder
    Join Date
    Apr 2003
    Location
    in my house
    Posts
    5,211
    Thanks
    39
    Thanked 201 Times in 197 Posts
    Well if mine is any use, use it


    http://www.thechrissystem.com/cgi-bin/interest.pl

    You will notice that the centre div (the form part), isnt displaying centered as it should and, as it does with IE.

    The rest does pretty much what you ask for, I think. There is more in thempage than it sounds like you need so just remove the excess. It should be easily identifiable.

    Specifically - the more text on the left and right divs, the longer they become and push downwards, the footer div (which I have called bottomdiv).

    hth
    bazz
    "The day you stop learning is the day you become obsolete"! - my late Dad.

    Why do some people say "I don't know for sure"? If they don't know for sure then, they don't know!
    Useful MySQL resource
    Useful MySQL link


  •  

    Posting Permissions

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