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
    New to the CF scene
    Join Date
    Apr 2006
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    2 column layout problems

    I cant get a 2 column layout too look right... I want the sidebar and the content to go down the same height.

    I want it to look like this:
    Code:
    ----------------------
    |             |      |	
    |             | side |
    |             |  bar |
    |             |      |
    |             |      |
    |  content    |      |
    |             |      |
    |             |      |
    |             |      |
    |             |      |    
    |             |      | 
    |             |      | 
    |             |      | 
    |             |      | 
    |             |      | 
    |             |      | 
    |             |      | 
    ----------------------
    |____________________|
    i DONT want:
    Code:
    ----------------------
    |             |      |	
    |             | side |
    |             |  bar |
    |             |      |
    |             |      |
    |  content    |      |
    |             |      |
    |             |      |
    |             |------|
    |             | 
    |             | 
    |             | 
    |             | 
    |             | 
    |             | 
    |             | 
    |_____________|
    ----------------------
    |____________________|
    or

    Code:
    ----------------------
    |             |      |	
    |             | side |
    |             |  bar |
    |             |      |
    |             |      |
    |  content    |      |
    |             |      |
    |             |      |
    |-------------|      |
                  |      |    
                  |      | 
                  |      | 
                  |      | 
                  |      | 
                  |      | 
                  |      | 
                  |      | 
    ----------------------
    |____________________|

    can someone help me out? Im totally out of ideas for how to line them up...

  • #2
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,372
    Thanks
    32
    Thanked 286 Times in 280 Posts
    You have several options that I'm aware of:

    a. use a table.
    b. use a script to make the heights the same. if the user has the language (like JavaScript) disabled it won't display properly though.
    c. nest the div that you expect to be longer inside the one that you expect to be shorter. to simulate the effect; note it doesn't work if the heights are not as expected.
    d. fake the effect by using the body or container background as the background of the navigation div
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #3
    New to the CF scene
    Join Date
    Apr 2006
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    i dont have any better choices? ugh i hate tables...

  • #4
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    d. is probably your best choice
    CSS currently doesn't really have equal columns natively built into it.
    More info on how to do d.
    http://www.alistapart.com/articles/fauxcolumns/
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #5
    Regular Coder PremiumBlend's Avatar
    Join Date
    Apr 2006
    Location
    Marion, Iowa
    Posts
    201
    Thanks
    0
    Thanked 13 Times in 13 Posts
    your html will look like this:
    Code:
    <div id="sidebar">Sidebar content</div>
    <div id="content">Main content goes here</div>
    you'll need a stylesheet like this:

    Code:
    DIV#sidebar {
    height: 100%;
    width: 120px; /*whatever width you want*/
    float: left;
    overflow: auto;
    }
    DIV#content {
    height: 100%;
    overflow: auto;
    }
    the value of overflow set to 'auto' will create scrollbars if the contents extends past the edges of the 'div'.
    My Website: DumpsterDoggy

  • #6
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    The overflow:auto; won't work in Firefox when the height is set to 100%.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #7
    Regular Coder PremiumBlend's Avatar
    Join Date
    Apr 2006
    Location
    Marion, Iowa
    Posts
    201
    Thanks
    0
    Thanked 13 Times in 13 Posts
    It works for me in firefox. without "overflow: auto;" i get content that leaves the edges of the 'div'.
    My Website: DumpsterDoggy

  • #8
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,372
    Thanks
    32
    Thanked 286 Times in 280 Posts
    Quote Originally Posted by PremiumBlend
    It works for me in firefox. without "overflow: auto;" i get content that leaves the edges of the 'div'.
    I can't say whether Aerospace is right, but did you test this on a page with a DTD (in standards mode)? I've found that you're allowed to break the normal rules, with the height property in particular, when the browser is in quirks mode.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #9
    New to the CF scene
    Join Date
    Apr 2006
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    thanks... it works


    but only when i dont include:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    im not really sure what "doctype" is for... i have been told to just always include it... can anyone explain what its for?


    ugh and without the doctype my site looks all messed in IE...
    Last edited by dbxz; 04-28-2006 at 03:36 AM.


  •  

    Posting Permissions

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