Gossamer Forum
Home : Products : Gossamer Links : Discussions :

CSS question - wrapping boxes!!

Quote Reply
CSS question - wrapping boxes!!
Greetings...
Not sure if this is the right forum for it....
But.. I am trying to put a logo and a banner on top of home page (above all regardless of template stuff)
I do not want to use given CSS.
I created some seprate CSS.. but I want the logo to be in a fixed box (240px;); however, I want the banner side to be auto to fill the rest of the space left WITHOUT WRAPPING underneeth the logo box.. and with a FIXED 10px; margin between the two horizontal boxes...
here is the code... what I am doing wrong that the write box is not filling the rest of the space and the space between the boxes changes and the right box wraps under the left box...
I want Only the right box to change and stretch but not the space between the boxes or the left box...

thanks for help
Mark


Code:
#wrapper {
width: 100%;
background-color: #cfcfcf;
height: 100%;
overflow: none;
}
#wrapperHeader {
width: 100%;
height: 100%;
overflow: none;
}
#headerLeftBox {
background: #0f0;
float: left;
height: 100px;
border: blue 1px ridge;
width: 240px;
}
#headerRightBox {
background: #0f0;
/* width: 100% minus (width of headerLeftBox + 10px margin) */
float: left;
height: 100px;
border: blue 1px ridge;
position: absolute;
}

<body>
<div id="wrapper">
<div id="wrapperHeader">
<div id="headerLeftBox">HeaderLeftBox</div>
<div id="headerRightBox">HeaderRightBox</div>
</div>
</div>
Subject Author Views Date
Post CSS question - wrapping boxes!! Mark2 1220 May 27, 2008, 7:41 AM