PDA

View Full Version : Best way to do this design? (pic included)


harjanto
01-27-2008, 05:16 AM
The big green thing is the parent div. And the red boxes are child divs, injected into the parent div...

how should I attempt the css? Give each red (child) a thick green border? give each red div a smaller width and just center each green div some how?

Thanks for the help


http://img85.imageshack.us/my.php?image=imageim6.png

Majoracle
01-27-2008, 06:22 AM
Assuming the green div has a class of greenbox, and the red box has a class of redboxes:

CSS:
.greenbox {
width: 250px;
padding: 10px 10px 0 10px;
background-color: green;
border: 3px solid #000;
}
.redboxes {
height: 30px;
margin-bottom: 10px;
background-color: red;
border: 3px solid #000;
}

HTML:
<div class="greenbox">
<div class="redboxes"></div>
<div class="redboxes"></div>
<div class="redboxes"></div>
<div class="redboxes"></div>
</div>

This would basically do just that. You'll have to edit the background colors, width, height and all other properties to whatever you want exactly.