I am new to HTML/CSS and working through different things using it.

1. I would like my layer to be in the center of a web page, with 200 pixels at either side of the layer. If the user alters the size of the browser, I would like it to stay centered to the same ratio as 200px to the 100% browser.

I also want the layer to go all the way to the bottom of the page (height:572px; within my code but I couldnt think of a better way) but I dont know how to make this automatic? So that the layer always goes to the bottom of the page no matter what size of window is open?

Apologies if that doesnt make much sense. Any help is much appreciated. See below for the coding that I am using, some of which isnt essential but Ive been trying everything to make it work :rolleyes:.


#layer1 {
position: absolute;
left: 200px;
right: 200px;
margin-left: auto;
margin-right; auto;
top: 0px;
bottom: 0px;
z-index: 1;
background-color: #ed1c24;
border: 10px solid #ed1c24;
height: 572px;
}

Thanks

Leave this off entirely: height: 572px;

You've already specified that it go all the way to the bottom of the page: bottom: 0px; It actually works quite well in Firefox, but I don't know why you have a border the same color as the background?

Something like this?

#layer1 {
margin:0 200px;
background-color: #ed1c24;
border: 10px solid #ed1c24;
height: 572px;
}

Go Here (http://nopeople.com/CSS/full-height-layout/index.html) and/or here (http://www.positioniseverything.net/thr.col.stretch.html) for an examples of full height layout.

Leave this off entirely: height: 572px;

You've already specified that it go all the way to the bottom of the page: bottom: 0px; It actually works quite well in Firefox, but I don't know why you have a border the same color as the background?

Thanks for that.

I am testing it in IE8 and without the height:572px coding, the footer comes up and covers some of the text.
On Firefox its fine with or without the height:572px coding.

Is there any way to avoid this using IE8?


On IE8 it doesnt appear to be centered either.
On Firefox it does appear to me centered.

Where am I going wrong? I would prefer it to be fine in both and not just Firefox?

Sorry the border being the same colour is one of those "non essential things" :D

Do you have a proper doctype statement on the page? Very important for IE.

Do you have a proper doctype statement on the page? Very important for IE.

I actually dont which is where I am going wrong. I am just fiddling around with html at the moment and I that is an oversight on my part.

Which DOCTYPE would be the best to use?

Apologies for the very basic questions!

If you don't want/have to use absolute positioning, then the following should do it:

*{margin:0;padding:0}
html,body{height:100%}
div{height:auto !important;
margin:0 200px;
height:100%;
min-height:100%;
}

which adapts (slightly) the sticky footer code here (http://ryanfait.com/sticky-footer/).

I actually dont which is where I am going wrong. I am just fiddling around with html at the moment and I that is an oversight on my part.

Which DOCTYPE would be the best to use?

Apologies for the very basic questions!Not being able to see your page maybe try an HTML4.01 transitional. You can always change it. Your problems may disappear entirely with it added.

Thanks for that, all is working now.

Just need to get this roll over thing working (another thread), trying to follow a tutorial but I am struggline :(