Learn VBA & Macros in 1 Week!

HTML - Centering Pages

Full Excel VBA Course - Beginner to Expert

Centering Pages	View Content

I am having difficulty centering pages for Firefox and Chrome. Please view the source code of http://www.alicm.com. It centers fine in all versions of IE. Definitely need a little help. I am not very experienced, so any "before and after" pasting of coding would be very much appreciated. Thanks in advance.

Full Excel VBA Course - Beginner to Expert

Loading Pages In Pages?

Similar Tutorials

View Content

This will be hard for me to explain so I will add an image:

http://img75.imageshack.us/my.php?image=examplexu6.gif

How do I go about loading a page within a page. For example, in the pic, if you clicked Cost it would load a page within the loading area without taking off to another location.

I seen it on a site before, i remember the links were something like "/?p=cost" or something like that. And the page appeared to not navigate elsewhere, the cost page was just loaded within the page i was on.

hope that makes sense, if so any examples on this? is it hard to do? messy? safe with most browsers? thanks

Centering A Div Within A Div...

Similar Tutorials

View Content

so what is the easiest and best way to center a div within a div? or a div within anything else for that matter.

How do you center vertically?

and

How do you venter horizontally?

Help With Centering

Similar Tutorials

View Content

I have a website and I used css to make my Div tags set to absolute. The only problem is that when you open it in a browser, the browser won't open big enough and wil block out some of my content (forcing me to scroll to the left or maximize the borswer to see the whole page) . How do i make the divs always appear in the center of the page always. Also how do i make it so when you change the siz of the browser my divs will change with it to remain in the center. I tried doing the margin auto trick but it still doesn't work. Here is my stle sheet code and the web page html code... any help would be appreciated.
/* CSS Document */

#wrapper {margin-right: auto;
margin-left: auto;
margin-top: 20px;
margin-bottom: 0;;}

body {
margin : 0px 0px 0px 0px;
background-color: #E1AE5A;
background-repeat: repeat;
}
#top {
position: absolute;
height: 48px;
width: 900px;
left: 250px;
top:3px;
border:0px none;
z-index:1;
color: #000033;
}

#main {
position: absolute;
top: 542px;
left: 328px;
z-index:5;
width: 745px;
color: #FFFFFF;
height: 28px;
}

#flash {
position: absolute;
top: 130px;
left: 299px;
z-index:4;
width: 803px;
color: #FFFFFF;
height: 419px;
}

.style1 {

font-family: Eurostile;
color: #FFFFFF;
}

.style2 {
font-family: Helvetica;
}
#Layer1 {
position:absolute;
left:300px;
top:121px;
width:804px;
height:540px;
z-index:3;
background-color: #000033;
border: medium solid #FFFFFF;
}

.style3 {
font-family: Eurostile;
}

#Layer2 {
position:absolute;
left:111px;
top:170px;
width:71px;
height:124px;
z-index:4;
}

.style4 {color: #000000}

#Layer3 {
position:absolute;
left:482px;
top:72px;
width:37px;
height:56px;
z-index:2;
}
#Layer4 {
position:absolute;
left:652px;
top:72px;
width:24px;
height:31px;
z-index:2;
}
#Layer5 {
position:absolute;
left:822px;
top:72px;
width:84px;
height:58px;
z-index:2;
}
#Layer6 {
position:absolute;
left:992px;
top:72px;
width:95px;
height:50px;
z-index:2;
}

#Layer7 {
position:absolute;
left:331px;
top:139px;
width:750px;
height:446px;
z-index:9;
}

#Layer11 {
position:absolute;
left:319px;
top:72px;
width:12px;
height:10px;
z-index: 2;
}

#Layer8 {
position:absolute;
left:302px;
top:98px;
width:791px;
height:48px;
z-index:10;
}
#Layer9 {
position:absolute;
left:299px;
top:40px;
width:32px;
height:20px;
z-index:0;
}
#Layer10 {
position:absolute;
left:1016px;
top:595px;
width:24px;
height:26px;
z-index:10;
}

