CSS - Centering Problem

I have been learning css and have got my page together but i want my page to be centered and i just cant seem to get it to move.It is stuck close to the left and I have tried to mess around with it with no joy.Can anyone help me please.Here is the css I have used:-

DIV.wrap_page {
PADDING-RIGHT: 9px; PADDING-LEFT: 9px; BACKGROUND: #b4ad9b repeat-x; PADDING-BOTTOM: 8px; WIDTH: 772px; PADDING-TOP: 8px
}
DIV.wrap_page2 {
PADDING-RIGHT: 9px; PADDING-LEFT: 9px; BACKGROUND: #b4ad9b repeat-x; PADDING-BOTTOM: 8px; PADDING-TOP: 8px; POSITION: relative
}

Any help would be very appreciated many thanks,stevo!

Hi guys,

I've set the following CSS class:

Code:

.configureSystem{
   padding            : 3px;
   width              : 760px;
   height             : 90%;
   overflow           : auto;
}

In a hope to act much like the CODE tag on this forum - I basically want to have scrollable content without invoking the browsers scrollbars.

I've implemented is just with:

Code:

<span class="configureSystem">
  HTML Code Here
</span>

The problem is, I want to center this content, though I'm not sure how. I tried the old fashioned (and very bad) centered table with the <span> nested inside, however the scrollbar style function doesn't work then.

How can I modify that class to ensure it's centered horizontally on the page?

Thanks in advance.

I have a lblock, mblock and rblock div tags inside the content div tag. I am trying to center block tags so there will be 10px free space on each side of content div tag.

You can check it at:
http://www.refinethetaste.com/html/



PHP Code:
#content    { width:796px; margin: auto;}
#lblock    { width:198px; float:left; }
#mblock    { width:200px; float:left; margin-left:2px;}
#rblock    { width:375px; float:left; margin-left:1px;} 

howdy,

i've been workin on a site using some good CSS for the first time. i usually get fed up but it seems to be working pretty well this time.

i have one little problem

http://www.bnymusic.com/lairsite/


when i check it in firefox, safari and IE on mac there's a little offset between the text area and the main image....

any clue on what is happening and how to fix it?

also noticed that in IE on pc the hover over Home doesn't extend into the padded area....but it works sometimes...crazy

hopefully this ls small and i will continue to convert to CSS...sadly my photo area stumped me on the CSS and i used a table....oh well.

prethanks,
B

Hi friends,

I'm trying to center this page with CSS, but no idea where my code is wrong? in screen resolution 800 it looks fine but in 1024 and above it remains on left side of the page. Here is a page url http://gooo.ueuo.com/

and CSS code is given below.

Code:

 <style type="text/css">

#container{

margin-left: auto;
margin-right: auto;
}

#logo {
	position:absolute;
	left:-1px;
	top:-2px;
	width:200px;
	height:60px;
	background-color: #003399;
}

#description {
	position:absolute;
	left:19px;
	top:140px;
	width:760px;
	height:530px;
	z-index:1;
}

#Layer5 {
	position:absolute;
	left:243px;
	top:151px;
	width:395px;
	height:45px;
	z-index:4;
}

.style2 {
	font-family: Geneva, Arial, Helvetica, sans-serif;
	font-weight: bold;
	color: #990066;
	font-size: 18px;
}

#paragraph {
	position:absolute;
	left:243px;
	top:206px;
	width:397px;
	height:200px;
}

.style3 {font-family:Verdana, sans-serif;
         font-size: 11px;
         color:#000000;
         line-height: 18px;
         padding: 6px;
}

#system {
	position:absolute;
	left:29px;
	top:379px;
	width:200px;
	height:80px;
	z-index:5;
}

.style4 {
	font-family: Verdana, sans-serif;
	font-size: 12px;
}

.style5 {font-size: 10px;}

.style6 {font-size: 10px;}

#footer {position:absolute;
         left:0px;
		 top:680px;
		 width:799px;
		 height:175px;
		 background-color:#0D75D2;
}		  

.style7 {
	font-family: Verdana, sans-serif;
	font-size: 10px;
	list-style-type: none;
}

.style9 {
	font-family: Verdana, sans-serif;
	font-size: 11px;
}

.style10 {
	font-weight: bold;
	font-size: 14px;
	font-family: Verdana, sans-serif;
	color: #990066;
}
</style>

Currently my site, http://www.kasiaozga.com , works correctly in Firefox on mac and Windows and in ie for mac and Windows. However, in Safari, the mid section of the navigation bar on the main page (index.html) appears incorrectly on the page. I would really appreciate it if any Safari users could take a look at the page and recommend a solution to enable the page to display correctly.

