dcsimg
www.webdeveloper.com
Results 1 to 2 of 2

Thread: positioning divs with flexible height and widths

Hybrid View

  1. #1
    Join Date
    Oct 2007
    Posts
    126

    positioning divs with flexible height and widths

    Hi I should really be able to do this but I'm just having a right old block with it so decided to pass it over to someone with a clearer head than me.

    Here goes:

    I have a wrapper div containing to column divs.

    HTML Code:
    <body>
      <div id="wrapper">
        <div id="left">undefined length of content</div>
        <div id="right">undefined length of content</div>
    </div>
    </body>
    The wrapper has a flexible width and height determined by browser size or content. It needs to be positioned central from the left and right of the screen.

    It's max width is 1200px and min width is 800px governed by screen size.

    It's height is either 100% of browser window or greater if the content inside it pushes it past the height of the viewport.

    This is the style for the wrapper

    HTML Code:
    body, html {height:100%; padding:0; margin:0}
    #wrapper{ min-width:800px; max-width:1200px; min-height:100%; margin:0 auto !important; background:#F0F; position:relative; border-left:#00F solid 4px; border-right:#00F solid 4px;}
    The two column divs inside the wrapper are called left and right.

    Left is 400px wide and height is either 100% of the wrapper height or if it has greater content then the wrapper will wrap around it and scroll past the viewport, either way the bottom of the left div will hit the bottom of the screen or scrolled screen.

    Exactly the same goes for the right div which is positioned to the right of the left div. The only difference is its width needs to fill the remaining space of the wrapper so it's min width is 400px and max width is 800px.

    Both column divs should be the same height as each other. The height is governed by either which ever has the greatest content or if neither has enough content then they both want to be 100% of screen height. The wrapper must always wrap around both divs.

    HTML Code:
    #left{width:400px; min-height:100%; background:#333; position:absolute; top:0; left:0;}
    #right{ min-height:100%; background:#666; position:absolute; top:0; left:400px;}
    As you can see here I'm using position: absolute for the left and right divs, which won't work because as soon as you fill, say the left div with enough content to flow past the viewport then right div and wrapper fall short and don't have the same height as left div. They only have the height of the viewport and not of the total page.

    I could use float: left to position the left and right divs, with an overflow or clear to make the wrapper wrap around them however I can't then control the width of the right div with max-width:800px; min-width:400px; and it has problems with the heights of the two divs as well.

    So there you have it. Surely this can be done with css without having to resort to javascript?

    If I've not made any of it clear please let me know.

    Thanks in advance.

    Chris

  2. #2
    Join Date
    Oct 2007
    Posts
    126
    Well, either I haven't made myself very clear or I've got you all stumped. I've been searching all over for a solution and there are some hacks around using floats and margins however nothing that works here. I'm amazed that you can't do this purely in CSS which kind of makes it unfit for purpose really.

    Seeing as I'm using jQuery anyway I have resorted to that to solve this issue. Disappointing.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles