Learn VBA & Macros in 1 Week!

HTML - Centering Divs, Floats

Full Excel VBA Course - Beginner to Expert

Centering Divs, Floats	View Content

Hi everyone,

I'm having trouble with centering multiple DIVS and making them next to one another like so:

HTML Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-2">
<style>
div{border: 1px solid gray;}
</style>
</head>

<body>

<div style="text-align: center">
	<div style="float: left;display: inline;">
	dfdfd
	</div>
	<div style="float: left;display: inline;">
	dfdfd
	</div>
	<p style="clear: both;">
</div>
</body>
</html>

Is it possible? Note that we don't know their width or height of any of the DIVS

Full Excel VBA Course - Beginner to Expert

Centering Divs

Similar Tutorials

View Content

Hi all

I have a question which im sure is very simple to answer but has been frustrating me for three days (yes i am aware i may have prooved my own ineptitude )

If any of you have a moment could you have a look at the code below.

What im trying to do is center the divs no matter what the screen resolution.Im hoping, due to my huge lack of experience, that im just missing something very obvious.

Below is the code ...

TEMPLATE
HTML Code:

body {
background-color: #000000;
}
-->
</style>
<link href="Stylesheets/DT CSS.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
a:link {
color: #b46633;
}
.style1 {
font-family: "Times New Roman", Times, serif;
font-size: large;
}
-->
</style></head>

<body>
<div id="outer">
<div align="center" id="Header"></div>
<div id="links">
<p><a href="Home.html" class="style1">Home<br />
<br />
</a><br />
</p>
</div>
<div align="center" id="Main">
<p align="center">&quot;It does not do to leave a live dragon out of your calculations, if you live near him.&quot;<br />
<em>(JRR Tolkien - The Lord of the Rings)</em></p>
<br />
<p align="center">Throughout time since mankind begun our imaginations have activly sought out what we could not see or understand. Demons have haunted our dreams and gods have soothed them. Our minds have conjured terrible creatures for our warriors to battle and places for the adventurous to explore. One of the greatest and widest spread of these creatures is the Dragon. A true testimony to the power of imagination. This website is in dedication to the mightiest of our minds creations. The infomation found here is the result of many hours research and passion and i hope you find it useful.<br />
Welcome to Dragons Touch</p>
</div>
<div id="News">Content for id "News" Goes Here</div>

</div>
<h1 align="center">&nbsp;</h1>
</body>
</html>

CSS
PHP Code:
body {
font-family: "Times New Roman", Times, serif;
background-color: #000000;
background-repeat: no-repeat;
color: #FFFFFF;
font-size: medium;
width: 100%;
position: relative;
left: auto;
right: auto;
bottom: auto;
margin-right: 20px;
margin-left: 20px;
margin-top: 20px;
margin-bottom: 20px;
}

#outer {
width: 80%;
background-color:#FFFFFF;
margin-top: 50px;
margin-bottom: 50px;
margin-left: auto;
margin-right: auto;
padding: 0px;
border: thin solid #000000;

}

#Header {
position: absolute;
height: 150px;
width: 800px;
left: 121px;
top: 0px;
background-image: url(../Images/NewBanner.jpg);
color: #F0F0F0;
background-color: #000000;
background-repeat: no-repeat;
margin: 0px;

}
Links {
top: 150px;
position: relative;
height: 350px;
width: 150px;
bottom: auto;
}
#links {
top: 151px;
height: 350px;
width: 126px;
clip: rect(auto,auto,auto,auto);
position: absolute;
font-family: "Times New Roman", Times, serif;
padding-top: 50px;
font-size: large;
font-weight: normal;
font-style: normal;
text-transform: none;
padding-left: 40px;
text-align: left;
list-style-position: inside;
left: 41px;
margin: 0px;
}
#Main {
font-family: "Times New Roman", Times, serif;
position: absolute;
height: auto;
width: 620px;
left: 208px;
top: 151px;
right: 800px;
margin: 0px;
}
#News {
position: absolute;
left: 829px;
top: 151px;
width: 162px;
height: 406px;
margin: 0px;