and the html

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

</head>
<body>
<div id="top">
<h1 align="center" class="style3 style4">on The side, Inc. </h1>
<p align="center" class="style3"> </p>
</div>

<div class="style2 style3" id="main">on The side is a value added promotional marketing organization focused on working with companies to make them more market-facing. We take time to learn about our clients' business model, industry and previous marketing agendas before taking a next step OR leap - if necessary.</div>
<div id="Layer1"></div>
<div id="flash" align="center">
<object classid="clsid27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="425" height="400">
<param name="movie" value="main.swf">
<param name="quality" value="high">
<embed src="main.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="425" height="400"></embed>
</object>
</div>
<div id="Layer3"><a href="who.html"><img src="who.jpg" width="100" height="70" border="0"></a></div>
<div id="Layer4"><a href="what.html"><img src="what.jpg" width="100" height="70" border="0"></a></div>

<div id="Layer5"><a href="ideas.html"><img src="ideas.jpg" width="100" height="70" border="0"></a></div>
<div id="Layer6"><a href="why.html"><img src="why.jpg" width="100" height="70" border="0"></a></div>
</body>
</html>

Centering Nav

Similar Tutorials

View Content

how can i center the nav on this page?

http://fantasyfootball.pzproductions.com/testing

Centering Graphic

Similar Tutorials

View Content

I'm attempting to center the logo / table located at the top of the page. I tried several various forms of alignment commands, all with no success. Any help is appreciated.

Site: http://blog.camhabib.com

I Need Help Centering My Website.

Similar Tutorials

View Content

Here is the code i have for the only(and first) page of the website.

HTML Code:

<!DOCTYPE html>
<html>
<body background="piginsun.png">
<div id="container" style="width:1903px">
<div align="center">

<div id="header" style="position:relative;width:100%;margin-top:0px;margin-bottom:0px;text-align:center">
<h1 style="margin-bottom:0;">
</div>

<div style="width:340px;text-align:left;align:center;">
	<a href="http://www.w3schools.com"><img width="868" height="90" src="mcad.png" alt="html.html" style="border:0;margin-top:0px;"></a>


<div id="menu" style="height:315px;width:120px;float:left;">
<b><a target="_top" href="html.html">Home</a></br></br>
<b><a target="_top" href="html_forums.asp">Server Forums</a></br></br>
<b><a target="_top" href="html_updates.asp">Server Updates</a></br></br>
<b><a target="_top" href="html_videos.asp">Server Videos</a></br></br>
<b><a target="_top" href="html_staff.asp">Server Staff</a></br></br><b><a target="_top" href="html_pics.asp">Server Pictures</a></br></br>
<b><a target="_top" href="html_donate.asp">Donations</a></br><b></br><a target="_top" href="html_contact.asp">Contact Us</a>


</div>

<div id="content" style="height:940px;width:1200px;text-align:center;">
<font size=40px;font color="#7373FF">Random</font><font size=40px;font color="#CB59E8">Craft</font></br>
<i>A Minecraft Server</i>
</br>

<div id="content" style="height:598px;width:1200px;text-align:center;">

</br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br>




<div id="footer" style="clear:both;text-align:center;">
Copyright &#xae;RandomCraft Server</div>

</div>

</body>
</html>

I need some help centering the whole thing. It looks good now but is off to the side, i need it centered. If someone could show me how to do that, that would be awesome. Thanks

Help Centering My Footer?

Similar Tutorials

View Content

Hello all,

I'm hoping someone can help me with what should be a super simple thing, but I'm not sure if I've just been staring at this code too long or what. Basically all I am trying to do is center my footer on the page, but it seems glued to the left side. I've tried putting in <div align="center" within my HTML, and auto values for my margins in CSS, but neither seem to do the trick. Can anyone help me out? Related markup is below:

<div id="footer" align="center">
<div class="container">
<div class="leftFooter">
<ul class="footerNavMain top">
<li class="first"><a href=" ">Products</a></li>
<li> | </li>
<li><a href=" ">FAQ</a></li>
<li> | </li>
<li class="last"><a href=" ">Where To Find Us</a></li>
</ul>

