4 column div help

Mark M · 24 Sep 2010 at 11:12

Only ever attempted 2 columns but now I need 4. Im nearly there but Im a bit lost off with the positioning. It works but goes the full width of the screen where as I want it to be within the service wrapper which is 800px wide.

Css:

Code:

#service_wrapper{
	width:800px;
	height:260px;
	clear:both;
	background-color:#FFFFFF;
	
}	

#service1{
	position: absolute;
	left:0px;
	width: 25%;
	height:200px;
	background-color:#CCCCCC;
	}


#service2{
	position:absolute;
	left:25%;
	width:25%;
	height:200px;
	background-color:#999999;
	
	
}	

#service3{
	position:absolute;
	left:50%;
	width:25%;
	height:200px;
	margin:0px;
	background-color:#666666;
	
}

#service4{
	position:absolute;
	left:75%;
	width:25%;
	height:200px;
	margin:0px;
	background-color: #333333;
	
}

HTML:

Code:

<div id="service_wrapper"> 
<div id="service1">

Service 1

</div><!-- end service1 -->

<div id="service2">
Service 2

</div><!-- end service2 -->

<div id="service3">

Service 3

</div><!-- end service3 -->

<div id="service4">

Service 4

</div><!-- end service4 -->

</div> <!-- end service_wrapper -->

Thanks

Steve09 · 24 Sep 2010 at 11:36

I'm sure there are many ways but you could just add:
left:200px; for the service 2 div, then 400px for service 3 and 600px for service 4.

Mark M · 24 Sep 2010 at 11:48

Just tried that and its still going to the far left of the screen and not in the 800px wrapper. Is it the absolute positioning?

EDIT - Just changed position:absolute to float:left and it seems to have done the trick.

3dcandy · 24 Sep 2010 at 12:06

aye position absolute positions it relative to the screen not the wrapper div in that example. float:left will work but you may have problems further down if the column legths are different....

Mark M · 24 Sep 2010 at 12:53

Ah thanks, thats makes sense as to why it moved when I resized the window too.

Tripnologist · 24 Sep 2010 at 12:58

You can contain an absolutely positioned element by giving it's parent element a position as well (such as relative).

However, doing a full layout with absolutely positioned elements is just a bad idea tbh.

Steve09 · 24 Sep 2010 at 13:39

My way put the service divs in the wrapper at the top left of the screen after copying your code.
You didn't mention about positioning the wrapper in the centre of the screen for example and wanting them to stay contained when the window is resized.