Trouble Centering Divs

Similar Tutorials

View Content

I've got two divs that I want to center, each within its own outer div. Here is my HTML:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<title>Duyun</title>

<link rel="stylesheet" type="text/css" href="assets/styles/styles.css" />

<script type="text/javascript" src="assets/scripts/swfobject.js">
</script>

<script type="text/javascript">

swfobject.embedSWF ("assets/flash/eng_button_2.swf", "engLink", "257", "471", "9.0.0");

swfobject.embedSWF ("assets/flash/ch_button_2.swf", "chLink", "257", "471", "9.0.0");

</script>
</head>

<body>
<div id="container">
 
 	<div id="homeTop">
    </div>
    
    <div id="homeMain">
    
      <div id="homeLeft">
    	<a href="english/index.html">
        <div id="engLink">
        <p>Alt content</p>
        </div></a>
        <p class="homeEnter">Enter English Site</p>
      </div>
     
      <div id="homeRight"> 
  	   <a href="chinese/index.html">
       <div id="chLink">
       <p>Alt content</p>
       </div>
	   </a>
       <p class="homeEnter">Enter Chinese Site</p> 
      </div>
      
	</div>
    
  </div>
</body>
</html>

and the CSS:

Code:

@charset "UTF-8";
/* CSS Document */

body {
	background-color: black;
	color: #c0c3c4;
}

#container {
	margin: 0 auto;
	width: 950px;
	
}

h1 {
	text-align: center;
}



/*************** Home **************/


#homeTop {
	height: 100px;
	background-color: red;
}

#homeMain {
	margin: auto;
	width: 800px;
}

#homeLeft {
	float:left;
	width: 400px;
	background-color:blue;
}

#homeRight {
	float: right;
	width: 400px;
	background-color: green;
}


engLink {
	margin: auto;
	width: 257px;
	height: 471px;
}

chLink {
	margin: auto;
	width: 257px;
	height: 471px;
}

.homeEnter {
	text-align: center;
}


/**************Bio - English**************/

#bioContainer{
	margin: auto;
	width: 785px;
	}


#bioPic {
	float: left;
	margin: 20px;
}


.bio {
	margin: 10px;
	font-family:Geneva, Arial, Helvetica, sans-serif;
	font-size: 13px;
	text-indent: 2em;
}

As you can see, for both the chLink and engLink divs, I have the margin: auto declaration, but currently, they both show up to the left extreme of their containing divs. Any ideas what's wrong here? Could the swfobject be causing problems? Thanks.

Problem With Divs Centering Under Ie 6

Similar Tutorials

View Content

Hey guys my site
http://www.atlanta-web.com

I have 3 <div>s which i centered using the css technique
Code:

margin: 0 auto;

They work perfect in IE 7, FF2, FF3
but fail in IE6 any idea what i could do to make this correct?

Thanks,

Eric

Centering 3 Divs, Side By Side, Inside A Div

Similar Tutorials

View Content

I'm having some trouble trying to get the following page to show the three link columns centered, side by side:

http://centralmusic.com.previewmysite.com/links.php

EDIT: for reference, the title LINK is properly centered, and the ARTIST column should be directly below that, as is seen on the contact page

I've tried every trick you can find on google, but nothing seems to work while the float tag is involved, and if I remove the tag then the divs arn't side by side.

I've found that if I make a containing DIV with a FIXED witdth, it will center THAT div within it's parent using the margin: 0 trick. however, the 3 interior divs still float to the left of that container div. so if the containing div is wider then the total width of the interior divs, they do not appeared center (however on this page I COULD make use of equal column widths, but it doesn't end up being FF friendly).

Alright so I actually tried a couple more things after typing that last paragraph.
On this page:

http://centralmusic.com.previewmysite.com/gallery.php

I find that what i described so far is true, however on the first page i referenced, putting a containing div around the 3 columns made no apparent difference. I'm going to start double checking my code and comparing the two pages for differences to see what I'm doing wrong (on both pages though, the goal is to have a number of divs centered vertically, side by side). If anyone has any comments or hints to help me out that'd be great, but I'll definatley be posting back later with an update once I get a chance to try a few more things.

Need A Fix For Ie Floats

Similar Tutorials

View Content

If you'll take the trouble to look at this page:

http://www.fatefulvoyage.com/trial/trialAAIntro.html

and scroll down just a tad, you'll see two columns of names. If you're usiing IE the right column will be below the left; if you're using Firefox or Opera, the columns will be properly aligned.

Can someone suggest a fix for IE?

Thanks for your time.

Floats And 100% Height

Similar Tutorials

View Content

Hey guys, me and my friend are going to begin working on a forum but we've run into one small problem with CSS floats and 100% height (yes, I know it doesn't work).

Could you look at this page in Firefox, please?
http://automata.firephoenixnet.com/atom.ic/

As you can see, everything works fine except for the posts (which are supposed to look-forum like) and the sidebar, which doesn't stretch all the way down to the footer bar (because of the post weirdness).

Is there any way to fix this?

Thanks guys!

Xhtml And Css Floats Of A Webpage.

Similar Tutorials

View Content

For some odd reason my background property in container is not carrying down through the rest of my webpage. I can not figure out what i am doing wrong and this is really starting to frustrate me. here is my code.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Simple Beauty</title>

<style type="text/css">

</style></head>
<body>
<div id="container">
<div class='header'>
<div class='logo'><img src='../project/images/teams/Beta.gif' id='logo' alt='Team Beta Logo'/></div>
<div class='headerText'>
<h1>Team Beta's E-Commerce Site</h1>
</div>
</div>
<ul id='menu'>
<li><a href='index.php'>Home</a></li>
<li><a href='products.php'>Products</a></li>
<li><a href='signup.php'>Signup</a></li>
<li><a href='#'>Shopping Cart (0 items)</a></li>
<li><a href='about.php'>About Us</a></li>
</ul>
<div id="main">sdfdd</div>
<div id="sidebar">blah</div>
</div>
</body>
</html>

Header Image That 'floats' As A % From Edge Of Page Question.

Similar Tutorials

View Content

I've seen (and cannot find again) a header piece of artwork that was justified a percentage distance from the left of the page.

Another plain slither of header artwork was repeated seamlessly across the total width of the page. It went 'behind' the prime piece of artwork and reappeared. The 'joins' were invisible.

The header seemed / appeared to be one piece of artwork that went across the page regardless of how wide the page was with the piece of artwork always remaining between the centre of the page and the left hand edge of the page. The distance of the piece of artwork got nearer to the left hand edge of the page the narrower the page got.

How does one achieve that?

Both images were hosted by ImageShack.

I barely understand all that myself! My knowledgebase is a little above zero.

Thanks in advance,

MD.

Secondary Bg Image That "floats To Bottom"

Similar Tutorials

View Content

I have a current background image for my forums, but I want to add another background image that will "float" to the bottom no matter how long the page is. How would I do that?

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 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?

Centering And Other Issues

Similar Tutorials

View Content

I have a page laid out, but its not centering the main table? All the contents should be centered on the page but its shoved to the left. Take a look he

www.puliz.com/default2.htm

Also, there is a gap in the graphics just below the image map that I have placed there. Any ideas?

Thanks in advance!

Scott

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>

Centering Not Working In Ie7

Similar Tutorials

View Content

http://insomnia.eternal-glory.org/2.0/index.php
I'm trying to imitate a Mac computer, Tiger.
Looks great in FF/Safari, but in IE7, the dock refuses to center.

I have:
Code:

body {
text-align:center;}

in my CSS, that's supposed to fix the margin-left/-right:auto; bug for IE. But... it's not?
Help, please?

Doctype is Strict, and I have margin-left/-right set to auto.

Thanks in advance,
Michele

Centering My Website

Similar Tutorials

View Content