<ul class="footerNavMain bottom">
<li class="first">Phone Number</li>
<li> | </li>
<li class="last"><a href=" ">Email Link</a></li>
</ul>

<div class="copyright">
<sup>©</sup>
2011 Copyright™, All Rights Reserved.
</div>

</div>

</div>
</div>

CSS

#footer {
background: url("/Assets/footer2.jpg") no-repeat scroll 0 0;
display: block;
float: left;
height: 75px;
width: 900px;
margin-left: auto;
margin-right: auto;
}

#footer .container {
height: 75px;
margin-left: auto;
margin-right: auto;
padding-right: 45px;
padding-top: 3px;
width: 900px;
}

#footer .leftFooter {
background: none repeat scroll 0 0;
color: #FFFFFF;
display: block;
float: left;
height: 100%;
margin-left: 5 px;
overflow: hidden;
position: relative;
width: 900px;
}

#footer .rightFooter {
background: none repeat scroll 0 0 #4E4E4E;
color: #FFFFFF;
display: block;
float: right;
height: 100%;
margin-left: 15 px;
position: relative;
width: 355px;
}

#footer .copyright {
display: block;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #000000;
height: 15px;
left: 0;
line-height: 13px;
position: absolute;
text-align: center;
top: 50px;
width: 900px;
z-index: 1;
font-weight: 700;
}
#footer a:link{
color: #FFFFFF;
text-decoration: none;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
}

#footer a:visited {
color: #FFFFFF;
text-decoration: none;
font-size: 11px;
}

#footer a:hover{
color: #000000;
text-decoration: underline;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
}

#footer ul.footerNavMain {
display: block;
float: left;
margin-top: 5px;
width: 900px;
font-size: 11px;
font-family: Verdana, Arial, Helvetica, sans-serif;
}

#footer ul.footerNavMain.top {
margin-left: 185px;
width: 900px;
}

#footer ul.footerNavMain.bottom {
margin-left: 145px;
width: 900px;
color: #000000;
}

#footer .footernavMain li {
display: block;
float: left;
padding-left: 4px;
padding-right: 4px;
}

#footernav li a:link {
color: #FFFFFF;
text-decoration: none;
font-size: 11px;
}

#footernav li a:visited {
color: #FFFFFF;
text-decoration: none;
font-size: 11px;
}

#footernav li a:active {
color: #000000;
text-decoration: underline;
font-size: 11px;
}

#header nav li.last, #footerNavMain li.last {
padding right: 0;
}

#footer .footerNavMain li.first {
background: none repeat scroll 0 0 transparent;
padding-left:0;
}

Centering Problem

Similar Tutorials

View Content

Centering Webpage

Similar Tutorials

View Content

Hi, I'm new to the site and I'm just here to ask a question. I've been having trouble with my webpage trying to center everything. The problem is that at home my webpage is centered (When you zoom out everything stays centered) but as for school I zoom out and everything stays to the left and I'm pretty sure I left all the code the same from computer to computer. I don't think it is the resolution because I had changed my resolution to the same as at school. This is my coding (I'm an amateur at Html and don't know CSS):

<title>Home - WebBanners</title>
</head>
<p align="center">
<div style="position:absolute;top:0px; left:0px; right:0px; bottom:0px;" align="center">
<body topmargin="0" leftmargin="0" bgcolor="#0099FF">
<img src="Banner.gif" width="1280" height="290" border="0" usemap="#Map" />
<map name="Map" id="Map">
<area shape="rect" coords="140,233,302,285" href="Home.html" />
<area shape="rect" coords="330,233,543,286" href="Samples.html" />
<area shape="rect" coords="565,240,722,287" href="Prices.html" />
<area shape="rect" coords="752,229,905,286" href="About.html" />
<area shape="rect" coords="945,235,1122,284" href="Contact.html" />
</map>
<font face="Georgia, Times New Roman, Times, serif" size="+4" color="white"><p align="center"> <u>
Welcome To WebBanners!</u></p></font>
</p>
<table align="center">
<tr>
<td><font face="Georgia, Times New Roman, Times, serif" color="black" size="7"><strong>H</strong></font> <font face="Georgia, Times New Roman, Times, serif" size="+2" color="white">ere we make special just-for-you banner.
<br />

