Three DIV column with autosize columns

[Anxiro]

Hi there!

First of all, I’m new and I would like to introduce myself quickly.
– Frank, 23 and from The Netherlands. :mrgreen:

After a day or two I’m still stuck at a, maybe, simple CSS problem.
I have a CSS-box with three columns (the code below) and the center column will be 1000px.
The left and right column should auto-align, but they don’t:

Code:

#container{width:100%;margin: 0px auto;}

#main {width:100%;}

#col_Left {float:left;background-position:right; background-color:#F00;}
#col_Center {width:1000px; float:left; text-align:center;background-color:#FC0;}
#col_Right {float:left;background-position:left; background-color:#F00;}
div.clearing {clear:both; display:block; height:15px;}

The problem is that the Left and Right column don’t auto-size with the 100% container.
I would like to have this fixed if this is possible :oops:

Example:

Quote:

Screensize: 1680px

Center column: 1000px;

1680px -1000px (center column) = 680px left.

So that would be 440px on Left and Right column.

Any ideas?

Thanks for any reply!

– Frank

[Anxiro]

Hehe. It’s not that big. The whole website will be 1000px wide.
But because the top of the website has "waves", I want it to keep waving over the whole top. The center of the top will always be in the center.

Look at the sample.
The quality is very very low and the effects are removed:
[img]http://www.re-style.com/tf.jpg[/img]
(edit: the image is resampled in this post)

The page itselfe will be around 800px wide. The images displayed above will be in Flash. On the left and right of the Flash Object, the waves will continue. That’s what I ment.

I hope you understand a bit more? :oops:

[Anxiro]

Hey there!

Thanks for the positive comment! I appreciate!

I guess that’s a problem :(. There is not a live-site running, except than on our local webserver. I was just starting and this was the first (and I hope the last) part I got stuck. I can’t get the waves to continue.

Normally you would add a background-image on the webpage and repeat that. But the logo and other buttons should be exact on the wave. That’s why I need the left and right column; they autosize with a repeating background and in the middle will be the Flashmovie.

– Center-column is always 1000px wide. This will be the main website
– Left and Righcolumn will be 0px wide, except when the screensize is over 1000px.
– Width:auto won’t work. And Display:table-cell won’t either :(

Any clue?

Thanks!
– Frank

[Author]

Posts