Hi.
I don't know how to center my website, so it works in all browsers. Take a look he www.AURecords.com

It only works on computers with a high screen resolution.

Any suggestions?

Christian

Help With Centering Template

Similar Tutorials

View Content

I'm currently using this template for blogger that's not made by myself and i've been trying to get it to center horizontally but it's not working. I'm hardly experienced with html so any help would be appreciated. Thanks in advance!

HTML Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<HTML><head>
<title>The City That Never Sleeps</title>

<script type="text/javascript">
function changeNavigation(id)
{document.getElementById('content').innerHTML=document.getElementById(id).innerHTML}
</script>

<style type="text/css">

body { 
background-image: url(http://i1015.photobucket.com/albums/af277/sleepingtoys/city/citybg.jpg);
background-repeat: repeat-x;
background-attachment: fixed;
background-color: #F0F0F0;
font: normal 8pt "Arial", sans-serif;
color: #808080;
line-height: 1.5;
text-align: justify;
}

#navbar-iframe{
display: none;height: 0px;
}  
#bottom { 
background: #222;
height: 20px;
width: 100%;
position: fixed;
bottom: 0;left: 0;z-index: 1;
}

#sun{ 
 padding:5px; 
 background: #222222;}

#post{
 filter: alpha (opacity=90);
 -moz-opacity: 0.50; opacity: 0.90; 
-webkit-transition-duration:1s;
 padding:1px 3px 3px 0px;}

#post:hover{ 
 filter: alpha (opacity=100);
 -moz-opacity: 1.00; opacity: 1.00;
 -webkit-transition-duration: 1s;
 padding:1px 3px 3px 0px;}

#posts {
 background: #ffffff;
 vertical-align: top;
 width: 520px;
 -moz-border-radius: 10px 0 10px 10px;
 -webkit-border-radius: 10px 0 10px 10px;
 padding: 5px 10px 10px 10px;}

#postbody img {
 padding: 6px;
 background:#fafafa;
 border: 1px solid #e1e1e1;}

#music img {
 padding: 6px;
 background:#111;
 border: 0px solid #222;}

#moon { 
 background: transparent;
 position: absolute;
 top: 20px;
 left: 315px;
 width: 60%; }

#rain {
 position: fixed; 
 width: 250px;
 bottom: 10px;
 left: 50px;} 

#rain #content {
 -webkit-border-radius: 10px 10px 0 0px;
 -moz-border-radius: 10px 10px 0 0px; 
 background: #222222;
 color: #999;
 margin: 10px 0 0;
 padding: 8px; }

