[RESOLVED] basic layout question - boxes

[brad jones]

I have a basic layout question. I want to create a layout with two boxes that are a set side that are side by side. I'll put text or other markup into these boxes. I am trying to avoid using TABLE tags. I was assuming something like:

 <p><div class="content-box1">[ stuff in box 1]</div> &nbsp;&nbsp;&nbsp;<div class="content-box2">[ stuff in box 2]</div></p>

The CSS for the classes is:

.content-box1 {
    width: 400px;
    height: 400px;
    background-color: yellow;
}
.content-box2 {
    width: 400px;
    height: 400px;
    background-color: skyblue;
}

This puts the boxes on top of each other. What am I missing to get them side by side?

Thanks!

Brad!

[MarkT]

Have you tried float:left

        .content-box1 {
            width: 400px;
            height: 400px;
            background-color: yellow;
            float:left;
        }
        .content-box2 {
            width: 400px;
            height: 400px;
            background-color: skyblue;
            float:left;
        }

[techgnome]

at least one of them needs to be floated... usually when I have to do this, I find an example and then bastardize it to suit my needs.... but they way I've seen it done is to create an outer container, and position it where you want it... then within that container, create two more containers, one for each col... one then gets floated to the left, the other to the right... if the two cols are the same size, then it's easy and things are pretty much done at that point...

Huh... according to this: http://www.ozzu.com/html-tutorials/t...rt-t85704.html both cols would simply need to "float left" ... if one defines thigns left to right, that works.. but usually I'm ttrying to get some SEO into the mix and so define mid col first, then left, then right... so my floats are a bit different..

-tg

[brad jones]

Thanks. My final code looks something like:

<div class="content-box1">[ stuff in box 1]</div> 
      <div class="content-box2">[ stuff in box 2]</div>
      <div class="stop-boxes"></div>

with the CSS:

        .content-box1 {
            margin: 10px 10px 10px 10px;
            width: 400px;
            height: 400px;
            background-color: yellow;
            float:left;
        }
        .content-box2 {
            margin: 10px 10px 10px 10px;
            width: 400px;
            height: 400px;
            background-color: skyblue;
            float:left;
        }
        .stop-boxes {
            clear: both;
        }

[tr333]

The best option for this is the new CSS Flexible Box Layout Module or "flexbox".

http://html5please.com/#flexbox has a good summary of it and gives a few links on how to use it effectively. Note that some browsers might be using the "older" standard, as the latest version of the spec has only just hit "last call" status.

http://dev.opera.com/articles/view/flexbox-basics/
https://developer.mozilla.org/en-US/...flexible_boxes
http://demo.agektmr.com/flexbox/

There is also a flexbox polyfill available for browsers that lack support for the latest spec.