CSS Dilema

[Palgie]

Hey guys,

Never needed to ask for help before but I've ran out of ideas with this one.

I'm in the process of making a web development site and ironicly, came into a problem with the CSS.

I have a main content area like every site does where all the content goes. And then a navigation to the right of the content box for things like search, or additional links that I might want to add.



Because I need the navigation to be 100% height, its caused me a lot of time trying to get it to work. I need to set the .body and the .cont_nav css classes both to 100% height for the navigation height to work as I would "correctly".

However when .body has a set width its causing overflow of the text. (seen below)



And im hoping there is a way to get both the content not overflowing and height set to 100% so that the navigation can work.

.body <--- White Area with curl 
{
background-color: white; 
color: #333333; 
background-image: url(images/curl.jpg); 
background-repeat:no-repeat; 
height: 100%; <---- Problem
}

#wrap 
{
width: 75%; 
float: left;
}

.content 
{
padding-top: 70px; 
width: 80%; 
margin-left: 80px;
padding-bottom: 60px;
}

.cont_nav  <--- Right navigation
{
float: left;
width: 200px; 
padding-left: 15px; 
padding-right: 15px; 
background-color: #c9c9c9; 
border-left: 1px solid #a3a3a3; 
border-right: 1px solid #a3a3a3; 
height: 100%; <--- Only works when body height is set to 100%
}

.cont_nav_inner 
{
padding-top: 15px;
}

<div class="body">
    <div id="wrap">
	<div class="content">
       <!-- MAIN CONTENT HERE -->
        </div>
    </div>
    <div class="cont_nav">
             <div class="cont_nav_inner">
              <img src="css/dropdown/themes/nvidia/images/ads.gif" alt="Sponsors" class="icon"/><h2 style="padding-bottom: 4px;">Sponsors</h2>
                <small>We are suppored by</small><br />
                <!-- Sponsored by images go here -->
                <hr />
            </div>
    </div>
</div>

I hope you can fully understand my situation, Im rubbish at explaining problems :P

[CrimsonShroud67]

I think I am understanding your problem. (I hope).

You don't really want the .body DIV to be 100% because this is forcing to flow down past your black and gray transparent bar at the bottom of the page.

However you cannot get the .cont_nav DIV to to size to 100% if the .body DIV is not at 100%.

Is that correct?

If so then keep in mind that the .body DIV does not have to be at 100%. It simply needs a size. When you set an element to a css height of 100% you are saying I want you to be 100% of your parents height. If that parent does not have a height set then it is technically 0 and you are getting 100% of 0

If you set .body to be 600px then .cont_nav will be 100% of 600px. You can absolutely set the height of .body to what ever you need and then set the .cont_nav to 100% to fill the full height of it's parent

[Palgie]

Hey Crimson,

Im glad you have managed to understand my problem :P

However you mentioned changing the .body to 600px for an e.g. however content will be inside the box and once the text inside reaches 600px in height, it causes the same situation as setting the height to 100%.

-Phil.

[Jaxo]

Your gray box on the bottom is using the float element if I am reading it correctly, correct?

Have you tried clear:both; on the box? Should create room for it to sit alone at the bottom with the body set at 100%...

In theory... or at least in my head it works, not sure about reality.

Hope that helps.

.cont_nav  <--- Right navigation
{
float: left;
clear: both;
width: 200px; 
padding-left: 15px; 
padding-right: 15px; 
background-color: #c9c9c9; 
border-left: 1px solid #a3a3a3; 
border-right: 1px solid #a3a3a3; 
height: 100%; <--- Only works when body height is set to 100%
}

Code bold above

[CrimsonShroud67]

Can I see the code for the whole page?

It sounds like what you are saying is that the text, if it is longer then the height you set, will push the .body beyond that height and back down into the gray bar.

If that is the case then you could try this...

It looks like you have 3 basic rows on the page a header gray bar, content, and a footer gray bar. You could set relative heights on all of them so that they fill the page like 10% 80% and 10%. Then set overflow:auto; to the content div (.body) to allow large content to scroll when it gets too large to fit.

Ex

<html>
<head>
<title></title>
<style>
body, html{height:100%; margin:0;}
.header { height:10%; background-color:#999;}
.content{ height:80%; overflow:auto;}
.footer { height:10%; background-color:#999;}
</style>
</head>
<body>
<div class="header"></div>
<div class="content"></div>
<div class="footer"></div>
</body>
</html>

This will make the page keep the basic layout no matter what res the user has or how big his window is. However since the sizes are relative the actual DIV heights will vary based ion the size of the window. If you need to you can also set min-height to any element you do not want to shrink below a certain height, like you header with the logo.