boogily
01-06-2010, 09:42 PM
Trying to make 1 div (730px by 480px) to have 4 divs inside, like a grid. Got the menu title top left, links top right, some text bottom left and a pic bottom right. I can't figure out whats wrong with code. Here it is.
<div id="services" style="position: absolute; left: 1660px; top: 0px; width: 730px; height: 480px;">
<div class="menutitle">Services</div>
<div class="mainlinks">Here are my links</div>
<div id="servContent1" style="margin-top:200px; margin-left:5px; padding:5px; width:450px; height:270px; overflow:auto; background-color:#ddd9cd; border-color:#040403; border-style:solid; border-width:1px; float:left" align="left">some overflowing text.....</div>
<div id="servContent2" class="img" style="margin-top:200px; padding:5px; width:250px; height:270px; float:left" align="center"><img src="picturewanted.jpg" width="201" height="220" /></div>
<!-- END: services -->
</div>
Classes are:
.mainlinks {
height:50px;
margin-top:20px;
margin-right:20px;
color: #FFF;
float: right;
font-family: Verdana, Geneva, sans-serif;
}
.menutitle {
height:50px;
margin-top:20px;
margin-left:20px;
font-size: 28px;
color: #FFF;
font-weight: bold;
float: left;
font-family: Verdana, Geneva, sans-serif;
}
div.img img{
border-color:#FFF;
border-style:solid;
border-width:1px;
}
I thought I'd have the margins and floats set correctly. I'm sure its a stupid newb mistake, so sorry if it is. I appreciate the help. Link to is
www.designbyryanboog.com/spa
Click on products. (obviously website isn't finished yet... )
Thanks so much for any help
<div id="services" style="position: absolute; left: 1660px; top: 0px; width: 730px; height: 480px;">
<div class="menutitle">Services</div>
<div class="mainlinks">Here are my links</div>
<div id="servContent1" style="margin-top:200px; margin-left:5px; padding:5px; width:450px; height:270px; overflow:auto; background-color:#ddd9cd; border-color:#040403; border-style:solid; border-width:1px; float:left" align="left">some overflowing text.....</div>
<div id="servContent2" class="img" style="margin-top:200px; padding:5px; width:250px; height:270px; float:left" align="center"><img src="picturewanted.jpg" width="201" height="220" /></div>
<!-- END: services -->
</div>
Classes are:
.mainlinks {
height:50px;
margin-top:20px;
margin-right:20px;
color: #FFF;
float: right;
font-family: Verdana, Geneva, sans-serif;
}
.menutitle {
height:50px;
margin-top:20px;
margin-left:20px;
font-size: 28px;
color: #FFF;
font-weight: bold;
float: left;
font-family: Verdana, Geneva, sans-serif;
}
div.img img{
border-color:#FFF;
border-style:solid;
border-width:1px;
}
I thought I'd have the margins and floats set correctly. I'm sure its a stupid newb mistake, so sorry if it is. I appreciate the help. Link to is
www.designbyryanboog.com/spa
Click on products. (obviously website isn't finished yet... )
Thanks so much for any help