::selection {
 color: #888888;
 background: #f5f5f5; }

::-moz-selection{
 background: #f5f5f5;
 color: #888888;}

.blogger-labels{
 border-top: 1px solid #f8f8f8;
 font-size: 10px;
 padding-top: 5px;
 margin: 10px auto 0 auto;
 text-align: right;}

strong, b {color:#81A8B8;}em, i {color: #B94159 ; font-weight:bold;}u {color: #A79C8E ;border-bottom: 1px solid #A79C8E;}

a { 
 font: bold 8.5pt "helvetica", sans-serif;
 color: #888;
 text-decoration: none;
 text-transform: lowercase;}

a:hover {
 -moz-transition-duration: 1s;
 -webkit-transition-duration:1s;
 color: #ffffff; }

blockquote {
 background-image:url("http://i589.photobucket.com/albums/ss333/HeartsAloud/dl/hbq.gif");
 background-repeat: no-repeat;
 background-position:top right;
 font: normal 8pt "arial", monospace;
 color: #999;
 margin: 1px 0px 1px 0px;
 border-top: 1px solid #eeeeee;
 border-bottom: 1px solid #eee;
 -webkit-transition-duration:1s;
 padding: 9px 0px 9px 0px; }

blockquote:hover { 
 -webkit-transition-duration:1s;
 color: #555; }

.date {
 font: normal 20pt "helvetica", sans-serif;
 text-transform: lowercase;
 color:#dddddd;
 letter-spacing:-3pt;}

.title {
 font: normal 18pt "helvetica", sans-serif;
 border-bottom: 1px solid #f5f5f5;
 margin-top:-10pt;
 margin-bottom:2px;
 font-style:italic;
 letter-spacing: -2pt;
 color:#f1f1f1;
 text-transform: lowercase; }

.time{
 font: bold 30pt "arial", sans-serif;
 -moz-border-radius: 0 7px 7px 0px;
 -webkit-border-radius: 0 15px 15px 0px;
 height: 50px;
 background: #f9f9f9 !important;
 padding: 1px 3px 3px 0px;
 float: left;
 position: relative;
 color:#f1f1f1;
 font-weight:bold;
 letter-spacing:-6.5pt;
 filter: alpha (opacity=70);
 -moz-opacity: 0.70;
 opacity: 0.70; 
 -webkit-transition-duration:1s; 
}

.time:hover{
 filter: alpha (opacity=90); -moz-opacity: 0.90; opacity: 0.90; 
 -webkit-transition-duration:1s;
 padding:1px 3px 3px 0px;}

.clouds{
 font: normal 18pt "helvetica", sans-serif;
 font-color:#333333;
 letter-spacing:-2pt; }

.sky{
 text-align: right;
 padding: 0 9px 0px 0px;
 font: bold 40pt "helvetica", sans-serif;
 letter-spacing:-7pt;
 text-transform: lowercase;
 line-height:50%;
 color:#222;}

.navi {
 background: #222222;
 color: #555555;
 border-bottom: 1px solid #333;
 font: normal 8pt "helvetica", sans-serif;
 letter-spacing: 3pt;
 margin: 0;
 padding: 8px 5px;
 text-align: right;
 text-transform: uppercase; 
 -webkit-transition-duration:1s; }

.navi:hover {
 -webkit-transition-duration:1s;
 background: #222;
 color: #999999;
 cursor: default;
border-right:140px solid #333; margin-right: 0px;}

a.label:link, a.label:active, a.label:visited {
text-decoration: none;  display: block; font: bold 30pt "arial", sans-serif; color: #e4e4e4; text-align: center; padding-bottom: 3px; margin:5px;
 }
a.label:hover{ 
color: #A6ACA7;  }

</style></head>

<body>

<div id="rain">

<div class="sky">
The City That Never Sleeps
</div>

<div id="content">
<div id="music">
<img src="http://i1015.photobucket.com/albums/af277/sleepingtoys/wocky/3.jpg">

Best viewed in <b>Google Chrome</b>, screen resolution 1280 x 1024.
Do not put too much content under each header or else some of the content could not be seen.

</div>
</div>

<div class="navi" style="border-top: none;" onClick="changeNavigation('about')">ABOUT</div>
<div class="navi" onClick="changeNavigation('affiliates')">AFFILIATES</div>
<div class="navi" onClick="changeNavigation('archive')">ARCHIVES</div>
<div class="navi" onClick="changeNavigation('tagboard')">TAGBOARD</div>


<div id="sun">
</div>


<div id="about" style="display: none;">
<div class="clouds">profile</div>
<div id="music">

<img src="http://i1015.photobucket.com/albums/af277/sleepingtoys/wocky/1.jpg">

It's best to keep it short and sweet. (:
</div>
</div>

<div id="affiliates" style="display: none;">
<div class="clouds">affiliates</div>
<div id="music">

<img src="http://i1015.photobucket.com/albums/af277/sleepingtoys/wocky/5.jpg">

<a href="http://struckbywanderlust.tumblr.com" target="_blank">tumblr</a>
<a href="http://heartsaloud.livejournal.com" target="_blank">livejournal</a>
<a href="http://heartsinink.livejournal.com" target="_blank">heartsinink</a>
<a href="http://twitter.com/heartsaloud" target="_blank">twitter</a>

<div class="clouds">credits</div>

This skin is made by <a href="http://blogskins.com/me/sleepingtoys" target="_blank">sleeping</a><a href="http://about.me/halfway" target="_blank">toys</a>.<br>
Resources: <a href="http://www.sxc.hu/" target="_blank">1</a>, <a href="http://weheartit.com/entry/2591643" target="_blank">2</a>, 
<a href="http://weheartit.com/entry/442753" target="_blank">3</a>, <a href="http://weheartit.com/entry/2868529" target="_blank">4</a>,
<a href="http://weheartit.com/entry/2867826" target="_blank">5</a>

</div>
</div>
<div id="archive" style="display: none;">
<div class="clouds">archives</div>
<div id="music">

<img src="http://i1015.photobucket.com/albums/af277/sleepingtoys/wocky/4.jpg">

<td width="235px" valign="top">
   <form name="form1">
   <select style="font-size:8pt;color:#999999;font-family: helvetica;background-color:#333333; border:1px solid #222222; padding: 0px; width: 235px;" onChange="location.href=this.options[this.selectedIndex].value;">
   <option value=''>Archives</option>
   <BloggerArchives>
   <option value="<$BlogArchiveURL$>"><$BlogArchiveName$></option>
   </BloggerArchives>
   </select>
   </form>
   </td>

</div>
</div>

<div id="tagboard" style="display: none;">
<div class="clouds">talk</div>
<div id="music">

<img src="http://i1015.photobucket.com/albums/af277/sleepingtoys/wocky/2.jpg">

Any usable chat widget goes in here.<br>
A pop-up <a href="http://cbox.ws">cbox</a> is recommended.
If you do not want a pop-up cbox, its width should not exceed 250px.

</div></div>
</div>


<div id="moon">
<br><br><br>
<Blogger>
<br>
<table id="post" border="0" cellpadding="0" cellspacing="0">
<tr>


<td id="posts">

<div class="date">posted : <BlogDateHeader><$BlogDateHeaderDate$></BlogDateHeader></div>
<div class="title">title : <$BlogItemTitle$></div>
<div id="postbody"><$BlogItemBody$></div>

<td valign="top" width="112">
<div class="time" align="center"><a class="label" href="#top">


 <$BlogItemDateTime$> </a>


</div></div>
</td></tr></table>

</Blogger>
<br><br>

<div id="bottom"></div>

</div>
</body></html>

Need Help Centering Image

Similar Tutorials

View Content

I tried every code I could find, but warning, I'm still new to HTML. This is my table code for now. I need the first row image to be centered. When i view it in a browser it is aligned to the left

<table style="width: 635px; height: 900px" cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr>
<td style="width: 600px; height: 600px;" colspan="6"><img alt="" src="breakfast1.JPG" /></td>
</tr>
<tr style="height: 100px">
<td><img alt="" src="bthumb1.JPG" /></td>
<td><img alt="" src="bthumb2.JPG" /></td>
<td><img alt="" src="bthumb3.JPG" /></td>
<td><img alt="" src="bthumb4.JPG" /></td>
<td><img alt="" src="bthumb5.JPG" /></td>
<td><img alt="" src="bthumb6.JPG" /></td>
</tr>
<tr style="height: 100px">
<td><img alt="" src="bthumb7.JPG" /></td>
<td><img alt="" src="bthumb8.JPG" /></td>
<td><img alt="" src="bthumb9.JPG" /></td>
<td><img alt="" src="bthumb10.JPG" /></td>
<td><img alt="" src="bthumb11.JPG" /></td>
<td><img alt="" src="bthumb12.JPG" /></td>
</tr>
<tr style="height: 100px">
<td><img alt="" src="bthumb13.JPG" /></td>
</tr>
</tbody>
</table>

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

Centering My Page

Similar Tutorials

View Content

I just noticed that the site I coded is not centered but is aligned to the left on resolutions larger than 1024x768. Is there a way to fix this? Here is the css for the main div which has all the content.

#container {
position:absolute;
left:0px;
top:0px;
width:1002px;
height:auto;
margin:0px auto;
border:0;
padding:0;