...

View Full Version : moving to css layout ... having a problem..



kattie
05-29-2005, 01:15 PM
hi guy,
ok here goes. im doing my first website using all css layout. i am at the stage where i am just trying to layout the page (no content) using divs and css. its going ok.... float left here.... float right there. but now i having a problem! in my main content container i want a graphic (about 20 px wide) to run down along the right hand side. so as the content gets longer it will streach with it. this is easy to do with tables. just set the background image of the right most columns to whatever you want :) but with divs its different. ive created a div within my container and placed it to the right .. and even set its background.... but how to i make it match the length of the main container ?? do i do this with javascript ?

here my html and css....... so basically i want my div with id rightshadow to streach with main_container or rightmostbox

i hope this is clear....? im just trying to get a graphic running down the side of my page :( i guess im still thinking in table mode.... ? thanks to anyone who can help (: ,) Kat~


<div align="center" id="main_container">
<div align="left" id="leftmostbox">
</div>
<div align="left" id="rightshadow">
</div>
<div align="left" id="rightmostbox">
</div>
</div>




#leftmostbox {
float: left;
padding: 5px;
margin: 5px;
background: #666;
border: 1px solid RED;
/* ie5win fudge begins */
voice-family: "\"}\"";
voice-family:inherit;
width: 200px;
}
html>body #leftmostbox {
width: 200px;
/* ie5win fudge ends */
}


#rightmostbox {
float: right;
padding: 5px;
margin: 5px;
background: #666;
border: 1px solid RED;
width: 450px;
/* ie5win fudge begins */
voice-family: "\"}\"";
voice-family:inherit;
}
html>body #rightmostbox {
width: 520px;
/* ie5win fudge ends */
}


#rightshadow {
float: right;
background: GREY;
border: 1px solid BLACK;
width: 20px;
/* ie5win fudge begins */
voice-family: "\"}\"";
voice-family:inherit;
width: 20px;
}

grubesteak
05-29-2005, 04:56 PM
I think I know what you're needing. Do you have the site up somewhere we we can take a look at it?

Eric

namoNet
05-29-2005, 08:01 PM
So as your middle content is stretching downwards, you want a random graphic (in RIGHTMOSTBOX) to stretch with it at the same time?

Can you give a visual example?

kattie
05-31-2005, 09:29 AM
hey guys .... ive attached an image.... its a wireframe mockup of my main page. you'll see the long thin box(side graphic) on the right runs along side my main content. its background will be a small graphic that will tile all the way down.

ive coded all these boxes using divs. "main content" and "side graphic" are both divs floated inside a container div. i want "side graphic" to match whatever size "main content" is.

im thinking im terms of "main content" being the left column of a table and "side graphic" being the right column (i.e it would streach automatically). how do i emulate this effect ? or how would a pro do it ? thanks a bunch guys... kattie..



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum