Calling All Css Experts (i Need Some Help)

[KansukeKojima 0]

Ok, whenever I try to code a web site using <div></div> tags I run into one problem... the only run vertically... laying on top of one another...... I know there is a way to get div tags to run side-by-side... but how?

(Diagram of what I mean)
When I attempt:

*************************Banner**************************************************Content Area*************************Content Different Content Area*************************

What I want to happen:

*************************Banner*************************Content Area	 *   Content Area						*						*						*

so what css (or whatever else) to get it like that...?

[sonesay 7]

In your example (2 column) you float content area left and right

<div id='cont_left'></div><div id='cont_right'></div>

#cont_left{float:left;}#cont_right{float:right;}

I think with this method though its going to float all the way to the right and left. so its probably best to have an empty content container with a defined withsay 600 px if you want it that wide over all

<div id='cont'><div id='cont_left'></div><div id='cont_right'></div></div>

#cont{width:600px;}#cont_left{float:left;}#cont_right{float:right;}

ok unless there is some positioning available to control how far wide out they float and it works well then you dont need to use the above example.

Edited January 16, 2008 by sonesay (see edit history)

[KansukeKojima 0]

ok what about padding between them... just like a center float div... or what....

[sonesay 7]

You can just define the left and right divs width to equal a value that gives enough space in between them.

[jlhaslip 4]

Here is a sample code showing paragraph tags instead of div's, but the concept is the same since p tags are block level like Div tags. Div's are a generic container, whereas paragraphs deal with text.

<p style="float: left; border: 1px solid red; width: 300px;">						float:left paragraph					</p>					<p style="float:right; border: 1px dashed red;">						float:right paragraph					</p>					<p>						non-floated paragraph					</p>

Try it out in your template. Of course, you could move the styles to an external CSs file nand give the p's classes according to their behaviour...

Hope this helps.

[KansukeKojima 0]

thanks to both of you.