Hi all

 

Im haveing a slight problem geting this to work:

<div id="maincontainer1colnews">
 <h1>Latest News</h1>

 <div id="yellowbar"></div>
 <?php include("view_news_current_insert.php"); ?>

 <p> </p>
</div>

 

What happens is that may news is generated by php and #maincontainer1colnews is set to 100% height, yes works:

#maincontainer1colnews {
width: 900px;
padding: 0px 30px 0px 30px;
height:auto !important; /* real browsers */
height:100%; /* IE6: treaded as min-height*/
min-height:100%; /* real browsers */
background-color: #FFFFFF;
background-image: url(../images/swirls.gif);
background-repeat: repeat;
}

 

 

but I have a problem with the yellow verticle bar running to the left of it, it doesnt want to change height by %, it will however change if I use a certain amount of pixels as the height:

#yellowbar {
padding-top: 0px;
margin-right: 15px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
height:auto !important; /* real browsers */
height:95%; /* IE6: treaded as min-height*/
min-height:91%; /* real browsers */
width: 5px;
float: left;
background-color: #fcfdbf;
background-image: url(../images/menu/yellow_bar.gif);
background-repeat: repeat-y;
}

 

As I want the left #yellowbar to change automatically as the news information grows, a set a pixel height wouldnt work as I would have to manually change it each time,so I want it to auto adjust but cant get it to work?

 

Has any one come across this?

 

Hope it make sense.

 

Thanks Ben

There's no content inside the yellow bar, so it doesn't know what height it should be. If you say 95%, it thinks "95% of what?" and then it feels all insecure and hides. That's not a problem for #maincontainer1colnews, as it has content inside which gives it a bigger ego. % heights don't really translate to a % of screen height. As designers, we need to start boosting the confidence of divs by giving them content if we want them to stand tall amongst their peers.

I liked your reply bumfluff, funny and helpful

Thanks Bumfluff, I know what your saying, which I understand

 

The only work around I guess is add the verticle bar in the background image?

Thanks Bumfluff, I know what your saying, which I understand

 

The only work around I guess is add the verticle bar in the background image?

Add the vertical bar as a background image to the content div if that's how tall you want it to be - you can then move your content to the right if necessary by using #div {text-indent:30px;} or p {margin-left:30px;}

Add the vertical bar as a background image to the content div if that's how tall you want it to be - you can then move your content to the right if necessary by using #div {text-indent:30px;} or p {margin-left:30px;}

 

Thanks got it, but the verticle bar starts about 30px down from the top of the content div, will have to split into three sections, top blank, middle verticle bar, third blank, just thought there might have been an easier way any how... cheers all