Thanks!
-Kasia

I am trying to center the blocks into the middle of the page but all the traditional methods seem to be failing. I've tried centering the body, making a wrapper and aligning and many other methods but the page still clings to the left of the page. If anyone could give help it would be appreciated. It probably requires the most simple of solutions but, as a relatively new user of CSS, even these seem to be hard to discover...

CSS Code
Code:

    /* Usual Selectors */ 

   div.wrapper {
   margin-left: auto;
   margin-right: auto;
   height: 100%;
   text-align: center;
   }

    body { 

    font-family: Georgia, "Times New Roman", Times, serif;

    font-size: 14px; 

    color: #FFFFFF;

    background-color: #000000; 

    text-align: center;

    } 


    p { 

    width: 100%; 

    text-align: left;

    }

    h1 { 

    font-family: Georgia, "Times New Roman", Times, serif; 

    font-size: 18px; 

    font-weight: bold; 

    color: #FFFFFF; 

    } 

	
    h2 { 

    font-family: Georgia, "Times New Roman", Times, serif; 

    font-size: 16px;

    font-weight: bold; 

    color: #FFFFFF; 

    border-bottom: 1px solid #E0E0E0; 

    } 

    /************************* Identification *************************/ 


    #header {

    position: absolute;

    width: 950px;

    height: 46px;

    margin: 0;

    margin-top: 50px;

    padding: 0 0 50px 0px; /*top right bottom left*/

    text-align: left;

    }

    #footer {

    width: 950px;

    text-align: center;

    }

    #t_navigation { 

    position: absolute;

    z-index: 10; 

    width: 50%; 

    height: 50px; 

    margin: 0; 

    margin-top: 68px; 

    padding: 0 0 50px 250px; /*top right bottom left*/

    font-weight: normal; 

    text-align: left;

    } 

    #search_frame {

    position: absolute;

    z-index: 10; 

    margin: 0; 

    margin-top: 35px; 

    padding: 0 0 0 250px; /*top right bottom left*/

    width: 740px;

    text-align: left;

    }

#search_box {
background-color: #FFFFFF; 
height: 28px;
    text-align: left;
}

#search_box #s {
float: left;
padding: 0;
margin: 6px 0 0 6px;
border: 0;
background-color: #FFFFFF; 
font-color: #000000;
width: 70%;
    text-align: left;
}

#search_box #go {
float: right;
margin: 3px 4px 0 0;
font-color: #000000;
    text-align: left;
}

    #l_navigation { 

    position: absolute;

    z-index: 10; 

    width: 210px; 

    height: 600px; 

    margin: 0; 

    margin-top: 100px; 

    padding: 0 0 50px 0px; /*top right bottom left*/

    border-right: 1px solid #E0E0E0; 

    font-weight: normal; 

    text-align: left;

    } 

   
    #centerDoc { 

    position: absolute; 

    z-index: 15; 

    padding: 0 0 50px 250px; /*top right bottom left*/

    margin-top: 100px; 

    margin-right: 10%; 

    text-align: left;

    width: 740px;

    }

Thanks.

I'm working on my first website. Its a simple portfolio site. I have it mostly completed, but i would like to center all the content in the browser. I found several soulutions to this and I can not seem to get any of them to work. I think it might be stemming from my use of absolute posistioning, but idk, just a newbie here.

here is the html;

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Rot</title>
<link rel="stylesheet" type="text/css" href="style.css">

<style type="text/css">

</style>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" >

</head>

<body>
      
<div id="wrapper">

<div id="logo"><a  href="index.html"><img border="no" src="text/logo.png" alt="logo"></a></div>
<div id="rot"><a  href="index.html"><img border="no" src="text/rot.png" alt="rot"></a></div>

<a href="info.html" class="info" title="info"><span class="displace">info</span></a>
<div id="work"><a  href="index.html"><img border="no" src="text/worksolid.png" alt="work"></a></div>

<a href="projects/dreaming_again.html" class="thumb1" title="thumb1"><span class="displace">project1</span></a>
<a href="projects/futility.html" class="thumb2" title="thumb2"><span class="displace">project2</span></a>
<a href="projects/grid_dreams.html" class="thumb3" title="thumb3"><span class="displace">project3</span></a>
<a href="projects/transgress.html" class="thumb4" title="thumb4"><span class="displace">project4</span></a>
<a href="projects/curls.html" class="thumb5" title="thumb5"><span class="displace">project5</span></a>
<a href="projects/city_sleeps.html" class="thumb6" title="thumb6"><span class="displace">project6</span></a>
<a href="projects/inner_turmoil.html" class="thumb7" title="thumb7"><span class="displace">project7</span></a>
<a href="projects/transitions.html" class="thumb8" title="thumb8"><span class="displace">project8</span></a>
<a href="projects/detritus.html" class="thumb9" title="thumb9"><span class="displace">project9</span></a>
<a href="projects/emerald_city.html" class="thumb10" title="thumb10"><span class="displace">project10</span></a>

