can't figure out how...

[phynias]

I can't figure out how to get boxes like this without images. I want to do it all with divs so any help would be appreciated.

http://turk-182.com/comp05.jpg

so i want to be able to put the orange boxes (more like box offset by a box) in rows and boxes. so basically multiple orange boxes on a single page.

[tashakota]

<div style="width:300px; height: 300px; background-color:orange; float:left;">
	   <div style="width:200px; height:200px; position:relative; left:30px; top:30px; background-color:yellow;">
	   </div>
	</div>
	<div style="width:300px; height: 300px; background-color:orange; float:left;">
	   <div style="width:200px; height:200px; position:relative; left:30px; top:30px; background-color:yellow;">
	   </div>
	</div>
	<div style="width:300px; height: 300px; background-color:orange; float:left;">
	   <div style="width:200px; height:200px; position:relative; left:30px; top:30px; background-color:yellow;">
	   </div>
	</div>
	<div style="width:300px; height: 300px; background-color:orange; float:left;">
	   <div style="width:200px; height:200px; position:relative; left:30px; top:30px; background-color:yellow;">
	   </div>
	</div>
	<div style="width:300px; height: 300px; background-color:orange; float:left;">
	   <div style="width:200px; height:200px; position:relative; left:30px; top:30px; background-color:yellow;">
	   </div>
	</div>
	<div style="width:300px; height: 300px; background-color:orange; float:left;">
	   <div style="width:200px; height:200px; position:relative; left:30px; top:30px; background-color:yellow;">
	   </div>
	</div>

[phynias]

that's not what i ment. if you look at the example the orange boxes arent exactly squares. they are sort of boxes offset with another box.

*edit: looking at your code it looks like you wanted to do the offset but when i put it in a page it just looks like yellow boxes surrounded by orange.

[tashakota]

As far as I know, you can't round corners of divs without using pictures.

[tashakota]

<div style="width:300px; height: 300px; background-color:orange; float:left; margin:0px 3px 3px 3px;">
	   <div style="width:200px; height:200px; position:relative; left:30px; top:30px; background-color:yellow;">
	   		<div style="width:200px; height:200px; position:relative; left:40px; top:40px; background-color:#FFCC33;">
			</div>
	   </div>
	</div>
	<div style="width:300px; height: 300px; background-color:orange; float:left; margin:0px 3px 3px 3px;">
	   <div style="width:200px; height:200px; position:relative; left:30px; top:30px; background-color:yellow;">
	   		<div style="width:200px; height:200px; position:relative; left:40px; top:40px; background-color:#FFCC33;">
			</div>
	   </div>
	</div>
	<div style="width:300px; height: 300px; background-color:orange; float:left; margin:0px 3px 3px 3px;">
	   <div style="width:200px; height:200px; position:relative; left:30px; top:30px; background-color:yellow;">
	   		<div style="width:200px; height:200px; position:relative; left:40px; top:40px; background-color:#FFCC33;">
			</div>
	   </div>
	</div>
	<div style="width:300px; height: 300px; background-color:orange; float:left; margin:0px 3px 3px 3px;">
	   <div style="width:200px; height:200px; position:relative; left:30px; top:30px; background-color:yellow;">
	   		<div style="width:200px; height:200px; position:relative; left:40px; top:40px; background-color:#FFCC33;">
			</div>
	   </div>
	</div>
	<div style="width:300px; height: 300px; background-color:orange; float:left; margin:0px 3px 3px 3px;">
	   <div style="width:200px; height:200px; position:relative; left:30px; top:30px; background-color:yellow;">
	   		<div style="width:200px; height:200px; position:relative; left:40px; top:40px; background-color:#FFCC33;">
			</div>
	   </div>
	</div>
	<div style="width:300px; height: 300px; background-color:orange; float:left; margin:0px 3px 3px 3px;">
	   <div style="width:200px; height:200px; position:relative; left:30px; top:30px; background-color:yellow;">
	   		<div style="width:200px; height:200px; position:relative; left:40px; top:40px; background-color:#FFCC33;">
			</div>
	   </div>
	</div>

[tashakota]

the above code is long and messy, so once *I* get it to the way I like, I use CSS instead of having all that in the main page. So each element would be given a name or class which would dictate what would happen to it.

So:
Main page of site

<div class="Orangebox">
	   <div class="yellowbox">
	   		<div class="otherorangebox">
			</div>
	   </div>
	</div>
	<div class="Orangebox">
	   <div class="yellowbox">
	   		<div class="otherorangebox">
			</div>
	   </div>
	</div>
	<div class="Orangebox">
	   <div class="yellowbox">
	   		<div class="otherorangebox">
			</div>
	   </div>
	</div>
	<div class="Orangebox">
	   <div class="yellowbox">
	   		<div class="otherorangebox">
			</div>
	   </div>
	</div>
	<div class="Orangebox">
	   <div class="yellowbox">
	   		<div class="otherorangebox">
			</div>
	   </div>
	</div>
	<div class="Orangebox">
	   <div class="yellowbox">
	   		<div class="otherorangebox">
			</div>
	   </div>
	</div>

CSS

.Orangebox {
	width:300px; 
	height: 300px; 
	background-color:orange; 
	float:left; 
	margin:0px 3px 3px 3px;
}

.yellowbox {
	width:200px; 
	height:200px; 
	position:relative; 
	left:30px; 
	top:30px; 
	background-color:yellow;
}

.otherorangebox {
	width:200px; 
	height:200px; 
	position:relative; 
	left:40px; 
	top:40px; 
	background-color:#FFCC33;
}