Divs go to the left below each other

Bob8 · 12-05-2012, 06:51 PM

I try to make a container of 1140 px and center it. Then in this container I try to place images next to each other. The strange thing is that both images (and the container as well I think) are aligned left, and below each other.
I did try to put it inline and fload to the left, but it appears not to be working...

Code:

<body class="centerAll">
<div id="box1">
<div id="logos"></div>
<div id="logo"></div>
</div>

Code:

.centerAll {
	text-align: center;
}
#box1{
	margin-top: 200px;
	width: 1140px;
	height: 275px;
	margin-bottom: 15px;
}
#logos{
	width: 555px;
	height: 275px;
	background-image: url('img/one.png');
	background-repeat: no-repeat; 
	background-position: top;
	
}
#logo{
	width: 165px;
	height: 275px;
	background-image: url('img/two.png');
	background-repeat: no-repeat; 
	background-position: top;
	display:inline-block;
	float:left;
	margin-left: 20px;
}

alykins · 12-05-2012, 07:26 PM

I think you need to look at and understand the box model and then Block vs Inline elements and how they behave. You have two block levels there which would stack on each other, and then one being floated. What you need to do is float all three. A quick google on 3 column div layout will get you a ton of results... here's one.

Try running through some online tutorials as well as they will teach you a great deal.