Whenever I create my own personal web pages, I've always had this problem with using divs to create a multi-column layout. I use the float attribute to align them to the left or right, but when I make the browser window skinnier, the columns re-adjust where one column falls below the other and other things mess up with alignment. I would like the columns to stay put like all other websites do.

What is the best method for this?

4 answers

1
point

Create a container div, set the width, and position your columns inside that div:

#container {
    width: 800px;
}

.column {
    float: left;
    width: 400px;
}

<div id="container">
    <div class="column"></div>
    <div class="column"></div>
</div>
Answered over 7 years ago by Ben Shoults
  • I just wonder.. maybe not the best way, but setting a min-width for the body element, is that a proper way as well? Larrybolt over 7 years ago
Ben 11
1
point

The best way is to place all of your column div's in a container div, with a fixed width ( for example, 800px ).

Answered over 7 years ago by Ben
7777 66
1
point

I've absolutely had this problem.

Depending on how many columns you have, there are different solutions. Adjust widths as necessary. Put these in your CSS files:

Two-column fluid:

#container {
        overflow: hidden;
        width: 100%;
    }

#leftcontent {
        width: 49%;
        float: left;
    }

#rightcontent{
        width: 49%;
        float: right;
    }

Three-column fixed width (900 px):

#container {
        width: 900px;
    }

#leftsidebar {
        float: left;
        width: 200px;
    }

#maincontent { 
        float: left;
        width: 500px;
    }

#rightsidebar {
        float: right;
        width: 200px;
    }

For the latter layout, put this in the HTML document.

<div id="container">
    <div id="leftsidebar">
        LOREM IPSUM
    </div>
    <div id="maincontent">
        LOREM IPSUM
    </div>
    <div id="rightsidebar">
        LOREM IPSUM
    </div>
</div>

These are just a few examples.

Answered over 7 years ago by 7777
0
points

You mean fluid layouts?

http://css-tricks.com/the-perfect-fluid-width-layout/

Answered over 7 years ago by John McKenzie