HTML Forum

**pallyuk** · 03-07-2005, 10:47 AM

I'm trying to create a layout which will have to DIVs side by side, I have a logo and a navigation bar at the top which are 600px in width, and are correctly placed, i want to place the DIV's below them like:

#DIV_LEFT (420px) | #DIV_RIGHT (180px)

The problem i have is that when i do this the div right doesn't sit properly, it moves further right and pushes the content of the DIV LEFT down, can someone help me so this doesn't happen and i'm able to place these to next to each other.

When i tried to use a float i encountered the same problem, i will post my coding later on but

Can someone help and recommend any changes i could make or places to go, an example of what im trying to achieve can be seen Here

**brokensoul2271** · 03-07-2005, 10:56 AM

im not sure if this would work and it probably wont but have you considered making each div 5px less?
EXAMPLE
DIV_LEFT(415px) | DIV_RIGHT (175px)

I know that sometimes silly things like this can fix CSS probably not here tho...

**pallyuk** · 03-07-2005, 12:04 PM

yeah, i've tried making the div's smaller, tihink it's got something to do with positioning, i'll keep plodding along, i'll post the code up later one i'm home.

**brokensoul2271** · 03-07-2005, 12:06 PM

what about settin one behind the other using the z-index:-1 att.?

**pallyuk** · 03-07-2005, 12:13 PM

hmnn, i'll give it a shot when i get home, i'm currently at college! it's pretty annoying really, i bet there is a real simple answer to my problem.

I've tried having NAV_LEFT at 600px and having the right menu float on top but that just give me a problem with the text being pushed down, and also the float displayed differently in IE and Gecko browsers.

I'm new to all this CSS stuff and whilst i already find it better than tables because of the things it allows you to do it's pretty annoying at times!

**brokensoul2271** · 03-07-2005, 12:15 PM

I agree. i'm still figuring css out... at least it's worth it... i think... heh heh

**ghettobert** · 05:13 PM

hows placing the div left and div right both inside of another container div ? Let them both float left within the container and set it's width to 600.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
<!--
#divLogo {
	margin: 0px;
	padding: 0px;
	width: 600px;
}
#divNav {
	margin: 0px;
	padding: 0px;
	width: 600px;
}
#containerLeftRight {
	margin: 0px;
	padding: 0px;
	width: 600px;
}
#divLeft {
	margin: 0px;
	padding: 0px;
	width: 420px;
	background-color: #FF0000;
	float: left;
}
#divRight {
	margin: 0px;
	padding: 0px;
	width: 180px;
	background-color: #0000FF;
	float: left;
}
-->
</style>
</head>

<body>
<div id="divLogo">LOGO</div>
<div id="divNav">NAVIGATION</div>
<div id="containerLeftRight"><div id="divLeft">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque ut libero. Proin diam nunc, venenatis in, sollicitudin eget, bibendum eu, purus. Vestibulum sit amet lectus sit amet erat nonummy tincidunt. Praesent pharetra ipsum nec turpis. Duis tincidunt est vel justo vehicula pellentesque. Mauris vestibulum. Vestibulum commodo, metus sit amet tristique tincidunt, magna libero mattis sapien, quis porttitor quam sem in massa. Etiam lorem. Nam faucibus. Sed placerat lacus eget quam. Quisque eu lectus. Ut dictum condimentum arcu</div>
<div id="divRight">Morbi sem arcu, viverra tempus, adipiscing id, molestie eu, nibh. Mauris et dolor ac eros nonummy fringilla. Mauris quis dolor. Proin id turpis id augue dignissim imperdiet. Sed volutpat. Nullam vulputate velit eget nisl. In consectetuer placerat tellus. Vivamus bibendum neque at lacus. Nunc consequat, mauris pellentesque dignissim imperdiet, arcu dui pulvinar arcu, auctor lobortis odio libero eu lorem. Vestibulum lobortis, nisl ac condimentum lacinia, enim turpis porta turpis, sed vehicula quam ligula quis mi.</div>
</div>
</body>
</html>

tested in IE 6.0 and FF1.0, seems to work fine

**pallyuk** · 03-07-2005, 05:30 PM

Thanks thats helped me loads, i have just one more queston, why does IE fail to recognise "min-height:" ?

In FF it works fine but IE just refuses to display it what-so-ever.

**ghettobert** · 03-07-2005, 05:48 PM

[CSS property min-height is not supported [Microsoft Internet Explorer 5.5, Microsoft Internet Explorer 6.0]

there you go

Well I guess you could fix it by just giving the div an actual fixed height, would there be enough content it would get streched anyway, dunno if that would work in your design ....

**Slyser** · 03-07-2005, 10:45 PM

DIV1 {float:left;left:5px;}
DIV2 {float:right;right:5px;}

**pallyuk** · 03-08-2005, 05:02 PM

right everything is in place and looks exactly how i had drawn out on paper in IE for some wierd reason but in firefox the boxes aren't moving downwards when content is put in them, now this is being annoying because there is no set height for either DIV, is there a way to sort this or will i just have to place a fixed height on them?

------------------- CSS -----------------------

#container {
background-image: url("images/contbg.gif");
background-repeat: repeat-y;
margin: 0px;
padding: 0px;
border-top: 0px;
border-right: 1px solid black;
border-bottom: 1px solid black;
border-left: 1px solid black;
width: 600px;
height: auto;
margin-left: auto;
margin-right: auto;
}

#con_left {
margin: 0px;
padding: 0px;
width: 420px;
float: left;
}

#con_right {
margin: 0px;
padding: 0px;
width: 180px;
float: right;
}

------------------------ END ---------------------

**pallyuk** · 03-08-2005, 05:10 PM

ahh i've fixed it, i re-read my code and realised that i needed "overflow" in there which helps alot

I tell you, the wonders posting and proof-reading your coding has for you ..

**zandhaar** · 05-29-2010, 05:52 PM

Ok, I noticed this was posted a long time ago, but since this was the first hit on google that I got when searching for "divs alongside eachother" it's probably usefull to post what I use for solution..

The float:left; solution doesn't work for me because the content always takes the static height of the last element in the float, sinceI work with sliding divs (more common nowadays) it screwed up my content.

the solution for it is:

<div id="surrounding_div">
<div style="width: 450px; display:inline-block;"></div>
<div style="width: 450px; display:inline-block; height: 300px;"></div>
</div>

It doesnt matter what content goes inside one of them, it will always push down the elements beneath this divs in your design with a minimum height of 400 pixels.