CSS: centered, fluid left, fixed right, original ordered layout with minimum / maximum width

The headlines say. I want a two-line CSS layout that:

  • centered - the main content is concentrated on the page
  • has a fixed (pixel) width of the right column
  • has the current left column - uses all available space minus the width of the column to the right
  • is the source code - the contents of the left column comes before the contents of the right column in the HTML source
  • allows a minimum width of 760px in my example
  • allows maximum width - 1024px in my example

If the window is larger than the maximum width, the content will be centered on the page with the maximum value. If the window is less than the maximum width, the content fills 100% of the page, unless it is less than the minimum width, which will make the horizontal scroll bar.

I want to use a little javascript to handle the min / max width for browsers that do not support these properties (I look at you, IE6), but I am also ready to allow this part of the layout to get worse.

. , , , . , , . / ( , ) , / , .

, , .

+---------------------------------------+
|                                       |
|  +---------------------------+-----+  |
|  |fluid                      |fixed|  |
|  |                           |     |  |
|  |                           |     |  |
|  +---------------------------+-----+  |
|                                       |
+---------------------------------------+
+5
3

CSS- Dynamic Drive. , (Fluid-Fixed). max-width min-width , .

FYI, . CSS - , -.

+3

: http://www.ryankinal.com/fluid/

, , , . :

  • 100%
  • , 0% , float-right wrapper
  • (200px )
  • (100px )

, , , . , . - div : .

( ).

+1

Are you looking for something like this? (negative fields + floats + correct source order + fixed right)

http://blog.html.it/layoutgala/LayoutGala23.html

Other layouts on the index page: http://blog.html.it/layoutgala/

And then just add the min / max width to the container.

0
source

All Articles