4 column div help

[Mark M]

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:

#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:

<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

 

[Mark M]

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.

 

[Mark M]

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