smithmr8 Posted November 6, 2009 Share Posted November 6, 2009 Hi, I'm trying to layout a website using CSS and DIV tags. I want them to be central to the page, but I can't seem to get them to do it no matter what I try. Thought I'd ask some professional's CSS File body { background-color:#999999; font-family:Tahoma; font-size:10pt; } #main { margin-left: auto; margin-right: auto; width: 800px; } #header { background: #0f0; position: absolute; top: 0px; left: 0px; width: 800px; height: 100px; } #leftcol { background: #f00; position: absolute; top: 100px; left: 0px; width: 150px; height: 500px; } #rightcol { background: #f00; position: absolute; top: 100px; left: 650px; width: 150px; height: 500px; } #content { background: #fff; position: absolute; top: 100px; left: 150px; width: 500px; height: 500px; } #footer { background: #0f0; position: absolute; top: 500px; left: 0px; width: 800px; height: 100px; } HTML Code <html> <head> <title>Home</title> <LINK href="style.css" rel="stylesheet" type="text/css"> </head> <body> <div id="main"> <div id="header">Header Section</div> <div id="leftcol">Left Section</div> <div id="content">Content Section</div> <div id="rightcol">Right Section</div> <div id="footer">Footer Section</div> </div> </body> </html> Any help would be greatly appreciated. Quote Link to comment Share on other sites More sharing options...
cags Posted November 6, 2009 Share Posted November 6, 2009 That looks about right. Setting... width: 800px; margin: 0 auto; ... should center the div. That is essentially what you have. If it isn't centered are you sure it's not using a cahced version of your css. Try forcing a refresh. Quote Link to comment Share on other sites More sharing options...
xgrewellx Posted November 6, 2009 Share Posted November 6, 2009 I know your problem, you are using position: absolute; on your structure. This sets those items to go outside of their container, as absolute is relavent to your browser window, not your container. If you are trying to make things left and beside eachother in the container, use this: float: left; display: block; Quote Link to comment Share on other sites More sharing options...
cags Posted November 6, 2009 Share Posted November 6, 2009 Actually absolute positioning is not relative to the browser window thats what 'Fixed' is for.. It's relative to the first parent with a value other than static. But yes, I didn't read that far down the css. Absolute positioning can certainly give bahavior you don't expect. Quote Link to comment Share on other sites More sharing options...
Zane Posted November 6, 2009 Share Posted November 6, 2009 if you make something's position absolute then margins and padding are out of the picture and you have to rely on the directional properties to position your div. So if your div is absolutely positioned you have to set it's left and top properties to 50%. .example { position:absolute; left:50%; top:50%; } If you chose the other route, static positioning (default).. you could simply set your margin to "0 auto"; .example { margin: 0 auto; } Quote Link to comment Share on other sites More sharing options...
xgrewellx Posted November 6, 2009 Share Posted November 6, 2009 Actually absolute positioning is not relative to the browser window thats what 'Fixed' is for.. Absolute positioning can certainly give bahavior you don't expect. Thats what I meant, in his application, it will behave as fixed is, just not stay put when scrolled. This is an unintended side effect of the css model. Try what I put up there and see how that works out for you Quote Link to comment Share on other sites More sharing options...
haku Posted November 6, 2009 Share Posted November 6, 2009 Absolute positioning really shouldn't be used for positioning - it just doesn't work well at all. But if you are absolutely determined to use it, wrap all your content in a div called 'wrapper'. Then use this this css: #wrapper { width: ___px; //make this just wide enough to contain all the divs it's wrapping around position: relative; margin:0 auto; } Quote Link to comment Share on other sites More sharing options...
JJ2K Posted November 6, 2009 Share Posted November 6, 2009 Yeah he has this already with his main DIV, he just needs to add position:relative; to #main Quote Link to comment Share on other sites More sharing options...
Dorky Posted November 7, 2009 Share Posted November 7, 2009 relative for the parent always and relative or absolute inside the div. also ie wont center divs by margin unless you use a transitional doctype. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.