Problem with website layout idea.

[MrSoundless]

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?

[Chris Coyier]

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.

[MrSoundless]

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

[MrSoundless]

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!

[MrSoundless]

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

[MrSoundless]

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.

[Author]

Posts