<br>
<font face="Georgia, Times New Roman, Times, serif">Every banner is unique to the person who have ordered them.<br /> <br><font face="Georgia, Times New Roman, Times, serif">They are sold at a reasonable price and if you don't <br>like them then we offer full money back guaranteed.
<br />
<br />
We also have an interactive department where you can <br />talk to one of 'us' through the microphone so we can help you. <br />All you have to do is ask through the E-mail.
<br />
<br />
We can make tons of banners for your website such as the one above <br />or see more
<a href="Samples.html">Here</a>
<br />
<br />
We have prices for your special needs. <br />All of the banners we offer are your ideas. <br />Ask and we can do it for you!
Click <a href="Prices.html"> Here </a> for prices.
<br />
<br />
Want to learn more about us? Click <a href="About.html"> Here </a> for more information.
<br />
<br />
Going to buy one of our offers? Need help in finding something? <br />Click <a href="Contact.html"> Here </a> to contact us! For your design!
</font>
</td>
<td align="center">
<font face="Georgia, Times New Roman, Times, serif" color="Green" size="+3"><u><strong>So Why Pick Us? </font> </u> </strong>
<br />
<br />
<font face="Georgia, Times New Roman, Times, serif" color="Green" size="+2">
<li>We have 100% Money Back Guarantee <br />
<li>Satisfaction Guarantee<br />
<li>Our Prices beat the Competitors<br />
<li>24 Hour Service <br />
<li>Interactive Department <br />
<br />
<br />
<br />
<img src="Ordernow!.gif" />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />

</body>
</html>

Help With Centering Template

Similar Tutorials

View Content

I'm currently using this for my blog template (i didn't make it) and it's currently aligned to the left. How would i make it so that it centers automatically regardless of window size/screen resolution? The right column has a position.

Any help is appreciated.

Code:

<html><head>
<title>17. everything i'm not</title>

