TalkPHP - two columns?

TalkPHP (http://www.talkphp.com/forums.php)

- XHTML, HTML, CSS (http://www.talkphp.com/xhtml-html-css/)

- - two columns? (http://www.talkphp.com/xhtml-html-css/1866-two-columns.html)

Aaron

01-05-2008 08:30 AM

two columns?

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>

All times are GMT. The time now is 06:14 AM.