View Full Version : Simple CSS Prob - Setting Cloumns inside DIV

05-22-2005, 12:03 AM
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:

#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:

#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:

#textcontent {
left: 342px;
top: 49px;
width: 402px;
height: 121px;

And here's how I've organized the DIV tages:

<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>

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...


05-22-2005, 01:54 AM
Can you like draw a picture of you what you want? Even just a rough sketch, like in mspaint will be fine? With the picture, I can probably work something up that you can use. I am a visual learner.

05-22-2005, 03:58 AM
Hey, thanks for your response. I've attached a GIF of the layout of the site. Hopefully this will help, thanks again...

05-22-2005, 05:14 AM
Here you go, I think you should be able to work with this. You might only have to use one image. I used absolute urls to your images on your server. They all line up now like they should. :cool:

05-22-2005, 05:32 AM
Wow, thanks a lot! I appreciate this so much, I should be able to adapt it perfectly! Thanks again...

05-22-2005, 05:34 AM
Down load the newer one, it has your images lined up as well.