UGH! I need a bit of help please.

[andrew001]

Hi, Im new (although have read this site alot in the past, etc) and I have positioning issues. So much so, that I am beginning to question the use of CSS over tables for my current project.

I’ll try to explain the best I can.

This is the layout:
[img]http://akstudio.com/position.gif[/img]

Mainbox (contentWrapper – 985px wide)
….contentBox (normally holds the body text)
……..subContent box (getting fancy here)
…………image (sits inside of subcontent, left side)
…..?

Now this is where I have troubles. I am trying to position text to the right of the imagebox box, and the text must expand the subContentBox Vertically. I have tried a bunch of things, I can actually position the elements fine. I made a box, float:right, then normal div tags inside.. increase the top margin to place them under each other. The problem is, the subContentBox wont expand.

It comes down to positioning, but when i try various methods I can either get the box to grow, but the titles are all out of wack, or I can position the titles, and the subContentBox doesn’t expand.

I have googled, searched, tried, experimented, etc… I have spent more then 5 hours trying to get this right… something so simple. I can achieve the same thing using tables in under a minute, but I’m hell-bent on figuring this out.

BTW.. the "subcontentBox" will end up being a repeating region for dynamic data. So all elements must travel within the subContentBox.

Is there something I am missing? A simpler way of doing this?

thanks a ton

[Nodster]

Hi

My suggestion would be to change your divs to include an additional one.

the page would be:

Code:

——HTML OUTLINE ——

all you need to do then is float the image column left and you should have no problems.

[andrew001]

ok thanks. I finally got it. I rebuild the html and CSS from the start, line by line. I know have it working as intended, except for one minor IE issue.

[img]http://www.akstudio.com/position2.gif[/img]

I don’t understand why that happens. When the text is just a few lines, it is fine. when there is a lot more text, it gets justified. This only happens in IE (7)

The code is as follows:

Code:

.greybox {
background-color: #181818;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 20px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #3f3f3f;
border-right-color: #3f3f3f;
border-bottom-color: #3f3f3f;
border-left-color: #3f3f3f;
margin-bottom: 10px;
}
.greyboximage {
background-color: #333333;
height: 120px;
width: 120px;
border: 1px solid #999999;
margin: 10px;
}
.greyboxcontent {
width: 550px;
float: right;
margin: 10px;
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #999999;
font-size: 11px;
clear: both;
}

and html:

Code:

name bob
Title bob title
Description: Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc egestas urna at urna. Praesent lobortis, mi nec imperdiet scelerisque, sapienLorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc egestas urna at urna. Praesent lobortis, mi nec imperdiet scelerisqadipiscing elit. Nunc egestas urna adipiscing elit. Nunc egestas urna

image

[Author]

Posts