SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Addict Pavel_Nedved's Avatar
    Join Date
    Aug 2004
    Location
    Victoria, BC
    Posts
    229
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Liquid Layout Help

    Hello,

    I'm working on my first CSS liquid layout (I've been doing this for 3 years, and I've never done one - strange).

    What I want to do is have a 2 column web page. The left column (navigation) will be 240px wide, and the right column (content) will be the rest of the page.

    However I'm running into a problem. I've set the left column to 240px - great. The right column I've set to 100%, and it's partially going behind the left column. Ideally I'd have width = 100% - 240px, but I don't know how to do that.

    A similar problem occurs with the height. I've got the content set to 100% height, and the header is 85px in height (not part of the content div). What I'm ending up with is having to scroll 85px downwards.

    Anybody have any ideas/solutions for me?


    Thanks,

    Pavel

  2. #2
    doing my best to help c2uk's Avatar
    Join Date
    May 2005
    Location
    Cardiff
    Posts
    1,832
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    1. Provide an online example, that's far easier to look at and give you some advice on it.
    2. If that's not possible, some code would actually be helpful.
    3. There is a sticky topic, have you looked in there for an example layout? Follow the link of the first post and you'll find that Paul provided more than just one example of a "3 equalizing col layout +header +footer", maybe one of them solves your problem.
    Dan G
    Marketing Strategist & Consultant

  3. #3
    #titanic {float:none} silver trophy
    molona's Avatar
    Join Date
    Feb 2005
    Location
    from Madrid to Heaven
    Posts
    8,025
    Mentioned
    211 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by Pavel_Nedved
    Hello,

    I'm working on my first CSS liquid layout (I've been doing this for 3 years, and I've never done one - strange).

    What I want to do is have a 2 column web page. The left column (navigation) will be 240px wide, and the right column (content) will be the rest of the page.

    However I'm running into a problem. I've set the left column to 240px - great. The right column I've set to 100%, and it's partially going behind the left column. Ideally I'd have width = 100% - 240px, but I don't know how to do that.

    A similar problem occurs with the height. I've got the content set to 100% height, and the header is 85px in height (not part of the content div). What I'm ending up with is having to scroll 85px downwards.

    Anybody have any ideas/solutions for me?


    Thanks,

    Pavel
    You can't set the width of the second column to 100% because that's simply not true. 100% means 100% of the viewport, but 240px have already been taken for the left column.

    240px is a 30% of the screen width if we consider a resolution of 800px. But then, you need to consider paddings, borders, etc. widths... so the room that you really have available on your right is not 70%, but less than that.

    You could set it to something like 65%, which will fit in 800x600 resolutions, altough in larger resolutions will create a larger gap between the left and right columns.

    If you use this, remember that floats comes first in your css code

    Your other solution is to use positioning to solve the issue. Something like

    Code:
    #main{margin-right: 245px; margin-left:0;padding-right: 0.5em; padding-left:0.5em;}
    #left{width: 240px; position: absolute; top: 0; left:0;}
    What you are doing with this is creating the main area first, leaving room on the left for the navigation, but automatically will take the rest of the room available. Then, you place the left column absolutely so it stays where you want it to be.

  4. #4
    SitePoint Enthusiast wildsue's Avatar
    Join Date
    Oct 2003
    Location
    Switzerland
    Posts
    44
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Pavel!
    2-column-layouts are a good way to get nuts without leaving your home ;-).... had a similar problem today. On my website (http://www.sutanet.ch/test/sample.php) you'll find an example on how to solve the problem, but: for this time i had a problem with mozilla & co. (not ie...) with the equal heights for the columns. I solved the problem with a min-height for the right content, because there will be normally more content than on the left side.
    Hope it helps you!
    Susanne


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
  •