Learn VBA & Macros in 1 Week!

HTML - Centering <div>'s And Falling Below.

Full Excel VBA Course - Beginner to Expert

Centering <div>'s And Falling Below.	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...

Full Excel VBA Course - Beginner to Expert

Similar Tutorials

Help With Centering

Centering A Div Within A Div...

Centering Problem

Help With Centering Images + Ie9

I Need Help Centering My Website.

Centering Problems.

Centering This Page?

Centering Div Layer

Help Centering A Website

Ie7 Centering Problem

Centering Layer

Centering A Table

It Stopped Centering

Centering Image Help Please

Table Not Centering Right In Ie

Need Help Centering Image

Centering Not Working In Ie7

Centering Page!? Help!

Learn VBA & Macros for Excel in 1 Week!

Help With Centering

Similar Tutorials

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 A Div Within A Div...

Similar Tutorials

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 Nav

Similar Tutorials

how can i center the nav on this page?

http://fantasyfootball.pzproductions.com/testing

Centering Problem

Similar Tutorials

Help With Centering Images + Ie9

Similar Tutorials

Hello, I'm having real trouble aligning images to the 'exact' centre in different browsers. I'm using <div align="middle"> </div> around the whole code at the moment, which aligns horizontally in Chrome and Firefox, but not IE9. But even this does not vertically align as well.

Afraid I don't know much about CSS or any other div tags.
I built the site in Dreamweaver - this is the code straight from site:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<div align="middle">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>www.test.com</title>
<style type="text/css">

</style></head>

<body>
<img src="comet3.jpg" width="933" height="658" border="0" align="middle" usemap="#Map" />
<map name="Map" id="Map"><area shape="circle" coords="885,123,9" href="comet2.html" /><area shape="circle" coords="916,124,9" href="comet4.html" /><area shape="rect" coords="785,71,904,103" href="contact.html" /><area shape="rect" coords="665,70,756,109" href="about.html" />
<area shape="rect" coords="371,73,462,112" href="index.html" />
<area shape="rect" coords="499,70,632,111" href="portfolio.html" />
<area shape="poly" coords="891,118" href="#" />
</map>
</body>
</html>
</div>

Really need some help with this!
Thanks for any assistance
Cheers
J

I Need Help Centering My Website.

Similar Tutorials

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 Problems.

Similar Tutorials

I am trying to center some text in a table, but horizontally only. It centers vertically inside a cell in a table when i use either of these tags.

HTML Code:

<h2 style="text-align:center">
<center>text</center>

How do i fix this? I clarified what i want in the attatched picture.

Centering This Page?

Similar Tutorials

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 Div Layer

Similar Tutorials

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?

Help Centering A Website

Similar Tutorials

Hi. First off I'm new to this forum so Hello!

I wanted to know how to make sure my websites 'float' in the middle of the screen, like this for example

http://www.richardjohntaylor.com/billymurray

i.e. whatever size the window, the image always remains centred. The website above is only a single image. How would I do it with my other sites, which are tables making up many images, eg.

http://www.terrystone.biz

or http://www.trconsultants.co.uk

I edit using Dreamweaver.

Thanks

Richard

Centering Divs

Similar Tutorials

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;

Ie7 Centering Problem

Similar Tutorials

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

Centering Layer

Similar Tutorials

Centering A Table

Similar Tutorials

Hi. I can't remember how to center a table to the center of the page. Here is my current code:
HTML Code:

<table style="width: 66%" >
			<tr>
				<td class="style4">
				<a href="http://au.youtube.com/user/bombardieraddict123" style="color:white" class="style5">
				Bombardieraddict123</a></td>
			</tr>
			<tr>
				<td style="background-color:white">More Information Will go here</td>
			</tr>
		</table>

I want it to be centered in the middlof thepage. How can I do that?
thanks

It Stopped Centering

Similar Tutorials

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.

Centering Image Help Please

Similar Tutorials

Hi all
i have been trying to center a group of four images using html.
the code is:
PHP Code:
<img src="tennis.jpeg"align="center"width="100" height="100" title="Equipment needed for playing tennis." >
    <img src="snooker.jpeg"align="center" width="100" height="100" title="Snooker table within a snooker club where you play the sport ">
     <img src="Golf.jpeg" "align="center"width="100" height="100 title="The Famous last hole on the old corse St Andrews">
     <img src="Badminton.jpeg"align="center" width="100" height="100" title="Equipment needed for playing Badminton">

some how its not quite right any ideas where im going wrong?

TI AV.

Gaz.

Table Not Centering Right In Ie

Similar Tutorials

Hi everyone,

I couldn't really find a thread with this question... If there's already one with a solution to the problem, a link to the thread would be prefered over an answer here.

Basically, my problem is that a layout I made doesn't center properly in IE. I have an y-repeated background in the center of the page, and on top a table. In Firefox everything looks fine and dandy, but in IE the table is a few pixels off to the left causing an error in the alignment.

http://lastsong.sadil.net/

I don't really know how to fix it - I like it coded with tables better than with divs, so recoding it into divs won't do. (I am aware it doesn't validate on 6 points for those who care, but I can live with that for now...) If anybody has a solution to this problem, I'd love to hear it.

Thanks!

Need Help Centering Image

Similar Tutorials

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>

Centering Not Working In Ie7

Similar Tutorials

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 Page!? Help!

Similar Tutorials

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.