how to make the divs side by side

[programAngel]

lets say I have the following code:

<div class="container">
<div class="item-1">
text
<br/>
text
</div>
<div class="item-2">
text
<br/>
text
</div>
</div>

now I would like the two items to be side by side.
Item-1 on the left side and item-2 on the right side.
I want none of them to be under the other, both in the same "height" (location not size).


How can I do that?


I ask here because I believe css can solve the problem, I just don't sure what exactly should I do.

[mikemcg36]

You this CSS and modify the height and width to what you desire:

<style type="text/css">
.container {
	text-align: left;
	margin: 0px auto;
	padding: 0px;
	border:0;
	width: 600px;
}
.item-1 {
	float: left;
	width: 300px;
	background-color:Red;
}
.item-2 { 
	margin: 0;
	float: left;
	width: 300px;
	background-color:Blue;
}
</style>

[3Nex]

Also one more thing is missing

<style type="text/css">
.container {
        overflow:hidden;
	text-align: left;
	margin: 0px auto;
	padding: 0px;
	border:0;
	width: 600px;
}
.item-1 {
	float: left;
	width: 300px;
	background-color:Red;
}
.item-2 { 
	margin: 0;
	float: left;
	width: 300px;
	background-color:Blue;
}
</style>

Eventually you'll figure out why

[scriptsconnect]

The solution to your problem is very simple:

<style type="text/css">
.clear { /* Also commonly known as clearfix */
clear: both; /* At the very least, you must have this. All extra declarations are for fine-tuning */
height: 0;
font-size: 0;
overflow: hidden;
margin: 0;
padding: 0;
width: 0;
line-height: 0;
}

div.container {
margin: 0 auto; /* This will center a fixed-width container */
width: 500px;
}
div.item-1 {
float: left;
width: 250px;
}
div.item-2 {
float: left; /* You can also set this to float: right; */
width: 250px;
}
</style>

<div class="container">
<div class="item-1">
<p>text</p>
<p>text</p>
<div class="clear"></div>
</div>
<div class="item-2">
<p>text</p>
<p>text</p>
<div class="clear"></div>
</div>
<div class="clear"></div>
</div>

[ScottAN]

Yup the one right above this post will work, just make sure you don't forget the "clear" div. Otherwise you will find yourself perplexed about why your divs do not take up space properly!

[WebWarrior]

Use the example provided by mikemcg36 and 3Nex i.e.


	
	
<style type="text/css">
.container {
        overflow:hidden;
	text-align: left;
	margin: 0px auto;
	padding: 0px;
	border:0;
	width: 600px;
}
.item-1 {
	float: left;
	width: 300px;
	background-color:Red;
}
.item-2 { 
	margin: 0;
	float: left;
	width: 300px;
	background-color:Blue;
}
</style>
 <div class="container">
    <div class="item-1">
        <p>text</p>
        <p>text</p>
    </div>
    <div class="item-2">
         <p>text</p>
         <p>text</p>
    </div>
</div>

In most circumstances, this will prevent the use of clunky <div class="clear"></div>

Note that even if you do decide to go with <div class="clear"></div>, you only really need one pair underneath the <div class="container">.

[scriptsconnect]

It is my own personal preference to put the clear in for all containers. This way, if I make modifications later, it is already there, although it is obviously not a pain to put it in once needed.

[scriptsconnect]

programAngel, one more thing - one of the many benefits of using the clear is to push the height of the primary container down. Add a background color to the primary container, and do not include the clear. You will see that the primary container will act as if the height is 0, thus, not showing any background color. Then, if you add clear, you will see it push down to the button of the tallest child container.

[3Nex]

programAngel, one more thing - one of the many benefits of using the clear is to push the height of the primary container down. Add a background color to the primary container, and do not include the clear. You will see that the primary container will act as if the height is 0, thus, not showing any background color. Then, if you add clear, you will see it push down to the button of the tallest child container.

First of all, we've already taken care of that, it's done. Now he has two ways of achieving what he wanted and he can pick his favorite, which brings me to number two: Stop trying to make him use your way just because it suits you better. And thirdly, the OP isn't even complaining so stop trying so hard to prove your point. We get it, it works, let it go.

[WebWarrior]

Add a background color to the primary container, and do not include the clear. You will see that the primary container will act as if the height is 0, thus, not showing any background color.

 .container { overflow: hidden; }

Takes care of that issue. If you are using FireBug, you'll see that after setting the overflow: hidden; property, the container encloses all elements inside it.

[scriptsconnect]

Excuse me 3Nex, but no one is trying to force him to use one way or another. More information is better for he obviously doesn't know whether to do it one way or another.

I have to say, a lot of people are incredibly moody in this forum. Chill out. Did I hold a gun to his head and tell him that he either uses my method or else?

If he chooses to use my way, fine. If not, fine.

All I'm doing is explaining additional elements from my method, as well as discussing based on what other members have said.

[Mister_grey2010]

you should just notice floating in your css file: item1.{float:left;} item2.{float:right;}
source: http://web-design-lessons.com/articles/article/1/36