WeLoveCSS

WeLoveCSS (http://welovecss.com/index.php)
-   CSS (http://welovecss.com/forumdisplay.php?f=5)
-   -   [SOLVED] Placing 2 DIVs side by side.. (http://welovecss.com/showthread.php?t=465)

vxt 5th September 06 09:05 AM

Placing 2 DIVs side by side..
 
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 5th September 06 10:12 AM

Re: Placing 2 DIVs side by side..
 
Hi!
Something like this should solve your problem.

Code:

div { width: 300px; border: 1px solid red; float: left}
and, in the html:

Code:

<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 5th September 06 11:18 AM

Re: Placing 2 DIVs side by side..
 
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 5th September 06 11:53 AM

Re: Placing 2 DIVs side by side..
 
Hi,
To get one column to go to the left and one to the right you could do this:

CSS
Code:

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

and the html will be:
Code:

<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
Code:

.clear { clear: both;}
html
Code:

<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 5th September 06 08:16 PM

Re: Placing 2 DIVs side by side..
 
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. :D

vxt 5th September 06 08:26 PM

Re: Placing 2 DIVs side by side..
 
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 5th September 06 08:28 PM

Re: Placing 2 DIVs side by side..
 
Quote:

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. :D

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

DaveSt 5th September 06 11:36 PM

Re: Placing 2 DIVs side by side..
 
{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 6th September 06 06:46 PM

Re: Placing 2 DIVs side by side..
 
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 6th September 06 07:39 PM

Re: Placing 2 DIVs side by side..
 
Thanks Dave, that explains a lot!

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


All times are GMT. The time now is 03:38 AM.

Powered by vBulletin Version 3.8.4 Copyright ©2000 - 2017, Jelsoft Enterprises Ltd.