Sidebar & navbar heights

[Artisan]

Here's a thing I can't get to grips with in v8 - well, one of them, anyway

I'm using the Clean CSS theme to build a site, and I want to extend the blue background sidebar and navbar so that they always take up the full height of the page, it looks a bit odd where they stop below the menus. The site can be seen at http://act3.artinet.co.uk/

Any ideas, anyone?

Malcolm

[jont]

use something like

#sidebar {
position: absolute;
top: 100px;
min-height: 600px; /*new line added here */
left: 0px;
margin: 0px;
padding: 10px;
border-top: solid 3px #0080ff;
background: #051dba;
width: 200px;
voice-family: "\"}\"";
voice-family:inherit;
width: 180px;
}

for the left hand bar ...

the right hand column is coming from #navbar

[jont]

That will add a minimum height. If you want this to expand for the full height of the page (shrink and fit) you will need to incorporate another <div> in the HTML and set it to clear and set the previous height to 100%

HTH

[dscontroller]

I have this working at stringer-family.co.uk in a site I have built in Dreamweaver and registered with Actinic.

I have used css for the build and used information from http://www.positioniseverything.net/...onetruelayout/

It renders to whatever the content is in the divs and keeps it all tidy.

The easy way to use this layout is to have a 'wrapper' div which includes the whole site.

A 'header' div which includes the logo, nav bar and any other divs, floating all of them 'left'
This is followed by a 'content' div.

This should include any columns and in my three columns the first two are floated to the left and the right hand to the 'right'.

All the columns are given heights in padding to the bottom of 3000px and a -3000 margin at the bottom.

Outside the content div but inside the wrapper div, you need to put a footer div - floated to the left - full width of the page. This holds it all together.

Your css file should then include floating the content div to the left and in the positioning category show 'overflow' hidden.

Hope I've remembers this OK.

If you get stuck send me an email and I'll forward the css file.

David

[jont]

David - you need to be wary of using "hidden" for any CSS, even if for hiding blank space as depending on the quality of the search engine it may think you are trying to deceive it by hiding data from view.

Don't think you need to float "right" your 3rd content column as it should fall into place alongside the other 2 floated div's? Guess it depends on the actual structure of the XHTML / CSS used but does sound wrong.

[dscontroller]

Hi Jont,

You're right about the floating right. I had a problem originally floating it left, so decided to try it right. It worked so I left it. Have now floated it left again!

Not sure about the hidden, but I'll bow to your superior knowledge on the subject

Regards,
David

[Artisan]

Thanks for the suggestions jont and dscontroller, however, I've started again with the design and created tables in Dreamweaver so that the the sidebars always extend to 100% of page height.

The reason I backtracked is because I've never used CSS to create pages and, in addition to having to get used to v8 and Dreamweaver (I've always used Adobe GoLive), I simply haven't got time at the moment to learn CSS as well

Thanks anyway.

Malcolm

[pinbrook]

its not pretty trying to learn V8 and CSS at the same time