Forum Moderators: open
div.bottom-orange{
position:absolute;
left:173px;
top:650px;
width:577px;
height:6px;
background:#fd7f2b;
}
div.bottom-black{
position:absolute;
left:173px;
top:656px;
width:577px;
height:12px;
color:#fff;
background:#000;
padding:1 0 3 0px;
font-size:10px;
text-align:center;
}
The above works great with a fixed vertical height design. But, we have sections where the fixed vertical heights do not work, the main content div grows vertically based on the amount of content.
I need to fix the above two <div>s at the bottom of the screen. I've done some initial experimentation and can't get them to stay fixed at the bottom and 100% in width. Also, the orange <div> that sits right above the black div does not hold its height of 6px.
Those two <div>s provide closure for the design. They fill the window from left to right with a thin orange strip (6px) and then a taller black strip (12px) which contains navigation links.
How can I get them to stay at the bottom of the pages and create what looks like a tiling background? I need to have a "0" margin at the bottom so the black meets the bottom of the screen.
So, before I ramble on (as this is virtually impossble to do anyway) I'll ask a question and give a little optimizaion advice:
Q. Are the divs for content above this nav element absolute or relative or floated....? - How is the content positioned.
Optimization: Presuming I understand you correctly you're gonna slap yourself for this ;) That orang bar above the black holds no text right? ---- Drop the div entirely and add this to the black div rules:
border-top: 6px solid #fd7f2b;
hehe ;)
Nick
A. Absolutely positioned from the top and left. There is no height specified for the main content div. There is a fixed width of 574 pixels.
Hehehe (back at ya), didn't even think of this one...
border-top: 6px solid #fd7f2b;
If you don't know the height of this div you can either search around for some exotic JS/CSS solution (I wouldn't know how..) or...
Put the nav inside the div and adjust it's margins acordingly. Something like:
margin: 4em 0 0 0;
might fit the bill. You'll need to place the div after your content of course.
If your div was part of the normal html flow, or even adjusted in the flow by using a float then you can work with it. But, taking it out of the normal html flow with absolute positioning means that you have no (easy) way to tell where the bottom is.
I generally settle for putting my footers inside the main content div if absolutely positioned, saves a lot of heartache...
Nick
Or just add a table around your current work:
1 col 2 rows with bottom row valigned to bottom.
I don't know about your required headers footers, but going on whats been said in this thread already...and that it is virtually impossible for CSS to understand the page height.
This solution will give you your black and orange border at the bottom, but it will be black footer that will grow if the page content is too short...
Make your page background black, with margin: 0 padding:0
you can insert a header (if required) with it's background properties..also margin: 0, but with padding to suit
then use a main content div margin: 0, padding to suit and give this div the 6px orange border at the bottom...
then you will be left with a plain black footer area to put your navigation..no matter how much content you have
Suzy
[edit] just noticed your absolutely positioned content div before this...you could change the content div in the above to a container div and then position the content div relative to this..[/edit]
