Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Problem with website layout idea.

  • This topic is empty.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #30032
    MrSoundless
    Member

    I have an idea for the layout of my upcoming website but I’m not sure how to get the css part done:

    I want my website to resize with the browser window but I want it to have a minimum pixel width. I guess I would go with something like

    min-width: 800px; width: 75%;

    Let’s call that the wrapper div.

    Inside the wrapper I want 3 columns next to each other. Let’s call them col1 col2 and col3 for now.
    Col1 should have a static width. Let’s say 400px.

    Now we’re reaching the problem.
    Col2 and Col3 should have a min-width which could be 200px in this case BUT I want both col2 and col3 to fill in the rest of the wrapper.
    So if I make my browser bigger and my wrapper div becomes 1000px, col1 will be 400px but col2 and col3 should become 300px. How do I achieve this dynamic size of the 2 divs?

    #81412
    Chris Coyier
    Keymaster

    That’s a classic tough problem. It is solvable fairly easily if you absolutely know which one is going to be the tallest column all the time. If you know that, you can absolutely position the column that needs to be a static width to the position and width it needs to be. Then set a fixed left or right padding value on that wrapper to account for the room it’s taking up. That still allows the wrapper to be fluid width in the room that it has left, where the other columns go.

    If you don’t know which is going to be tallest, it’s more difficult. A possible solution is to do the same thing, but measure all three columns with JavaScript and ensure that the wrapper is at least as tall as the tallest column, that was the absolutely positioned column won’t break out anywhere.

    #81410
    MrSoundless
    Member

    Does that mean I won’t be able to center my website because I’m using absolute positioning?
    because I really would like to have my website centered

    #81411
    MrSoundless
    Member

    I got it centered now!

    I got this now:

    Col 1 is outside of the wrapper.
    Col 2 and 3 are inside the wrapper.


    div#col1 {
    position: absolute;
    left: 100px;
    background: #FF0;
    min-width: 400px;
    max-width: 400px;
    }
    div#wrapper{
    margin: 0 100px 0 500px;
    min-width: 400px;
    }
    div#wrapper div#col2 {
    width: 50%;
    float:left;
    }
    div#wrapper div#col3 {
    width: 50%;
    float:left;
    }

    Thanks for your help!

    #81404
    MrSoundless
    Member

    The problem just changed. It now doesn’t seems to work in IE. I mean not at all! I kinda changed the code. It now looks like this:

    HTML:http://pastebin.com/i1Yqv3pC
    CSS: http://pastebin.com/deUzZVYR

    the only visible thing in IE is a black background..
    it does work great on FF and Chrome

    #81360
    MrSoundless
    Member

    that messes up my background ‘shadow’.

    Edit: I decided to add an ie specific stylesheet.
    And I’m using the following to select the right stylesheet:






    Thanks again for all the help.

Viewing 6 posts - 1 through 6 (of 6 total)
  • The forum ‘CSS’ is closed to new topics and replies.