HTML/CSS: Placing DIVs Next to Each Other

[davee123]

So, I always used to use TABLE tags. And nowadays, everyone says "don't use TABLEs-- use DIVs instead!" But, for the love of all that is sacred, I can't figure out how to place DIVs next to each other.

I can figure out how to make a DIV float to the extreme left or extreme right, but what if I don't want to do that? I just want (for example) 4 divs in a row in the middle of whatever container I put them in.

Effectively, I'm making "tabbed" navigation. I'm hoping to make each "tab" in the navigation be a separate DIV tag, and have them all line up. And of course in the CSS, I'll probably have different named-styles, like "selected", "unselected", "highlighted", so that they'll appear different when the mouse is over them or when they're currently on the desired page.

Anyway, the problem I have is that each time I try to put 2 DIVs next to each other, the 2nd DIV always goes below the first one! Is there some hidden "display" setting I should set it to? Is there another high-level CSS property that's defaulted to do this?

I found one other example that does what I want, but they use LI (list element) tags rather than DIVs. Was that because DIVs don't do what's required? Or did this person similarly just throw in the towel?

DaveE

 

[{~}]

use a style attribute or (more elegantly) you could use a class attribute with the class defined on your style sheet

 

[Greg Bernhardt]

something like this should work. remember you control the floats by appropriately setting the container "width". If you want them to float less extreme then set the container to a lower width. alternatively you can change the box left and right margins.HTML

<div id="container">
<div id="box1"> Box1 </div>
<div id="box2"> Box2 </div>
<div id="box3"> Box3 </div>
</div>

CSS

#container {

width:100%;
height: 300px;
margin:3px auto;
padding:3px;
text-align:center;

}

#box1 {

float:left;
margin:5px;
padding:5px;
width:30%;

}

#box2 {

float:left;
margin:5px;
padding:5px;
width:30%;

}

#box3 {

float:left;
margin:5px;
padding:5px;
width:30%;
clear:right;

}

 

[{~}]

after rereading your question I realize that you seem to be asking for a horizontal menu. Most people use list for menus these days. Div isn't the best tag for defining layouts. I'm not sure who you mean by everyone. Tables are still an acceptable way to layout your page. I use div to define different parts of my document not so much for layout.

 

[Greg Bernhardt]

I'm not sure who you mean by everyone. Tables are still an acceptable way to layout your page. I use div to define different parts of my document not so much for layout.

Gotta disagree. View any major website (yes PF is behind) and the entire layout is now Div. Tables are for displaying data.

 

[{~}]

Greg you probably know better than me what's a good site to learn from

w3 schools leaves something to be desired I think

 

[davee123]

Huh! I guess ... that did the trick! Now I'll just have to see the differences between that and what I've been trying already!

DaveE