PDA

View Full Version : css malarkey


davidj
05-07-2009, 01:19 PM
ok

Images below

as you can see in img1 i have a wrapper with 100% height

This works poifect



html, body {

height:100%;
background: #ffffff;
font-family:Arial, Helvetica, sans-serif;
color:#cccccc;
font-size:12px;
font-weight:bolder;

}

#wrapper{
width:1100px;
margin-left:auto;
margin-right:auto;
height:100%;
background-color:#663366;
}


now see img2

if i drop a div into the wrapper to act as a left nav panel and apply 100% on that im expecting it would fill the remainder of the wrapper, extending to the bottom of the screen. Whats actually happening is its starting from below the header which is great but then its sizing to the full dimensions of the screen causing it to break out of the wrapper. If i scroll down to the bottom of the menu panel then it fits in the browser perfectly which is 100% as set in the CSS


#left-panel{

float:left;
height:100%;
width:200px;
background-color:#BDB1D1;
margin:10px 0 0 0;
}


any help would be great

Corrosive
05-07-2009, 01:26 PM
ok

Images below

as you can see in img1 i have a wrapper with 100% height

This works poifect



html, body {

height:100%;
background: #ffffff;
font-family:Arial, Helvetica, sans-serif;
color:#cccccc;
font-size:12px;
font-weight:bolder;

}

#wrapper{
width:1100px;
margin-left:auto;
margin-right:auto;
height:100%;
background-color:#663366;
}


now see img2

if i drop a div into the wrapper to act as a left nav panel and apply 100% on that im expecting it would fill the remainder of the wrapper, extending to the bottom of the screen. Whats actually happening is its starting from below the header which is great but then its sizing to the full dimensions of the screen causing it to break out of the wrapper. If i scroll down to the bottom of the menu panel then it fits in the browser perfectly which is 100% as set in the CSS


#left-panel{

float:left;
height:100%;
width:200px;
background-color:#BDB1D1;
margin:10px 0 0 0;
}


any help would be great

Floating the sidebar is taking it out of the normal flow of the site. You need to add a clear fix div at the bottom to make the wrapper stretch all the way down.

davidj
05-07-2009, 01:35 PM
i have added the following...


</div> //<<<< wrapper end div

<!-- /layout -->

<div id="clear"></div>


and tried this..



<div id="clear"></div>

</div> //<<<< wrapper end div

<!-- /layout -->



using this...


#clear{

clear:both;

}


still nowt!

Corrosive
05-07-2009, 01:39 PM
i have added the following...


</div> //<<<< wrapper end div

<!-- /layout -->

<div id="clear"></div>


and tried this..



<div id="clear"></div>

</div> //<<<< wrapper end div

<!-- /layout -->



using this...


#clear{

clear:both;

}


still nowt!

The second one should be correct (before the wrapper ends). Try adding a height to your clear CSS (say 5px) and then setting the visibility to hidden. If that doesn't work we can TV later and I'll take a look.

davidj
05-07-2009, 01:47 PM
na still nowt

Corrosive
05-07-2009, 01:49 PM
na still nowt

Nuts. Is this work or home mate?

davidj
05-07-2009, 02:27 PM
anybody

deadline city?

Corrosive
05-07-2009, 03:11 PM
anybody

deadline city?

One more quick thing to try. Add height: 100%; to your body CSS.

davidj
05-07-2009, 03:22 PM
One more quick thing to try. Add height: 100%; to your body CSS.

html, body {

height:100%;
background: #ffffff;
font-family:Arial, Helvetica, sans-serif;
color:#cccccc;
font-size:12px;
font-weight:bolder;

}

this is done before

domedia
05-07-2009, 03:37 PM
adding a clear fix div is so... 2003...
<div id="container" style="height: 1%; overflow: hidden">
<div id="floatedElement">This was the charter, the charter of the land</div>
</div><!-- /#container -->

davidj
05-07-2009, 03:39 PM
are you saying the example above is shite so dont use it?

or

are you saying

"This is how you should do it"?

domedia
05-07-2009, 05:04 PM
Adding a clear div mens adding an empty div with no real purpose except for being a hook that you can apply CSS to.

My example in my post shows how you can make sure a box will clear it's floated elements without having to add additional markup to the page.

It's like.. magic..

davidj
05-07-2009, 06:55 PM
can someone mockup the following for me


body{ 100%

wrapper{ 100%

left-panel{ 100%


il do the rest

domedia
05-07-2009, 09:09 PM
Change your approach all together:
1. Put a wrapper around the main section and column
2. Add background to the that wrapper which consists of a 2 colored column.
This is the common approach to this afaik. Then add my code above to the wrapper to make sure it wraps around both main and column DIV.

<div style="background: url(twoColumnBg.gif) repeat-y; height: 1%;
overflow: hidden;">
<div id="column">Column</div>
<div id="main">Content Area</div>
</div>

edbr
05-08-2009, 12:34 AM
have you got this David or still need help?