two divs side by side

nashultz07 · #1 Aug 9th, 2007, 19:13

How do you get two divs to be side by side?

Skelbo · #2 Aug 9th, 2007, 20:30

Here's a very short thumbnail view about DIVs.

DIVs (think of it as a shorter term for DIVision) are the basic building blocks of CSS.

By default, a DIV wants to extend 100% of the screen unless a width is specified.

DIVs also, by default 'stack' on top of each other.

It is possible to 'float' an element to the left or right of another element, and thus you can have two DIVs side-by-side.

I might suggest that you read through the CSS section of this forum as well as other online resources such as www.w3schools.com to get a basic overview of CSS.

Lchad · #3 Aug 9th, 2007, 20:35

Here's a simple example

css

Code: Select all

.container {
    width: 50%;
    float: left;
    text-align: center;
    }

html

Code: Select all

<body>
<div class="container">First Div</div>
<div class="container">Second Div</div>
</body>
</html>

Marc · #4 Aug 9th, 2007, 21:18

Linda, i think you missed a bit.....!

CSS:

Code: Select all

    #container {
    width: 700px;
    }  
 
    .left {
    width: 50%;
    float: right;
    text-align: center;
    }
 
    .right{
    width: 50%;
    float: right;
    text-align: center;
    }

Code: Select all

 
<div id="container">
 
<div class="left">   Left Column   </div>
 
<div class="right">  Right Column   </div>
 
</div>

Basicly what the above is doing is puting the two columns into a big div (#container) with the width of 700px. The 2 columns are 50% so they will each be 50% of the big div = 350px. If that makes sense!

Marc · #5 Aug 9th, 2007, 21:29

Grrr... Why does the HTML code always go like that?

Thats it ill change it to [code ]....[/code ] tags!

pa007 · #6 Aug 9th, 2007, 22:05

No her code is fine. They'll just float left of each other in much the same way that li's do in a list. Her code is very efficient that's all. That code should work anyway.

Pete.

Lchad · #7 Aug 9th, 2007, 22:07

The question was... how do you put two div's side by side. I didn't place a container or wrapper because technically it's not necessary.

Marc · #8 Aug 9th, 2007, 22:08

Oh.. Cool!!! I never knew that you can do that! You learn somthing new every day dont ya? Sorry Linda!

pa007 · #9 Aug 9th, 2007, 22:09

No linda, Marc thought you needed to float: right; the right hand side div to get it to work but you don't.

Pete.

Lchad · #10 Aug 9th, 2007, 22:14

No problem Marc! It's ok... I make mistakes a lot so it's ok to check my posts!

nashultz07 · #11 Aug 9th, 2007, 23:28

That is what I used but it wasn't working so I changed it to have 2 containers: one set to left and one set to right and that worked.

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
how do i put a border only on a certain side	snelll	Web Page Design	15	May 28th, 2008 13:30
Side by side positioning	josephman1988	Web Page Design	7	Oct 20th, 2007 12:49
Side Column with CSS	Pádraig	Web Page Design	2	Aug 8th, 2007 12:36
pictures side by side	thisandthat	Web Page Design	3	May 16th, 2006 00:36
Client-Side VS Server Side Scripting	redev2006	JavaScript Forum	1	Jul 30th, 2005 19:30

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
two divs side by side