Web Analytics Made Easy -
StatCounter CSS divs+100% height - CodingForum

Announcement

Collapse
No announcement yet.

CSS divs+100% height

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new 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.
    We all have souls, where do you want yours to go?

    The little princess
    Back from the dead
    A Love Story
    The only Hope / End Times

  • #2
    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

    Comment


    • #3
      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!
      We all have souls, where do you want yours to go?

      The little princess
      Back from the dead
      A Love Story
      The only Hope / End Times

      Comment


      • #4
        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

        Comment


        • #5
          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
          We all have souls, where do you want yours to go?

          The little princess
          Back from the dead
          A Love Story
          The only Hope / End Times

          Comment


          • #6
            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).

            Comment


            • #7
              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

              Comment


              • #8
                * 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; Apr 11, 2004, 02:21 AM.

                Comment


                • #9
                  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

                  Comment

                  Working...
                  X