</div>

</body>
</html>

and here is the CSS

Code:

#wrapper {
	text-align: left;
	width:990px;
	margin:0px auto; /* Right and left margin widths set to "auto" */
	text-align:left; /* Counteract to IE5/Win Hack */
	padding:0px;
	border:1px dashed #333;
	background-color:#eee;
	}

a {
outline: none;
}

#logo{
	position:absolute;
	top:15px;
	left:645px;

}

#rot{
	position:absolute;
	top:30px;
	left:733px;

}

#work{
	position:absolute;
	top:375px;
	left:15px;

}



#info{
	position:absolute;
	top:285px;
	left:15px;

}

a.info {
	position: absolute;
	top:285px;
	left:15px;
	display: block;
	width: 75px;
	height: 75px;
	text-decoration: none;
	background: url("text/info.png");
	}
	
a.info:hover {
	background-position: 0 -75px;
	}

.displace {
	position: absolute;
	left: -5000px;
	}


a.work {
	position: absolute;
	top:375px;
	left:15px;
	display: block;
	width: 75px;
	height: 75px;
	text-decoration: none;
	background: url("text/work.png");
	}

a.work:hover {
	background-position: 0 -75px;
	}

.displace {
	position: absolute;
	left: -5000px;
	}
/*
*	thumb1+++++++++++++++++++++++++++++++++++
*/
a.thumb1 {
	position: absolute;
	top:105px;
	left:105px;
	display: block;
	width: 615px;
	height: 75px;
	text-decoration: none;
	background: url("images/thumbs/dreaming_again.jpg");
	}

a.thumb1:hover {
	background-position: 0 -75px;
	}
	
.displace {
	position: absolute;
	left: -5000px;
	}

/*
*	thumb2+++++++++++++++++++++++++++++++++++
*/
a.thumb2{
	position: absolute;
	top:195px;
	left:105px;
	display: block;
	width: 615px;
	height: 75px;
	text-decoration: none;
	background: url("images/thumbs/futility.jpg");
	}

a.thumb2:hover {
	background-position: 0 -75px;
	}
	
	
.displace {
	position: absolute;
	left: -5000px;
	}
      
/*
*	thumb3+++++++++++++++++++++++++++++++++++
*/
a.thumb3{
	position: absolute;
	top:285px;
	left:105px;
	display: block;
	width: 615px;
	height: 75px;
	text-decoration: none;
	background: url("images/thumbs/grid_dreams.jpg");
	}

a.thumb3:hover {
	background-position: 0 -75px;
	}
	
	
.displace {
	position: absolute;
	left: -5000px;
	}
	
/*
*	thumb4+++++++++++++++++++++++++++++++++++
*/
a.thumb4{
	position: absolute;
	top:375px;
	left:105px;
	display: block;
	width: 615px;
	height: 75px;
	text-decoration: none;
	background: url("images/thumbs/transgress.jpg");
	}

a.thumb4:hover {
	background-position: 0 -75px;
	}
	
	
.displace {
	position: absolute;
	left: -5000px;
	}
	
/*
*	thumb5+++++++++++++++++++++++++++++++++++
*/
a.thumb5{
	position: absolute;
	top:465px;
	left:105px;
	display: block;
	width: 615px;
	height: 75px;
	text-decoration: none;
	background: url("images/thumbs/curls.jpg");
	}

a.thumb5:hover {
	background-position: 0 -75px;
	}
	
	
.displace {
	position: absolute;
	left: -5000px;
	}
	
/*
*	thumb6+++++++++++++++++++++++++++++++++++
*/
a.thumb6{
	position: absolute;
	top:555px;
	left:105px;
	display: block;
	width: 615px;
	height: 75px;
	text-decoration: none;
	background: url("images/thumbs/city_sleeps.jpg");
	}

a.thumb6:hover {
	background-position: 0 -75px;
	}
	
	
.displace {
	position: absolute;
	left: -5000px;
	}
	
