CSS to Make 2 Column Content Areas

Question

I'm trying to stray away from using tables to form the layout of my content, and I can think of two alternatives that I'd like to better learn: (1) styling list items to be side-by-side, and (2) using div blocks that float onto the same line. Both of these would have their own uses for what I'm working on.

I'm already using div tags to form the entire layout of my three-column template, but what I need to do now is a bit different. In case it helps, my project can be found here.

In short, here's my question; how would I style a div so that the width of it is 50% of the width of the area it occupies, rather than 50% of the width of the page?

As for my other question, what would be the best approach to styling list items so that they are side-by-side? I'm working on a registration script now, and instead of using a table with "Username" on the left and the input text on the right, I can use two list items.

It's late and I've been working on this project of mine for about 8 hours straight now, so I apologize if I'm asking anything confusing. Feel free to ask me any questions about what I'm trying to do.

Thanks, friends. :)

Answer 1

ok, so to help you out best I am going to point you to http://960.gs this is a great tool for prototyping this sort of scenario and getting solid reliable code. On to your actual issue, you probably want to set:

width: 50%;
float: left;
display: block;

on the elements you want split. Good luck.

Answer 2

For the width, any relative sizing is relative to the parent, so put it as a child inside the element you want to be half of. For the list items... use display: inline; or float: left;

Answer 3

When you use percentage units for widths and heights, it is relative to the first ancestor element which has defined a width or height. Therefore, all you need to do is set up a div which is as wide as two columns:

<div class="columnContainer">
    <div class="column">
        Column 1
    </div>
    <div class="column">
        Column 2
    </div>
</div>

.columnContainer {
    width: 800px;
}
.column {
    float: left;
    width: 50%;
}

There's a lot more fiddling about required than just the code above, but that's the basics. As Gabriel said, you might get a lot of value out of using a CSS framework like 960.gs

Answer 4

Inline list are simple but have some drawbacks, you cant set height or width for example.

ul li {
    display:inline;
}

If you need block elements you need to float list items and floats can be tedious sometimes, for example you need to take care of clearing [uod]l element.

ul {
    overflow:hidden;
}
ul li {
    float:left;
    display:block;
}

You probably want to remove margins and paddings on list itself in both cases.

ul {
    margin:0;
    padding:0;
}