How can I make my web page fixed-layout?

Question

Here's the sample/jsFiddle: http://jsfiddle.net/antonpug/ub7xW/

Basically, you can't see it in the jsFiddle, I don't think, but it is two columns when it is full screen, however, when you make the screen smaller, it collapses down to just one column - I can't figure out where in my CSS it is doing that!

Answer 1

This causes it:

.column {
    display: inline-block;
    width:600px;
    margin:15px;
}

The inline-block will cause them to sit next to each other if your wrapper is 1200px or more, but otherwise it won't. Set a min-width if you don't want it to wrap.

#wrapper {
    min-width: 1200px; /*might need a bit more for margins*/
    margin:25px;
}

Answer 2

If you do want the columns next to each other you must specify a width under your body selector.

Something like

body {width:1500px;}

This forces the body to overflow the screen and place the columns next to each other. Otherwise, the width of the screen (or "viewing area") sets the width for the body selector because it's default is width:auto .

Answer 3

change css to

#wrapper {
  margin: 25px auto;
  width: 80%;
}

and

.column {
  display: inline-block;
  width: 46%;
  margin: 15px;
  float: left;
}

Answer 4

It's pretty straight forward:

.column {
    display: inline-block;
    width:600px;
    margin:15px;
}

You have 2 DIVs both with ".column". These DIVs have a static width of 600px. They will float next to each other as long as there's space for them (ie. 1200px container)

They collapse because the page is too small for them.

If you're looking to keep 2-columns, you need to set the width to a % like so:

.column{
    ...
    width: 40%;
}

you will have to do some adjustments for your margins as well, depending on what you're looking for.

If you want to keep 2 columns until a certain size, you can set a min-width on your wrapper element so you columns won't get too small:

.wrapper{
    min-width:600px;
}

You can then run a media query for smaller screen sizes so you can collapse your columns into one for things like mobile phones.

Answer 5

change the column's css to this and it should be fine.

.column {
    display: inline-block;
    margin:15px;
    width:40%;
}