/*
*	thumb7+++++++++++++++++++++++++++++++++++
*/
a.thumb7{
	position: absolute;
	top:645px;
	left:105px;
	display: block;
	width: 615px;
	height: 75px;
	text-decoration: none;
	background: url("images/thumbs/inner_turmoil.jpg");
	}

a.thumb7:hover {
	background-position: 0 -75px;
	}
	
	
.displace {
	position: absolute;
	left: -5000px;
	}
	

/*
*	thumb8+++++++++++++++++++++++++++++++++++
*/
a.thumb8{
	position: absolute;
	top:735px;
	left:105px;
	display: block;
	width: 615px;
	height: 75px;
	text-decoration: none;
	background: url("images/thumbs/transitions.jpg");
	}

a.thumb8:hover {
	background-position: 0 -75px;
	}
	
	
.displace {
	position: absolute;
	left: -5000px;
	}
      
/*
*	thumb9+++++++++++++++++++++++++++++++++++
*/
a.thumb9{
	position: absolute;
	top:825px;
	left:105px;
	display: block;
	width: 615px;
	height: 75px;
	text-decoration: none;
	background: url("images/thumbs/detritus.jpg");
	}

a.thumb9:hover {
	background-position: 0 -75px;
	}
	
	
.displace {
	position: absolute;
	left: -5000px;
	}
      
/*
*	thumb10+++++++++++++++++++++++++++++++++++
*/
a.thumb10{
	position: absolute;
	top:915px;
	left:105px;
	display: block;
	width: 615px;
	height: 75px;
	text-decoration: none;
	background: url("images/thumbs/emerald_city.jpg");
	}

a.thumb10:hover {
	background-position: 0 -75px;
	}
	
	
.displace {
	position: absolute;
	left: -5000px;
	}
    

Hi,

I don't realy know where this post belongs, html or css, so i posted it in both topics. I leave it up to an op to decide and delete on of the two posts if necessary.

There seems to be a centering problem in IE5.0 on a Win98 pc on my site. When i checked my site at my girlfriends pc this problem arose. I must say that the machine is quite spoiled with spyware and other bad stuff, i don't know if that has anything to do with it. Can anyone confirm this problem and maybe offer a solution?

http://users.pandora.be/jef_patat/index.htm

I would also appreciate if forum visitors would leave a small note if the site works fine on their system. I would like to know on which systems it works fine and on which errors occur. On the site i mention which systems work fine, so if you have different settings, PLEASE, leave a reply. As yet, the only problem i know of is the one mentioned above.

Thanks for any help, de Jef

Hi,

I am wanting a site that is vertically and horizontally centered. I have achieved to vertically center in both FF and IE but now I am having horizontal centering problems which is usually the easy part. I have tried many different methods and I am not able to center it in FF but I am able to center in IE.

If someone could help me that would be great.

Here my page: jacenta.com/TESTING/

Here is the code:
Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<head>
<title>Welcome Canada - Immigration Services Inc.</title>
<style type="text/css">
body, html
{
height:100%;
}
body
{
background-color:#dddddd;
}
#outer
{
display:table; 
height:100%; 
#position:relative; 
overflow:visible;
}
#inner
{
#position:absolute;
_top:50%;
display:table-cell;
vertical-align: middle;
text-align:center;
}
#inner2
{
#position:relative;
#top:-50%;
}
#container
{
width:100%;
}
#box
{
background-color:#FFFFFF;
width:700px;
height:500px;
text-align:left;
}
</style>
</head>
<body>
  <div id="outer">
    <div id="inner">
      <div id="inner2">
        <div id="container">
          <div id="box">
           Text
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
</html>

Link: http://ajwells.org/mtmp/index.html

How do I get the menu there to center on the screen? Ive tried a number of things and nothings worked as of yet.

Or better yet, is there an easy way to make the menu on the left side going downward rather than left to right?

Either would be great.

thanks for the help.

I'm struggling to find the correct CSS to center a middle column between a left and right column. I need this functionality for a dynamic photo gallery (powered by JS). To put it simply, I need the shaded area to the left and right of an image to expand/contract dynamically based on whether or not the image in the middle is in landscape or portrait format. I've figured out how to hard code it based on orientation, but I need it to be dynamic instead since the JS I'm using isn't aware of the orientation of the image. Examples of what it looks like live are seen below:

Portrait Orientation

www. notcrappy .com/html/portrait/studio-portraits/index.shtml

Landscape Orientation

www. notcrappy .com/html/wedding/favorites/index.shtml

Here's is some simplified HTML that I'm currently using to present the images and with the left/right blue borders:

<div class="left-blank-middle-<PORTRAIT or LANDSCAPE>-right-blank-left-side">&nbsp;</div>

