WeLoveCSS Logo
Home Profile Members Search Rules Help New Posts



WeLoveCSS > WEB DESIGN > CSS > [SOLVED] Placing 2 DIVs side by side..

Closed Thread
  Thread Tools Display Modes
Old 5th September 06, 08:05 AM   #1
vxt
WLC Member
 
Join Date: Sep 2006
Posts: 9
Default 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.
vxt is offline  
Old 5th September 06, 09:12 AM   #2
Nemus
WLC Lover
 
Nemus's Avatar
 
Join Date: Apr 2006
Location: Falköping, Sweden
Posts: 106
Default 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.
__________________

To view links or images in signatures your post count must be 5 or greater. You currently have 0 posts.
Nemus is offline  
Old 5th September 06, 10:18 AM   #3
vxt
WLC Member
 
Join Date: Sep 2006
Posts: 9
Default 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.
vxt is offline  
Old 5th September 06, 10:53 AM   #4
DaveSt
WLC Member
 
Join Date: Sep 2006
Posts: 8
Default 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>
DaveSt is offline  
Old 5th September 06, 07:16 PM   #5
Game Makker
WLC Lover
 
Game Makker's Avatar
 
Join Date: Jul 2006
Location: United Kingdom, Hertfordshire
Posts: 266
Default 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.
__________________
**
To view links or images in signatures your post count must be 5 or greater. You currently have 0 posts.
**
Simple articles to help anyone get started.
Game Makker is offline  
Old 5th September 06, 07:26 PM   #6
vxt
WLC Member
 
Join Date: Sep 2006
Posts: 9
Default 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?
__________________

To view links or images in signatures your post count must be 5 or greater. You currently have 0 posts.
vxt is offline  
Old 5th September 06, 07:28 PM   #7
vxt
WLC Member
 
Join Date: Sep 2006
Posts: 9
Default 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.
Well, float messes things up since there is a container DIV.
__________________

To view links or images in signatures your post count must be 5 or greater. You currently have 0 posts.
vxt is offline  
Old 5th September 06, 10:36 PM   #8
DaveSt
WLC Member
 
Join Date: Sep 2006
Posts: 8
Default 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.
DaveSt is offline  
Old 6th September 06, 05:46 PM   #9
coolaid
WLC Member
 
coolaid's Avatar
 
Join Date: Jul 2006
Location: l.a!
Posts: 25
Default 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/
coolaid is offline  
Old 6th September 06, 06:39 PM   #10
vxt
WLC Member
 
Join Date: Sep 2006
Posts: 9
Default 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.
__________________

To view links or images in signatures your post count must be 5 or greater. You currently have 0 posts.
vxt is offline  
Closed Thread


Thread Tools
Display Modes
Linear Mode Linear Mode

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump

Similar Threads
Thread Thread Starter Forum Replies Last Post
Divs in a grid netfuel HTML & XHTML 4 28th June 07 12:05 PM
IE side by side div float akashenk Browser Compatibility 3 14th January 07 01:41 PM
extending multiple divs to fill the screen gucci09 Scripting and Server Side 1 10th January 07 05:54 PM
Strange problem with nested div's in IE emjay1 Browser Compatibility 2 1st September 06 04:28 PM


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



Home | Advertise | Contact Us | Top
Home | Advertise | Contact Us | Top

CopyrightŠ 2006 WeLoveCSS.com. All Rights Reserved.
Powered by vBulletin Version 3.8.4 Copyright ©2000 - 2014, Jelsoft Enterprises Ltd.