I'm just entering the realm of CSS layout -- getting away from tables, and I'm trying to accomplish a pretty simple layout technique. Basically I've created a box with a grey background with an id of this code:
Code:
#info {
background-color: #BFBFBF;
height: 180px;
width: 764px;
margin-top: 10px;
}
Then, I want to put one column of one Image (a section head ), then right under that, another image (a project title head) -- both of which are identical width, and their heights add up to the height of the box mentioned above. This is the CSS for that section:
Code:
#sectionhead {
position: relative;
left: 20px;
top: 0px;
margin: 0px;
padding: 0px;
height: 180px;
width: 248px;
}
Then, within the same box, I want a sized text box 74px to the right of the images and 402px x 121px, again here's the CSS:
Code:
#textcontent {
position:relative;
left: 342px;
top: 49px;
width: 402px;
height: 121px;
}
And here's how I've organized the DIV tages:
Code:
<div align="left" id="info">
<div align="left" id="sectionhead">
<img src="images/section_about.gif" width="248" height="49" /><br />
<img src="images/title_project_placehold.gif" width="248" height="131" /></div>
<div id="textcontent"><p>Lorem ipsum sit dolor amet... </p></div>
</div>
I've nested both the column tags inside the box tag, so I assumed it would position everything relative to that, but that hasn't been the case. The 'sectionhead' positions fine, but then the 'textcontent' seems to position relative to the 'sectionhead'. So I guess my question is, what's the best way to organize this correctly? If I can in the right direction, should I just use a negative number to position the top part of the textcontent? Thanks for any help and here's a link to it's display in a browser...
http://www.ascendvisual.com/fromdavy...layout_css.php
Before you post, read our: 
