...

View Full Version : Lining up 5 DIVS next to each other - how?



bigbadroo
02-14-2008, 10:43 AM
Hi

I have five copies of the same div that I want to line up horizontally next to each other, with a 20px gap between.

Does anyone have ninja CSS power and actually know how to do this?

Cheers

Shaun

abduraooft
02-14-2008, 11:54 AM
<div id="wrapper">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div id="fifth">5</div>
<div style="clear:both"></div>
<div>

<style type="text/css">
div#wrapper{
width:800px;
border:1px solid black;
}
div#wrapper div{
float:left;
width:120px;
margin-right:20px;
border:1px solid red;
}
div#wrapper #fifth{
margin:0;
}
</style>
(Haven't tested though)

maxvee8
02-15-2008, 02:48 AM
i do it this way, abdus is a nice way of doin it tho


div#wrapper{
width:800px;
border:1px solid black;
}

.box{
float:left;
display:inline;
background-color:#009966;
width:144px;
margin:0 20px 0 0;
}

.boxEnd{
float:left;
display:inline;
background-color:#009966;
width:144px;
margin:0;
}


<div id="wrapper">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="boxEnd">5</div>
<div style="clear:both"></div>

<div>

same result

bigbadroo
02-16-2008, 02:03 AM
Thanks guys

I tried Abduraooft's way - it's here http://www.bigbadroo.com.au/delete.html

It works, except that in IE, an extra two boxes are created - how do I get rid of them?

Thanks

Shaun

abduraooft
02-16-2008, 09:41 AM
You have some errors in your markup (http://validator.w3.org/check?uri=http%3A%2F%2Fwww.bigbadroo.com.au%2Fdelete.html&charset=%28detect+automatically%29&doctype=Inline&group=0) (missing closing tag for #wrapper)
Try this...

<body>

<div id="wrapper">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div id="fifth">5</div>
<br style="clear: both"/>
</div>

</body>
(replaced the last div with br to get rid of an extra border:none; there!)

bigbadroo
02-17-2008, 01:26 AM
Thanks guys - I'm off to nominate you both now.
Shaun

Apostropartheid
02-17-2008, 03:49 PM
Are you sure that a list might not be more appropriate?

jlhaslip
02-17-2008, 11:05 PM
http://jlhaslip.trap17.com/samples/misc/demo/header_link_boxes.html



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum