• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 117
  • Last Modified:

Div Not Centering

I am trying to center a div.  However; it keepshugging the right side of the page.
Here is the CSS.
#main {
	background-color:#fff;
	position:absolute;
	width:1000px;
	height:100px;
	margin-top:60px;
	margin-right:auto;
	margin-left:auto;
}

Open in new window


The HTML
 <div id='main'></div>

Open in new window


The page.
www.davidschure.com/about
0
DS928
Asked:
DS928
  • 3
  • 2
2 Solutions
 
GaryCommented:
Your cssmenu div is not closed screwing up the layout
0
 
COBOLdinosaurCommented:
Position:absolute without positioning values defaults to left:0;top:zero and the margin setting are irrelevant.  either use margins properties or fully defined positioning properties, not both.

Cd&
0
 
DS928Author Commented:
Got rid of Position Absolute.  Closed div, but.....the div is now centered but the Logo moved down.
0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
COBOLdinosaurCommented:
Yeah well position:fixed and float:left on the same element is probably confusing the hell out of the browser.

When you use position then you specify the position.  using anything that applies to the position of absolute or positioned elements  other than top, right, bottom and left is incorrect. and makes it impossible for the browser to render correctly.

Also there is no worse way then using position to do layout, there are dozens of more practical ways to doin things without creating the maintenance issues you always get when you are force to use position.  Position should be considered a last resort option, not a promary tool.

Cd&
0
 
DS928Author Commented:
Got rid of it all.  Almost there.
CSS for Logo
<style type="text/css">
		#Logo{ margin:6px 0px 0px 10px; float:left; opacity: 0.7;}
	</style>

Open in new window

CSS for white box.
#main {
	background-color:#fff;
	width:960px;
	height:500px;
	margin-top:50px;
	margin-right:auto;
	margin-left:auto;
}

Open in new window

The logo on the about.html is being pushed down from the top.  The last problem...I hope.
0
 
DS928Author Commented:
Took off the float as well.  Seems to be closer.  However not sure why the SMG is slightly different on each page.
0

Featured Post

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

  • 3
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now