io 0

Here is example how I would like it to work. I want to have centered layout with these flowers going beyond main page. I can put two divs on both sides of main page column, but I want them to adjust their size accordingly to current window size.

So it would be best if I had a main page column with fixed width, say 940px and both sides should take equaly 50% of the remaining width.

If somebody uses window with 940px I don't want to see horizontal scrolling bar nor these flowers on the sides. If window is smaller, then of course horizontal scroll bar should appear. If it is bigger than 940px, I would like to see at least some part of these flowers on both sides.

You can see how it works with a table on the page to which I've attached a link at the beginnig of this question

2 answers


Why not just make those flowers part of the background? You set the background on a div at the top of the page, outside of your 940px container. Set the position to center, and presto!

Answered over 8 years ago by Abinadi Ayerdis

Also consider using a fluid grid to keep everything within the 940px container.

To display the blocked elements I would use display: line-block.

Answered over 8 years ago by Andrew J. Leer