<style type="text/css">
#navbar-iframe {display: none;}
::-moz-selection {background-color:#e3e3e3;color:#666666;}
a:link,a:active,a:visited{color:#999999; text-decoration: none;}
a:hover{text-decoration: none; color: #91B1BD; text-decoration:none;}  

body{background-color: #fdfdfd; background-image: url('http://i53.tinypic.com/1jvi34.jpg'); color: #666666; font-family: arial; font-size: 8pt;}
blockquote{font-family:arial; border-left: 5px solid #91B1BD; background-color:#f9f9f9; color: #666666; padding: 10px;}

.side{background:#ffffff; padding:10px; filter: alpha(opacity=70); moz-opacity:.70; opacity:.70;}

.h1 {
font:normal 12pt courier new; 
color:#91B1BD;
text-align:left;}

.h2 {
font:normal 8pt courier new; 
color:#999999; 
border-bottom: 1px dashed #e3e3e3;
text-align:left;
padding:3px;}

</style><noembed>
</head></noembed>
<noembed><body>
</noembed>

<div style="left:0px; top:0px; position:absolute;">
<img src='http://i51.tinypic.com/152oqpk.jpg' width="700px" >
</div>

<div style="position:absolute; left:0px; top:350px; width:545px; background:#ffffff; padding:10px; filter: alpha(opacity=70); moz-opacity:.70; opacity:.70;">
<blogger>
<div class="h1">▶ <$BlogItemTitle$></div>
<div class="h2"><BlogDateHeader><$BlogDateHeaderDate$></BlogDateHeader> // <$BlogItemDateTime$></div><br>
<$BlogItemBody$><br>
</blogger>
</div>

<div style="width: 250px; left:580px; top:290px; position:absolute;">
<div style="color:#91B1BD; font-family:courier new; font-size:14pt;">'cos she's everything, <br>everything im not.</div><br>
<div class="side">
<div class="h1">▶ こんにちは</div>
a warm welcome to your blog ? music players, hit counters, nuffnang ?
</div><br>

<div class="side">
<div class="h1">▶ 私について</div>
konnichiwa, watashi no namaewa deniisu desu. your sexy profile here hoho.
</div><br>

<div class="side">
<div class="h1">▶ 何か言う</div>
some space for your tagboard, max width 250px.
</div><br>

<div class="side">
<div class="h1">▶ ともだち</div>
<a href="http://" target="_blank">one</a> 
<a href="http://" target="_blank">two</a> 
<a href="http://" target="_blank">three</a> 
<a href="http://" target="_blank">four</a> 
<a href="http://" target="_blank">five</a><br>
links to your friends ? if you have any.
</div><br>

<div class="side">
<div class="h1">▶ ありがとう</div>
Layout and header image by <a href="http://blogskins.com/me/mymostloved" target="_blank">mymost</a><a href="http://heavilyybroken.blogspot.com" target="_blank">loved*</a> 
with raw image from popsister scan by <a href="http://sushi-cat.net/" target="_blank">sushi-cat</a> and background from <a href="http://fivepointsapart.blogspot.com" target="_blank">fivepointsapart</a>.<br> 
</div>
</div>
</body>
</html>

Centering <div>'s And Falling Below.

Similar Tutorials

View Content

Hi,
I'm trying to develop a fluid layout for a webpage - and I have two 50% <divs> that have images in them, and the width of these <divs> add to 100% of course. So from my resolution and slightly smaller ones it looks like they are centered.
However, when I scale the browser down to a smaller size, they get squished together because they float left.
How can I make it so one falls below the other and they become centered on the page at the same time?

Cheers...

It Stopped Centering

Similar Tutorials

View Content

http://www.jesdeis.com/index2.php

the image window area WAS centered. and should still be. all i did was change the menu. but i cant figure out why its no longer centered.

also. the funky character in front of the copyright. that is NOT in my source.

Help With Centering Content In Div

Similar Tutorials

View Content

Please help me with the following. This is not a problem in Firefox; only in IE. I am having trouble centering one DIV with a DIV to the left of the centered DIV. The DIV that is blue I would like centered according to the browser width and the red DIV I would like the same vertically as the blue DIV only left justified. In Firefox this works correctly the way I would expect. In IE the left justified div appears "pushes" the DIV ( in blue ) that I want centered further to the right; making it un-centered. thanks for any assistance.

Code:

<div width="100%">
			<div align = "left" style="width:200px;float:left;background-color:#ff0000;">
						<p style="font-size: 8pt;">This needs to be left justified........</p>
						<p style="font-size: 8pt;">This needs to be left justified........</p>
						<p style="font-size: 8pt;">This needs to be left justified........</p>
			</div>
		 <div align="center" style="background-color:#00ff00;">
				<div style="width: 500px;background-color:#0000ff;">
					<p style="font-size: 8pt;">this needs to be centered.................................................................................. </p>
					<p style="font-size: 8pt;">this needs to be centered.................................................................................. </p>
					<p style="font-size: 8pt;">this needs to be centered.................................................................................. </p>
					<p style="font-size: 8pt;">this needs to be centered </p>
				</div>
		</div>

Centering This Page?

Similar Tutorials

View Content

Okay, so me andd my friend are making a website, http://bitememanga.com/, and she designed a template for uor site that we can't center. I've tried putting <center> tags around the entire body, and around every div, but it won't work for some reason. I really need to center this whole page so it looks decent on any computer resolution. Thanks!

The code is:

<html>
<title>Bite Me - The online shonen-ai manga novel/book - gay vampires, fantasy, anime and so much more.</title>
<center>
<body>

<div class="bg" style="position: absolute; left:300px top:0px; width:800px; height:750px; overflow: hidden;">
<img src="http://i41.tinypic.com/nyfe3s.jpg">
</div>
<div class="content" style="position: absolute; top:250px; width:500px; height:200px; overflow: auto;"><font color=white>
Welcome to Bite Me, the online shonen ai manga about Aku the vampire, and his love, Haru.<br>

At the moment, we do not have any manga posted.<br>

A few things need to happen before anythings posted.<br>

If you have any questions,suggestions,or comments, you can contact us at bitememanga@hotmail.com<br>

And remember to keep checking back every few days to see if we have any updates!

</font>
</div>

</body>
</center>
</html>

Centering Page!? Help!

Similar Tutorials

View Content

Ive had this problem where when i create a page and I view it on my computer, it looks fine and centered. But when i access my site from another computer with a different sized monitor, it looks a lot different and uncentered. How do I get my page to look the same on every computer no matter the size? Thank You.

Centering Image

Similar Tutorials

View Content

I would like to center three button images under an image. In the old day we would put our text into the image and create a two-row table, with the top row having one cell three columns wide and the bottom row having three cells.

I have tried making my image with three uls with background images under them, but of course I can't force the full image to show since my content doesn't take up the full space.

I am currently putting things in a table, just to make the full image show, but I feel like I'm still doing things old-school. Is there a newer, spiffier way to do this?

table {
width:780px;
font-size:125%;
padding:0;
overflow:hidden;
}
td {
width:254px;
height:60px;
background-repeat:no-repeat;
background-position:top left;
background-image:url(images/navbackground2.png);
padding:0 0 0 20px;
}

Also my images won't justify. The space between the cells seems predetermined no matter what I futz with and there's a space to the right of the last image that I don't want.

Finally, is there a way to put all three background statements into one code? (I know that's a CSS question, but I don't want to cross-post.)

Elisabeth

Centering Div Layout

Similar Tutorials

View Content

I am working on a website, and I have been trying to center the homepage so that it looks the same on every computer/ browser. It's sort of set up as a juvenile div layout. I've been using other layouts as an example so I don't really know how to fix what I don't want from theirs. I'd like the main image to be centered but I can't figure it out. It's positioned absolutely which might be part of the problem but I don't know what else to set it as.

Also, on top of centering the image horizontally, I was wondering if there was any way that I could position it in the very center of the page.

The link is http://appleseatmoregrass.webs.com/index.htm

Centering Website In Ie

Similar Tutorials

View Content

Hi,

Have just uploaded a new website. In Safari, Opera and Firefox the webpage floats in the middle of the browser page, as I want it to.

In some versions of IE its sits to the far left.

Here is the page:

http://www.ironworksstudio.co.uk/

And here is the CSS:

Code:

*{	
	margin: 0;
	padding: 0;
}
		
body{
	font-family: Helvetica, Verdana, Arial, sans-serif;
	font-size: 15px;
	color: #000000;
	background-color:#000000;
}
		
#container {
				margin-right: auto;
				margin-left: auto;
				margin-top: 15px;
				width: 700px;
				background-color:#000000;
				}
				
p{
	padding-top: 10px;
	font-size: 13px;
	line-height: 18px;
}
		
	#header {
			margin-right: auto;
			margin-left: auto;
			margin-bottom: 0;
			height: 100px;
			width:700px;
			background-color:#000000;
			padding: 0 0 10px 0;
			
			}
			
		#menu ul{
		margin-left:0;
		font-family: Helvetica, Arial, sans-serif;
		font-size: 14px;
		background-color:#FFFFFF;
		
	}
	
	#menu li{
		text-align: center;
		text-decoration: none;
		color: #ffffff;
		background-color: #000000;
		list-style-type: none;
		width: 84px;
		height: 20px;
		padding-left: 5px;
		padding-right: 5px;
		padding-top: 5px;
		padding-bottom; 3px;
		margin-right: 2px;
		margin-left: 2px;
		float: left;
		border: 1px solid;
		}
		
	#menu li:hover {
			color: #ffffff;
			background-color: #333333;
			}
			
	
			
	#menu li a {
			text-decoration: none;
			color: #ffffff;
		}
	
	#menu li a:hover {
			color: #ffffff;
			}
	
	
	
	#footer {
	font-size:12px;
	font-family: Helvetica, Arial, sans-serif;
	width: 700px;
	margin-right: auto;
	margin-left: auto;
	clear: both;
	background-color:#000;
	color: #FFF;			
		}
	
	
		
	#top_image {
				margin-bottom:20px;
				clear: left;
				background-color:#000000;
				}
		
	#menu {
			
			float: left;
			width: 700px;
			margin-bottom:10px;
			background-color:#000000;
			
		}
		
	#two_column {
				font-size:12px;
				font-family: Helvetica, Arial, sans-serif;	
				line-height:1.4;
				margin-top: 10px;
				margin-bottom: 50px;
				float: left;
				width: 700px;
				text-align: left;
				background-color:#000;
				
				}
			
		
	#l_column {
				font-size:12px;
				font-family: Helvetica, Arial, sans-serif;	
				color:#FFF;
				line-height:1.4;
				margin-top: 10px;
				margin-right: 30px;
				margin-bottom: 50px;
				float: left;
				width: 335px;
				text-align: left;
				background-color:#000;
				
				
			}
			
	#l_column a{color:999999;}		

					
			
	#r_column {
				font-size:12px;
				font-family: Helvetica, Arial, sans-serif;
				color:#fff;
				line-height:1.4;
				margin-top: 23px;
				float: right;
				width: 335px;
				background-color:#000;
				padding: 0 0 10px 0;
				
			}
			
	
	
	.left {
			font-size:12px;
			font-family: Helvetica, Arial, sans-serif;
			width: 335px;
			float: left;
			text-align: left;
			border: 2px solid #000000;
			border-collapse: collapse;
			background-color:#000000;
			}
			
	.right {
			font-size:12px;
			font-family: Helvetica, Arial, sans-serif;
			width: 335px;
			float: right;
			text-align: left;
			border: 2px solid #000000;
			border-collapse: collapse;
			margin-top:12px;
			background-color:#000000;
			}
			
			
	th { 
		font-weight: bold;
		font-size:13px;
		color: #000000;
		background-color:#FFFFFF;
		padding: 5px;
		}
		
	td {
		padding:5px;
		}
		
	tr {
		color:#FFFFFF;
		}
		
	.rowstyle1 {
				border-bottom:1px dotted;
				}
	


			

		
	#gallery {
		background-color:#000;
		width: 680px;
		padding-left: 0;
	}
	#gallery ul { list-style: none;
					margin-left: 0;
					
					}
					
	#gallery li { 
				 padding-left:1.2px;
				 }
				 

	
	#gallery ul li { display: inline;
					padding-right: 0;
					}
	#gallery ul img {
		border: 0;
		border-width: 0;
	}
	#gallery ul a:hover img {
		border: 0 solid;
		
	}
	
	#gallery ul a:hover { color: #cccccc; }
	
	hr {color:#333333;
		border-style:normal;
		padding: 0 0 0 0;
		margin: 0 0 10 0;
		}
	
	h2 {color:#ffffff;}
	
	</style>

Centering Div Layer

Similar Tutorials

View Content

Here's the CSS code:
HTML Code:

 <style type="text/css">
<!--
body {
scrollbar-arrow-color: #425B5E;
scrollbar-base-color: #98A5A6;
scrollbar-face-color: #98A5A6;
scrollbar-highlight-color: #FFFFFF;
scrollbar-shadow-color: #425B5E;
scrollbar-3dlight-color: #DEE7E8;
scrollbar-track-color: #DEE7E8;
scrollbar-darkshadow-color: #DEE7E8;
}

div#content {
  width: 600px;
  margin-left: auto;
  margin-right: auto;
  text-align: left;
}


