two columns?

Aaron · 01-05-2008, 08:30 AM

How do I make two columns (not a two column layout, just two columns)?

I tried like... everything, and It won't work without tables. If you add info on the left it pushes the right part down..

hostfreak · 01-07-2008, 02:56 AM

Your going to want to look into the CSS Float property: CSS Float Property

Wildhoney · 01-07-2008, 03:22 AM

As hostfreak says, use the float property. Here's a simple mock-up:

html4strict Code:

<html>
<head>

    <style type="text/css">

        div.left
        {
            float: left;
            overflow: hidden;
            border: 1px solid red;
            width: 100px;
            height: 200px;
        }
        div.right
        {
            float: left;
            overflow: hidden;
            border: 1px solid blue;
            width: 100px;
            height: 200px;
            margin-left: 2px;
        }

    </style>

</head>
<body>

    <div class="left">Left Column</div>
    <div class="right">Right Column</div>

</body>
</html>

Andrew · 01-07-2008, 03:41 AM

I would also suggest putting this:

Code:

* {
    margin: 0;
    padding: 0;
}

at the top of your CSS file to reset all paddings and margins. This way, you won't have as much trouble with the IE box model if you need to fit the two columns within a certain width container.

Wildhoney · 01-08-2008, 01:11 PM

Yea. Well pointed out, Andrew. I always add that at the top and it really does save a lot of the time. It's predominantly due to that Firefox, IE, Opera, et cetera... all stupidly set their very own margin and padding for various elements, and thus resetting all the values allows you to build from the ground up.

Aaron · 01-10-2008, 11:59 AM

I have a reset.css file that resets EVERYTHING to a shared medium. This also helps guard against people toying with default values >.>

Anyway.. How does that work if it is both float:left; ?

Dr John · 01-15-2008, 09:21 AM

If the sum of the divs widths is less than the full width of the space available they both float to the left and bump into each other, so to speak, and end up sitting next to each other. If you don't float them both, one drops below the other. Dropping below the other can also happen if you add borders and margins and padding and the sum of their total width exceeds the total space available. you can also get this if you use percentages as widths and rounding off errors take you over the 100% mark, so I often make the percentages add up to 95% instead.

xenon · 01-15-2008, 06:19 PM

A clear is always required after floating elements. Otherwise, you risk your sanity because everything flows around:

html4strict Code:

<html>
<head>

    <style type="text/css">

        div.left
        {
            float: left;
            overflow: hidden;
            border: 1px solid red;
            width: 100px;
            height: 200px;
        }
        div.right
        {
            float: left;
            overflow: hidden;
            border: 1px solid blue;
            width: 100px;
            height: 200px;
            margin-left: 2px;
        }
        .clear { clear:both; float:none;}
    </style>

</head>
<body>

    <div class="left">Left Column</div>
    <div class="right">Right Column</div>
    <div class="clear"></div>
</body>
</html>