6 replies [Last post]
Jason Duncan
Offline
newbie
Last seen: 15 years 2 weeks ago
Joined: 2006-11-17
Posts: 5
Points: 0

Hello,

I'm having a bit of trouble with a 3 column div-only layout. The left column simply contains a thin left edge image, the middle section is for content, and the right column is a thin right edge image.

The problem is that the images that make up my left and right edges do NOT size/repeat to the height of the middle section where all the content resides. I do not want to absolutely set the height of the content container to a specific px size because I want to use this page as a "master" page and the content height can vary dramatically per page. I want the two edge divs to grow dynamically to the size of the middle column.

Here's the page that's been giving me grief for the last 2 days:
http://www.managercomplete.com/pureaustin/home.aspx

I want it to look like this:
http://www.managercomplete.com/pureaustin/home3.aspx
(this page has the container height set to a specific px... not what I want).

I've included some code snippets below.

Any help, suggestions, or ideas will be GREATLY APPRECIATED.
Thanks!
Jason

Stylesheet.

/* Container for all page content. */
/* Note: margin-right and margin-left allow main container
to snap to center. */
#mainContainer
{
background: #003366;
width:842px;
height:100%;
text-align: left;
vertical-align: top;
margin-right: auto;
margin-left: auto;
}

/* Container for main content */
#contentContainer
{
background: #003366;
margin-top: 0px;
text-align: left;
vertical-align: top;
float:left;
height:100%;
}

/* Left edge of main content area. */
.leftEdge
{
background: url(images/home/pBase_09.gif) repeat-y;
width: 9px;
vertical-align: top;
text-align: left;
float:left;
height:100%;
}

/* Main content area. */
.content
{
background-color: #ffffff;
width: 823px;
height: 100%;
vertical-align: top;
text-align: left;
float:left;
}

/* Right edge of main content area. */
.rightEdge
{
background: url(images/home/pBase_11.gif) repeat-y;
width: 10px;
height:100%;
vertical-align: top;
text-align: left;
float:left;
}

HTML:




Edge looks good.

No edge
(repeated)


/mod edit/<code> tags added

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 7 years 6 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Rather than split up your

Rather than split up your content area into three columns, split it up into three rows. Put the top and bottom rounded corner images in the first and last rows and then use a repeating-y bg-image for the middle row which will also contain all your content.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

Jason Duncan
Offline
newbie
Last seen: 15 years 2 weeks ago
Joined: 2006-11-17
Posts: 5
Points: 0

Getting closer... one last little thing...

Thank you very much, Tyssen. I really appreciate your help! Getting very close now!

So, if I understand correctly, my new middle row will be:




content goes here


The only problem I am having now is that my right image is not showing. However the left edge is scaling beautifully.

I have tried about every imagineable combination of floating, margins, etc, but I just can't get that right image to position/show properly.

Perhaps I have made a mistake in my row somewhere?

Thanks!
Jason

/* Left edge of main content area. */ .leftEdge { background-color:#ffffff; background: url(images/home/pBase_09.gif) repeat-y left; width: 9px; vertical-align: top; text-align: left; height:100%; float:left;

}

/* Main content area. */
.content
{
background-color: #ffffff;
height: 100%;
width: 823px;
vertical-align: top;
text-align: left;
margin-left: 4px;
float:left;

}

/* Right edge of main content area. */
.rightEdge
{
background: url(images/home/pBase_11.gif) repeat-y right;
width: 10px;
height:100%;
margin-left: 0px;
vertical-align: top;
text-align: left;
float:right;
}

/mod edit/<code> tags added/tph

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 7 years 6 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

No, I think you

No, I think you misunderstood me. I meant:

Your content goes here with your repeating bg-image of the sides of the box.

You'll need to re-export your graphics for #top-curve and #bottom-curve to include (as the names suggest) the top and bottom parts of the curved box, not the left and right.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

Jason Duncan
Offline
newbie
Last seen: 15 years 2 weeks ago
Joined: 2006-11-17
Posts: 5
Points: 0

Hello Tyssen,

Hello Tyssen,

Thank you very much for helping me understand. I have studied your suggestions carefully and made several adjustments. Now I get: http://www.managercomplete.com/pureaustin/home5.aspx

To rule out any problems with top or bottom rows, I have removed those for now so I just have the middle content row to deal with.

Very close, but my content width is very narrow in order to get the right edge of the row to align properly. I've gone through a number of attempts to correct this problem, but I must still be misunderstanding something with my rightEdge div?

Or maybe there is still something wrong with my new row div setup?

Hopefully I am not too far off base here or becoming an annoyance. Again, I really appreciate your help!

Thanks!
Jason
Code from the above test page:




content goes here


/* Main content area. */ .content { background-color:#ffffff; height: 100%; width: 832px; vertical-align: top; text-align: left; margin-left: 0px; float:left; }

/* Left edge of main content area. */
.leftEdge
{
background-color:#ffffff;
background: url(images/home/pBase_09.gif) repeat-y left;
width: 9px;
vertical-align: top;
text-align: left;
height:100%;
float:left;
margin-left: 0px;

}

/* Right edge of main content area. */
.rightEdge
{
background: url(images/home/pBase_11.gif) repeat-y right;
height:100%;
vertical-align: top;
text-align: left;
float:left;
margin-left:398px;
}

/mod edit/<code> tags added/tph

Jason Duncan
Offline
newbie
Last seen: 15 years 2 weeks ago
Joined: 2006-11-17
Posts: 5
Points: 0

Ahhh, it just occurred to me

Ahhh, it just occurred to me that you might be suggesting that I just use one 832px wide by 1 px high graphic as the background image for the entire content container.

The only reason I haven't done that already is because I was worried about the perfomance implications of loading such a wide image.

I'll take a look at trying this out since I'm out of other ideas for now.

Thanks,
Jason

Jason Duncan
Offline
newbie
Last seen: 15 years 2 weeks ago
Joined: 2006-11-17
Posts: 5
Points: 0

Single bg image for the row

Tyssen,

Just wanted to let you know that the single wide image suggestion you gave me is so much easier than dealing with all that nested div stuff. The performance seems fine and I don't notice any delays at all.

Thanks again for all of your help! I really, really appreciate it!

Final code now looks like:


content goes here.

#contentContainer
{
width:auto;
background: #003366;
width:842px;
margin-top: 0px;
text-align: left;
vertical-align: top;
float:left;
height:100%;
background: url(images/home/pBase_14x.gif) repeat-y left;
}

Take care,
Jason

/mod edit/<code> tags added/tph