[SOLVED] Placing 2 DIVs side by side..

[vxt]

Exactly how is it done with CSS? I hate Tables, but can't figure out how to make columns with DIVs. They always end up one above the other, never side by side.

[Nemus]

Hi!
Something like this should solve your problem.

div { width: 300px; border: 1px solid red; float: left}

and, in the html:

<div>Woho, first div!</div>
<div>And a second one!</div>

Setting the float to left will cause the element to float left as much as possible. That means the elements will be placed side by side.

[vxt]

Hmm, but what if I want one div on left and one on right, but on the same vertical level? Plus float seems to make the divs come out of any container div i might use.

[DaveSt]

Hi,
To get one column to go to the left and one to the right you could do this:

CSS

#leftcolumn { width: 300px; border: 1px solid red; float: left}
#rightcolumn { width: 300px; border: 1px solid red; float: right}

and the html will be:

<div id="leftcolumn"><p>text goes here</p></div>
<div id="rightcolumn"><p>text goes here</p></div>

Also if you use float it affectivly removes that element from any surrounding div. To get around this problem try and add a div class which has 'clear' set to 'both' to your html. This make all the divs sit nicely in there container
Like this:
CSS

.clear { clear: both;}

html

<div id"container">
<div id="leftcolumn"><p>text goes here</p></div>
<div id="rightcolumn"><p>text goes here</p></div>
<div class"clear"></div>
</div>

[Game Makker]

Easy really. Or you can use a margin on the second div and give it a float left to give it a specific distance apart from the 1st.

[vxt]

Thanks DaveST. I will try it. Is { clear: both;} meant to be used for that reason or is it a hack that just works for some unknown reason?

[vxt]

Originally Posted by Game Makker

Easy really. Or you can use a margin on the second div and give it a float left to give it a specific distance apart from the 1st.

Well, float messes things up since there is a container DIV.

[DaveSt]

{clear: both;} is not a hack, it's legitimate CSS, just not very pretty. You'll probably get the same effect if you can add the clear attribute to an element that succeeds the two columns (if it of course is also nested in the container div), for example a footer.

To understand clear I like to think of it as if your telling an element to clear away everything from it's left, right or in this case both it's left and right. This has the effect of dropping the element below the two columns and taking the container div with it.

Just to clarify, there are 3 values you can asssign to clear (left, right and both).

I hope this helps.

[coolaid]

to get a div left and one right, you would still use float: left; on both....

and like previously mentioned, use margins to seperate the divs.
http://cssguide.scudworkz.com/floats_clears/

[vxt]

Thanks Dave, that explains a lot!

Coolaid, thanks for that link, seems like exactly what I needed to learn.