How to centre a column in the middle on both firefox and IE?.......using CSS

lose the absolute positioning, and be sure you have a doctype

bi the way, thanks the for the last post.

You were right about the background image.

But this time i am using absaloute position to put the coloum on the top rim of the browser.

her is the full css.

***********************************************
body {
background-image:
url('backgroundimage.gif');
background-repeat: repeat-x;
font-family:arial,helvetica,sans-serif;
}

#wrapper {
margin: 0px auto;
padding: 0px;
width: 1000px;
background-color: #4A4A4A;
border: 1px solid;
position: absolute;
top: 0px;
left: 0px;
right: 0px;
height: 100%;
}

Please read the stickies regarding posting code and how to format it for display, thanks.

Make note of wolfcry's mention of Doctype and loosing the absolute positioning, and you'll also need to bone up on how to use height 100%.

Hugo.

First time on hearing Doctype.

so i will read on it.

tanks guys.

so i will read on it.

tanks guys.

I'm sorry, did you miss the massive capital text at the top of the forum that says "DOCTYPES ARE IMPORTANT PLEASE USE THEM"

And you don't need AP to position your content at the top of the viewport, you just need to remove the default padding from the HTML/body elements.

As mentioned above, Internet Explorer needs to have a DOCTYPE declaration in order to properly position elements. Why? I have no clue, but IE is funny like that.

However, looking at your code, you mentioned you wanted the center your wrapper. Try the following and see if it works for you.

#wrapper { width: 1000px; background-color: #4A4A4A; border: 1px solid white; /* Don't rely on browser's default colors. */ margin-left: auto; margin-right: auto; padding: 0; /* No size needed. Just "0" works since it's void. */ }

I use IE 6.0 and Firefox 1.0.7 , does it work with these.

yes, that doctype will work, but why use a transitional doctype for new developement? Try one of these instead:

or

So far i tried and tried, and my head is hearting. i have stoped using absolute.

If any body can create code that can:

*put a wrap in the middel.
*also sticks on to the top rim of the browser.
*and the other end of the wrap sticks on the floor of the browser.

please give me an idea on how to do it or the code, it would be helpful

Do a quick mock up with annotations on in photoshop with pretty color boxes of what you want it to look like, then we can point you in the right direction.

i want something thing like this. no spacing between the top and bottom.

Ok

That's easy to do. But yuor site won't look like that though, will it?

It looks like a fixed width centered deign, right?

Does it have just the one column?

Or two or three?

Does it have a header or footer?

Maybe some dimensions. Don't be afraid to mock up exactly what you want in photoshop to precise dimensions (height and width) and attach the gif to a post. Oddly, the more precise you can be, the quicker I can help.

Wold you want some sort of border, or maybe a drop shadow? To the sides, or all the way round?

I WILL BE BACK IN SEVEN HOURS (GOT TO SLEEP).

Trevor

webster Treva will knock you up something useful I'm sure but please understand that the forum is not a coding service we expect people to be doing their own work with which we are happy to lend guidance and help with.

Meanwhile whilst waiting for treva the basics of what you require rely on controlling your padding and margins, remove them from the body,html elements and remove the top and bottom elements from the main div. getting that to streatch from top to bottom is harder and you need to read up/search on CSS height 100% for guides on how to use height with CSS

Hugo.

Tank you both.

I know this is just a forum not a coding service. Just need a point on the right direction. to tell you the truth i have learnt a lot so far. Espasially absolute positioning. In a way, the first steps are the hardest. But i never new the coding would become such a headache. STill, CSS better then doing everything in html.

Hi Trev, just simple.

just need guidance on the direction.

Thanks again Trev.

OK

Try this (the code is as it is for as good as x-browser support as it can be):

1 Column Fixed Width Full Height Template

/*** Keep each style module in order, as some later ones may overwrite earlier ones, once you are happy with it all, you can merge them! ***/
/*** Start style needed for general page ***/
/*** General style sheet for all templates ***/
html,body,p,div,img,h1,h2,h3,h4,li,ul,ol,dl,dd,dt,form,table,td,tr{
margin:0px;
padding:0px;
border:0px;
border-collapse:separate;
border-spacing:0px;
}
body{
font-family: verdana, arial, helvetica, sans-serif;
font-size:100.1%; /*** Don't change this setting. Make all other
font-sizes in % (preferred) or ems ***/
color:#000000;
background:#FFFFFF url(gradient-bg.gif) 0 0 repeat-x; /*** Background colour of page ***/
min-width:770px; /*** Content Width ***/
}
input,select{
margin:0px;
padding:0px;
}
strong,b{
font-weight:bold;
}
p{
font-size:90%;
line-height:1.1em;
}
/*** floatcontainer code not needed for 1 column designs ***/
.floatcontainer:after{content:".";display:block;height:0px;clear:both;visibility:hidden;font-size:0px}
.floatcontainer{display: inline-block;}
/* Hides from IE Mac \*/
* html .floatcontainer {height:1%}
.floatcontainer{display:block}
/* End Hack */
/*** end of floatcontainer code ***/
#fullheightcontainer{
position:relative;
display:table;
margin-bottom:-50px; /*** NEGATIVE TOTAL Height of Footer Rows ***/
background-color:#4A4A4A; /*** Background colour center column ***/
}
#wrapper{
position:relative; /*** needed for IE ***/
}
#clearheadercenter{
height:90px; /*** TOTAL Height of Header Rows ***/
overflow:hidden;
}
#clearfootercenter{
height:50px; /*** TOTAL Height of Footer Rows ***/
overflow:hidden;
}
#footer{
z-index:1;
position:relative;
width:100%;
height:0px;
}
#subfooter1{
margin:0px;
background:#898989;
text-align:center;
height:50px;
overflow:hidden;
}
#header{
z-index:1;
position:absolute;
top:0px;
left:0px;
width:100%;
height:0px;
}
#header-inner{height:0px}
#subheader1{
margin:0px;
background:#898989;
text-align:center;
height:90px;
overflow:hidden;
}
#container-center{}
/*** end style needed for general page ***/
/*** Start style needed for general full height effect ***/
html,body,#fullheightcontainer{height:100%}
#centerfill{display:none}
/*** end style needed for general full height effect ***/
/*** Start style needed for fixing width of page ***/
body{
text-align:center;
}
#fullheightcontainer{
margin-left:auto;
margin-right:auto;
text-align:left;
width:770px; /*** Content Width ***/
}
#footer-inner{
width:770px; /*** Content Width ***/
margin-left:auto;
margin-right:auto;
height:0px;
}
#header-inner{
width:770px; /*** Content Width ***/
margin-left:auto;
margin-right:auto;
}
/*** end style needed for fixing width of page ***/
/*** Start style needed for full height effect for a single column page ***/
#wrapper{height:100%}
/*** end style needed for full height effect for a single column page ***/

#fullheightcontainer{height:auto;min-height:100%}
#centerfill{
display:block;
position:absolute;
top:0px;
width:770px;
height:100%;
background:#4A4A4A;
}

Enjoy (it took me ten minutes to do this, btw).

Trevor

Thanks Trev, this is exactly what I needed to know.