.header {font-family: trebuchet MS; size: 11px; color: white; font-weight: none;
 BORDER-RIGHT: none 1px solid;
              BORDER-TOP: none 1px solid;
              BORDER-bottom: white 1px solid;
              BORDER-LEFT: none 1px solid; background-color: #660000;}


.head2 { font-family: verdana; font-size: 11px; color: #4A4A5B; background-color: #FFFFFF; border: #4A4A5B; border-style: solid; border-left-width: 0px; border-right-width: 0px; border-top-width: 1px; border-bottom-width: 1px; text-align:center; background-repeat: no-repeat; font-weight: bold; letter-spacing: 1px; text-transform: uppercase;}

.head { font-family: verdana; font-size: 14px; color: #64657E; background-color: none; border: #75AAB0; border-style: solid; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; border-bottom-width: 0px; text-align:center; background-image: url(head.gif); background-repeat: no-repeat; font-weight: bold; height: 26px; padding-top: 4px;}

b { color: #6D82A1; font-size: 11px; font-weight: bold; }

A:link
{color:#beb8b8;text-decoration:none; cursor: default; font-weight: bold; border-bottom: 1px #C5CADC solid;}
A:visited
{color:#beb8b8;text-decoration:none; cursor: default; font-weight: bold; border-bottom: 1px #C5CADC solid;}
A:active
{color:#beb8b8;text-decoration:none; cursor: default; font-weight: bold; border-bottom: 1px #C5CADC solid;}
A:hover
{color:#5b1435;text-decoration:underline; cursor:default; font-weight: bold; border-bottom: 1px #000000 solid;}


body 
{background-color: gray;
background-attachment: fixed;
background-repeat: repeat-y;
background-position: left;
font-family: arial; 
color: black; 
margin: 0px;
letter-spacing: 0px; 
font-weight: normal; 
font-size: 12px;
cursor: default;}

td { font-family: trebuchet ms; font-size: 11px; color: black; font-weight: normal; }
--> 


</style>

And here's the text itself;
HTML Code:

<html>
<head>


<link rel="stylesheet" media="all" type="text/css" href="simple/simple.css" />

<script src="simple/click_menu.js" type="text/javascript"></script>

<link rel="stylesheet" href="style.css" type="text/css">
<title>Ironman Football Academy | Don Bosco Prep</title>
</head>

<body onload="clickMenu('menu')">

<center><img src="mainimage.png">
<ul id="menu">
<li class="sub"><a href="#nogo1">Home</a>
		<ul>

		</ul>
</li>
<li class="sub"><a href="#nogo1">Information</a>
		<ul>

		</ul>
</li>
<li class="sub"><a href="#nogo1">Registration</a>
		<ul>

		</ul>
</li>
<li class="sub"><a href="#nogo1">Don Bosco Prep</a>
		<ul>

		</ul>
</li>
</ul>
</center>






</div>


<div id="content" style="position: absolute; z-index: 2; margin-left:auto; margin-right:auto; 
 top: 303px; width: 600px; height: 0px; overflow: visible">
<div class="header">&nbsp;Welcome</div>
We plan to change C-5 plane in such a way that the limitations and hazards involved with them might disappear or be 

lessened, advancing the study of aeronautics and its applications in technology. As the group researches the flaws 

associated with the structural mechanics, equipment, materials, and technology, we will develop a plan to inspire a 

more efficient plane. <a href="http://donboscoprep.org/istf/skystar/component2/task1.php"">Task 1</a>


</div>


</html>

Why isn't the text (with the header welcome) not centered?

Ie7 Centering Problem

Similar Tutorials

View Content

My site is working correctly in bot Safari & FF but I can't seem to get it to center in IE7.
In Safari and FF, the content is centered and the window can be shrunk down to 1000px without scrollbars appearing (which is what I want). In IE7 its all sliding to the right and scrollbars are appearing at 1150px or something like that (which is what I want definitely don't want).

This template is a little bit problematic because the background image for the blue area extends outside the central column on the left side and I need it to disappear when the window width is shrunk. I hope that makes sense.

I can't figure out an alternative solution that works in IE7, any ideas?

Check out the template in question at: http://current-post.com