<div class="left-blank-middle-<PORTRAIT or LANDSCAPE>-right-blank-middle-position"><img src="images/01.jpg"/></div>

<div class="left-blank-middle-<PORTRAIT or LANDSCAPE>-right-blank-right-side">&nbsp;</div>

And here is the CSS I'm using to give them the correct spacing when the dimension is known.

.left-blank-middle-landscape-right-blank-left-side {
width: 179px;
background-color: #003366;
float: left;
height: 400px;
margin-right: 3px;
margin-bottom: 10px;
}

.left-blank-middle-landscape-right-blank-middle-position {
float: left;
height: 400px;
margin-bottom: 10px;
width: 600px;
}

.left-blank-middle-landscape-right-blank-right-side {
width: 179px;
background-color: #003366;
float: right;
height: 400px;
margin-left: 3px;
margin-bottom: 10px;
}


.left-blank-middle-portrait-right-blank-left-side {
width: 346px;
background-color: #003366;
float: left;
height: 400px;
margin-right: 3px;
margin-bottom: 10px;
}

.left-blank-middle-portrait-right-blank-middle-position {
float: left;
height: 400px;
margin-bottom: 10px;
width: 266px;
}

.left-blank-middle-portrait-right-blank-right-side {
width: 346px;
background-color: #003366;
float: right;
height: 400px;
margin-left: 3px;
margin-bottom: 10px;
}

Can anyone give me any pointers on what I need to do to make the CSS dynamic based on the orientation of the photos? Thanks so much for your help!

hi, just started with css and im having trouble centering 3 columns in a container.

Code:

<div id="container">
        <div id="content">
                <h1>Title Header</h1>
                <div id="top">
                    <div class="col">
                        <h2>Section Header</h2>
                        <p>Lorem ipsum est cu voluptatum efficiantur deterruisset, nec et solum lucilius argumentum, eum ei regione bonorum suavitate. Lorem nonummy suscipiantur sit cu, id eum soluta putant. Sale porro rationibus mei no. Vis ut primis virtute nostrud, sea an malis menandri definiebas, his agam ancillae delectus ei. Ei deleniti noluisse interesset quo, vis at quem scriptorem cotidieque. Sit an virtute gubergren expetendis, at ludus dolor accusam per.</p>
                    </div>
                    <div class="col">
                        <h2>Section Header</h2>
                        <p>Ferri docendi nec ut. Viris tamquam ad quo, nam admodum facilisis adolescens ut, usu meis iriure tractatos at. Ei duo eros qualisque elaboraret, paulo vivendo inciderint an duo, mea eius exerci constituam cu. Ne facer exerci appetere vis, id dicat malorum mel, an sed ferri ludus aliquyam. Ut omnis meliore praesent usu, te sit quas tempor moderatius, accusam voluptua eam at. Duo agam etiam facilisi eu, cum an aeque congue contentiones, id omnium persecuti sadipscing sit. Ne eum invidunt laboramus, eum error nostro ad.</p>
                    </div>
                    <div class="col">
                        <h2>Section Header</h2>
                        <p>Quem feugiat adipisci no sed, simul solet mandamus ut sea, no vocent corrumpit argumentum per. Cu iisque facilisi insolens est, posse nonummy adipisci vel ut. An has nibh natum dissentias, te lorem legere posidonium eam, te quodsi prompta euripidis sed. Ne noluisse petentium cum, sed utroque offendit recteque eu. Te cum petentium disputando, id duo oratio fuisset gloriatur, in sed timeam ponderum.</p>
                    </div>
                </div>
                <div class="clear"></div>
        </div>
        <div id="footer">
            <h3>Footer Header</h3>
        </div>
    </div>

css:
Code:

* {
    margin: 0;
    padding:0;
    border: 0;
}  

body {
    background-color: gray;
    text-align:center;
}

#container {
    width:  900px;
    background-color:white;
    margin: auto;
}

#content {
}

#top {
    margin: auto;
}

.col {
    margin: auto;
    width: 267px;
    float: left;
    text-align: left;
}

.clear {
    clear: both;
}

#footer {
    clear: both;
}

this obviously doesnt work. and has some serious issues. if not, coded wrong altogether.

im free to any suggestions as far as my div markups and what i should be doing to keep code efficient.

i also am wondering what the keyword 'auto' mean in css. ive searched all around and never found a good exp or example explaining what it is.

again, the css is pretty screwed. i added and deleted so much that i cant even remember what i did and getting a little frustrated in the process.

thanks in advance for the response.