|
CSS - Centering Content With Css
Hi,
I know this may be a basic question, but I'm apparently one of the last converts from tables to css and I've been searching how to center my site within the browser window. I've currently done all my layout using css and absolute positioning... it looks great, and it sure is easier than tables... but it's as if the site is aligned to run on the left of the browser rather than the preferred center. Should I use something other than "absolute" positioning (too bad if so, because I liked the ease)? Any advice? Thanks in advance for any help. Similar TutorialsHi: I am having trouble centering divs properly. The code I am using is below, but it seems redundant to me. I am sure there is a better way to do it. Code: <div class="clearfix">
<div style="float: left; width: 25%;">
<a href="the-family.html"><img src="images/stories/demo/mom_dad.png" width="162" height="110" style="border: 0;" /></a><br />
<h3 align=center>The Family</h3>
<a href="the-family.html">Read more...</a>
</div>
<div style="float: left; width: 25%;">
{arifancybox activeType="flickr" type="customtext" source="photoset" photosetId="72157624434792497" apikey="166cd0f079225ba7aa06e3ec838f6e62"}<img src="images/stories/galleries/tehran-gallery.png" width="220" height="110" alt="tehran-gallery" title="Click for a slideshow." />
<h3 align=center>The City of Tehran</h3>
<p align=center>View the Gallery</p>{/arifancybox}
</div>
<div style="float: left; width: 25%;">
{arifancybox activeType="flickr" type="customtext" source="photoset" photosetId="72157624564172740" apikey="166cd0f079225ba7aa06e3ec838f6e62"}<img src="images/stories/galleries/rasht-gallery.png" width="220" height="110" alt="rasht-gallery" title="Click for a slideshow." />
<h3 align=center>The City of Rasht</h3>
<p align=center>View the Gallery</p>{/arifancybox}
</div>
<div style="float: left; width: 25%;">
{arifancybox activeType="flickr" type="customtext" source="photoset" photosetId="72157624427151309" apikey="166cd0f079225ba7aa06e3ec838f6e62"}<img src="images/stories/galleries/gilan-gallery.png" width="220" height="110" alt="gilan-gallery" title="Click for a slideshow." />
<h3 align=center>Gilan Province</h3>
<p align=center>View the Gallery</p>{/arifancybox}
</div>
</div>
Basically, I have a div which encloses 4 other divs. These 4 divs are each defined as "width: 25%", thus combined they take up 100% of the enclosing div. What I want is to center the content of each of those 4 divs. The content is both text and image. Should be a rather simple thing to do, and thus eliminate my need to individually center each element within the small 25% wide div. Any help would be appreciated. Thanks. Hello, I recently constructed a web page that used z-index property's to stack some transparent PNG files on top of each other. This worked great for me, however there was one thing that bothered me. I couldn't properly center my content after the z-index property was used. I could only manually position the content using left and right x,y co-ordinates. Has anyone discovered a proper way for centering z-index content? -Ben Found lots of similar threads, but not exactly the same problem... Any ideas how I can get the main content to stay centered along with the background on my site: http://gumbald.co.uk It works fine in FF, but not in IE, so I'm guessing it's a CSS issue My CSS: Code: /*Default CSS file*/
/*Formats <html> tag*/
html {
height: 100%;
overflow: -moz-scrollbars-vertical;
background-color: #BBF;
}
* html #wrap {
height: 100%;
}
/*Formats links to set colors, actions*/
#wrap a:link {
color: #0054A6;
text-decoration: none;
}
#wrap a:visited {
color: #0054A6;
text-decoration: none;
}
#wrap a:hover {
color: #828282;
text-decoration: none;
}
#wrap a:active {
color: #000000;
text-decoration: none;
}
/*Formats <body> tag*/
body {
font: 65% 'trebuchet ms', arial, helvetica, sans-serif;
min-height: 100%;
width: 640px;
margin: auto;
padding: 0;
background-color: #FFFFFF;
border: 0px solid red;
}
/*Formats <h1> tag*/
h1 {
font: 300% 'trebuchet ms', Arial, Helvetica, sans-serif;
color: #00f;
padding-top: 0px;
margin: 0;
}
h2 {
font: 130% 'trebuchet ms', Arial, Helvetica, sans-serif;
padding-top: 6px;
}
/*Formats images, is class so can be reused on same page*/
.imgLeft {
float: left;
padding-right: 10px;
padding-bottom: 0px;
margin-top: 0px;
}
.imgRight {
float: right;
padding-left: 10px;
padding-bottom: 0px;
margin-top: 0px;
}
/*Wraps all Divs Up*/
#wrap {
position: relative;
min-height: 100%;
width: 640px;
margin: auto;
background: top left repeat-y;
}
/*Deals with head navigation bar*/
#headwrap {
}
#logo {
padding-left: 0px;
text-indent: 10px;
width: 100%;
height: 42px;
background: #BBF repeat center;
text-align: left;
}
#navbar {
text-indent: 10px;
padding-left: 0px;
width: 100%;
font: 110% 'trebuchet ms', Arial, Helvetica, sans-serif;
margin: auto;
height: 16px;
padding-top: 2px;
padding-right: 0px;
color: #000;
text-align: left;
background: #DCDCDC repeat-x;
border-bottom: 1px solid #ccc;
}
#navbar li {
display: inline;
padding-right: 10px;
margin: 0;
}
#navbar ul {
padding: 0;
margin: 0;
}
/*Deals with side navigation bar*/
#sidenavbar {
float: left;
width: 100px;
margin-top: 0px;
text-align: center;
background: #DCDCDC;
}
/*Deals with main page content*/
#mainwrap {
padding-bottom: 0px;
}
#mainwrap:after {
display: block;
clear: both;
}
#content {
position: relative;
margin-left: 6px;
margin-right: 6px;
padding: 0 10px;
text-align: justify;
}
/*Deals with the footer*/
#footwrap {
clear: both;
height: 68px;
}
#footer {
position: absolute;
bottom: 0;
height: 40px;
background: #0054A6 repeat center;
width: 100%;
color: #FFF;
text-align: center;
margin: 0 auto;
}
#footnavbar {
position: absolute;
bottom: 40px;
font: .95em 'trebuchet ms', Arial, Helvetica, sans-serif;
width: 100%;
height: 28px;
padding-top: 8px;
color: #000;
text-align: center;
background: #DCDCDC repeat-x;
border-top: 1px solid #ccc;
}
#footnavbar li {
display: inline;
padding-right: 10px;
margin: 0;
}
#footnavbar ul {
padding: 0;
margin: 0;
}
Seems to be a recurring theme today. I'm trying to skin osCommerce to match the site. If you go into the front page of the store you'll see the problem. All content is correctly centered in FF, but not in IE. I tried putting a "wrapper" div around all the content (starts immediately after body tag and ends immediately before endbody tag), and set its margins to 0 auto, but no luck. Code: #wrapper {
width: 760px;
margin: 0 auto;
}
Any ideas? 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;
}
the contents of a div have an undetermined size, it varies. I need to vertically center it as well as horizontally, which I can do the latter of. I can't use padding or margins because I don't know the size. How do I do this? Hi there, I have a content glider script, but I have added it to a wrapper with a background image. The css is using a white background colour so when a new layer is glided up, it covers the one underneath it. However, I want the background to be transparent to show the background image underneath.... If I remove the white background, they layers become transparent and overlay each other, so you can see all text in the layers on top of each other making it impossible to read. Is there anyway I can make it so it has a transparent background, but so it will not show the content under the new slide? This is my CSS: PHP Code: .glidecontentwrapper{ position: relative; /* Do not change this value */ height: 230px; /* Set height to be able to contain height of largest content shown*/ overflow: hidden; } /* Total wrapper width: 350px+5px+5px=360px Or width of wrapper div itself plus any left and right CSS border and padding Adjust related containers below according to comments */ .glidecontent{ /*style for each glide content DIV within wrapper.*/ position: absolute; /* Do not change this value */ background: white; visibility: hidden; width: 330px; } /* Total glidecontent width: 330px+10px+10px=350px Or width of wrapper div itself (not counting wrapper border/padding) */ .glidecontenttoggler{ /*style for DIV used to contain toggler links. */ width: 360px; margin-top: 6px; text-align: center; /*How to align pagination links: "left", "center", or "right" background: white; /*always declare an explicit background color for fade effect to properly render in IE*/ } Any help would be great! Thanks. Well I managed to find a partial solution by adding "clear" to the "statusDiv" like so: Code:
.statusDiv {
clear: both
background-image: url(../png/disclosure_triangles/blue_block.png);
height: 20px;
margin-bottom: 1px;
}
This kicks sibling divs onto their own line (which is what I wanted) but the spacing between divs is 2 pixels and I can't seem to find any combination of padding, margins etc to get the spacing down to one pixel. Does anyone know of a way to control the inter-div spacing when "clear" is defined? Thanks Ken --------------------------------------------------------------- Original post --------------------------------------------------------------- I'm trying to make a few divs to create the same basic functionality as an outline (with disclosure triangles etc...) and am having alignment problems. The first row renders perfectly but the text of subsequent rows overlaps the text of first row. Here's the html: Code: <div id="contentBlock" class="bodyText"> <div class='statusDiv'> <div class='disclosureCollapsed'></div> <div class="disclosureDivLabel">New</div> </div> <div class='statusDiv'> <div class='disclosureCollapsed'></div> <div class="disclosureDivLabel">Open</div> </div> </div> And here's the CSS: Code:
#contentBlock {
position: absolute;
top: 130px;
left: 200px;
height: 101%; /* Hack to force vertical scroll bars */
right: 280px;
min-width: 400px;
visibility: visible;
display: block;
}
.statusDiv {
clear: both
background-image: url(../png/disclosure_triangles/blue_block.png);
height: 20px;
margin-bottom: 1px;
}
.disclosureCollapsed {
background-image: url(../png/disclosure_triangles/blue_collapsed_wide.png);
display: block;
text-align: right;
/*position: absolute;*/
float: left;
top: 0px;
left: 0px;
width: 18px;
height: 20px;
}
.disclosureCollapsed:hover {
cursor: pointer;
}
How would I make the text in each subsequent row (statusDiv) line up? Thanks for any help Ken http://www.hybridillusions.com/wordpress/?m=200712 Still working on it, but something caught me and I'm clueless. See, I'm still learning Tableless CSS, and well... I'm not sure how to have it so that the content doesn't run over the footer like that. As it should be more like... http://www.hybridillusions.com/wordpress/ For CSS reference, here is where the css file is located: http://www.hybridillusions.com/wordpress/wp-content/themes/simplistic/style.css Thanks in advance! Hey guys, I'm having trouble centering div boxes on my page, wondering if anyone can help. I have tried using {margin: 0 auto;} which works fine, but when the scrollbar appears on the page it knocks it off balance and the other content on the page becomes mis-aligned. I have also tried setting left margins to push the div to the middle, but I figured this would cause problems and wouldn't look right to people using higher than 1024x768 resolutions. Is there any other way? Hi, I'm trying to design a web page and I want to center all the content (including the background), and have another background behind all of that. I can't figure out how to center everything. When I put a <div> around all the content and center it in CSS, only certain elements(some graphical buttons) get centered while all of the text stays lined up to the left. Any ideas? I'm sure I'm making a really silly mistake. http://www.stevemedleyphotography.com/tempo/index.html What I am trying to do is make it so that the blue background is as it is already but the orange box is the full width of the window despite what resolution or window size the user has, and also is centered on the screen. -------BLUE--------- -------BLUE--------- -------BLUE--------- -----ORANGE------- -----ORANGE------- -------BLUE--------- -------BLUE--------- -------BLUE--------- Like that. I will be having some stuff within the orange div. I don't really know much CSS at all and am kinda guessing my way through it... poorly... Thanks for any help. Hey everyone, I am fairly comfortable with HTML, and even know a decent amount of PHP and Javascript. But sometimes trying to do the simplest things in CSS makes my head spin! (this is one of those times). I've got a "scrolling" header at the top of a page (stays visible even when scrolling), and am trying to center a DIV (which contains opt-in forms) inside that header. It looks good when my browser window is maximized (at 1280x1024 resolution). But when I minimize the browser or check it in other screen resolutions, the "centering" of the opt-in forms are off. Here is the page... www.wordflood.com/Test/Scrolling_Header.html And here are the CSS includes... www.wordflood.com/Test/style.css www.wordflood.com/Test/IE6_style.css This was really just a quick hack from a "scrolling header" demo I found online, so I must have overlooked something. Any ideas? im trying to center this div but im not to sure on how to do it Code: <style type="text/css">
div.img
{
margin:2px;
border:1px solid #0000ff;
height:auto;
width:auto;
float:left;
text-align:center;
}
div.img img
{
display:inline;
margin:3px;
border:1px solid #ffffff;
}
div.img a:hover img
{
border:1px solid #0000ff;
}
div.desc
{
text-align:center;
font-weight:normal;
width:120px;
margin:2px;
}
</style>
</head>
<body>
<div class="img">
<a target="_blank" href="klematis_big.htm">
<img src="klematis_small.jpg" alt="Klematis" width="110" height="90" />
</a>
<div class="desc">Add a description of the image here</div>
</div>
<div class="img">
<a target="_blank" href="klematis2_big.htm">
<img src="klematis2_small.jpg" alt="Klematis" width="110" height="90" />
</a>
<div class="desc">Add a description of the image here</div>
</div>
<div class="img">
<a target="_blank" href="klematis3_big.htm">
<img src="klematis3_small.jpg" alt="Klematis" width="110" height="90" />
</a>
<div class="desc">Add a description of the image here</div>
</div>
<div class="img">
<a target="_blank" href="klematis4_big.htm">
<img src="klematis4_small.jpg" alt="Klematis" width="110" height="90" />
</a>
<div class="desc">Add a description of the image here</div>
</div>
Hi, This is my first css only layout and I am trying to centre the navigation. But it wont. Any suggestions? http://www.wnv2.com/v9.htm <<link here CSS File: Code: /* CSS Document */
body {
background-image:url(bg.jpg); background-repeat: repeat-x;
background-color:#65B240;
margin:0;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
}
/*---------- Divs ------------*/
#wrapper {
margin: 0px;
padding: 0px;
width: 600px;
}
#header {
margin: 0px;
padding: 0px;
width: 600px;
height: 85px;
background-image:url(top.jpg);
}
#navigation {
margin: auto;
padding-left: 30px;
padding-right: 30px;
padding-top: 0px;
padding-bottom: 0px;
width: 540px;
height: 25px;
text-align:center;
}
#navigation ul {
margin: 0px;
padding: 0px;
list-style-type: none;
background-color:#DDDDDD;
}
#navigation ul {
display: block;
float:left;
}
#navigation li, #navigation li a {
color:#59933E;
font-weight:bold;
letter-spacing:1px;
height: 25px;
display: block;
margin: 0 2 0 2;
float:left;
}
#navigation .left_nav {
width: 22px;
height: 25px;
display: block;
background-image:url(nav_left.jpg);
}
#navigation .right_nav {
width: 22px;
height: 25px;
display: block;
background-image:url(nav_right.jpg);
}
#middle{
background-image:url(middle.jpg);
background-repeat: repeat-y;
width:600px;
}
#navigation .spacer {
width: 5px;
height: 5px;
display: block;
background-image:url(nav_spacer.gif);
}
#contentswrapper {
margin: 0px;
padding: 5 55 5 55;
text-align: left;
width: 490px;
}
#bottom {
height:90px;
width:600px;
background-image:url(bottom.jpg);
}
HTML: View Cource Thanks This list is a navigation bar that displays tabs horizontally. I can't seem to figure out what properties I need to use to center it correctly. I have 2 problems: 1. How can I get these list items centered? 2. the second level seems to have problems displaying horizontally in IE. How can I fix it? Code: <div id="tablenavcontainer">
<div id="navcontainer">
<ul>
<li><a href="/doctors/enroll/" rel="self" class="" id="purple" name="patientenroll">Enroll Patient</a></li>
<li><a href="/doctors/patients/" rel="self" class="" id="current" name="doctorspatients">My Patients</a></li>
<li><a href="/doctors/lab/" rel="self" class="" id="green" name="doctorlab">Lab</a></li>
<li><a href="/doctors/pharmacy" rel="self" class="" id="yellow" name="doctorpharmacy">Pharmacy</a></li>
<li><a href="/doctors/tools/" rel="self" class="" id="red" name="doctortools">My Office Tools</a></li>
<li><a href="/doctors/home/" rel="self" class="" id="graphite" name="doctorhome">Home</a></li>
<ul>
<li><a href="/doctors/patients/currentchart.html" rel="self" id="currentchart" name="currentchart" >Current Chart</a></li>
<li><a href="/doctors/patients/labhistory.html" rel="self" id="labhistory" name="labhistory" >Lab History</a></li>
<li><a href="/doctors/patients/symptomhistory.html" rel="self" id="symptoms" name="symptoms" >Symptom History</a></li>
<li><a href="/doctors/patients/prescriptionhistory.html" rel="self" id="prescriptions" name="prescriptions" >Prescription History</a></li>
<li><a href="/doctors/patients/reports.html" rel="self" id="reports" name="reports" >Restore Reports</a></li>
<li><a href="/doctors/lab/ordertesting.html" rel="self" id="ordertest" name="ordertest" >Order Testing</a></li>
<li><a href="/doctors/pharmacy/prescribe.html" rel="self" id="orderrx" name="orderrx" >Prescribe</a></li>
<li><a href="/logout.html" rel="self" id="" name="" >Log Out</a></li>
</ul>
</ul>
<br style="clear: both;" />
</div>
</div>
Hey. I'm having issues with getting my page to center in IE7 using margin: auto; It works fine in firefox. The page is at http://jbench.co.uk:81/. The CSS is at http://jbench.co.uk:81/css/css.php . The section where i think the problem is: CSS Code: Original - CSS Code #page { width: 900px; margin: 0 auto; padding: 14px 3px; min-height: 250px; font-size: 1.2em; }
#page {
Any help's appreciated. |
|||||||