austinlikesdubstep Posted January 15, 2012 Share Posted January 15, 2012 Hi there, So I've had experience in designing site templates using CSS before, I've done it on about 6 sites over a course of 4 years. So I'm now working on this new one and for some odd reason, I can't get the site to align correctly. I'll give you an overview, then get into details after: I have created a container div (div.Container) and it is 65% wide, and I simply want to center it in the page. I should be able to know how to do this, but it's 2 AM, and I can't figure out what's going wrong. I set text-align:center within body stylings, but that didn't work. So I tried creating a div that covered the entire page, and centering it's contents (div.Envelope). That's where I am now. http://austinlindgren.com/david/ Here is the CCS for the above page: div.Envelope { width:auto; height:auto; text-align:center; } div.Container { text-align:center; border:1px solid black; width:65%; height:auto; } div.Header { background-color:#c3baba; width:100%; height:124px; } div.Content { background-color:#837a7a; width:90%; height:600px; } div.Footer { background-color:#5c5b5b; width:100%; height:30px; } I just simply want to get this Container div to be centered. If needed, here is the code for the page itself: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <link rel="stylesheet" href="style.css" type="text/css" /> <title>David Johnson Photography</title> </head> <body> <div class="Envelope" style="text-align:center;"> <div class="Container" style="text-align:center;"> <div class="Header"> <table width="100%"> <tr> <td style="width:*;text-align:left;text-valign:middle;font-family:Verdana;font-size:24px;"> David Johnson Photography </td> <td width="360px;"> <img src="images/dummylogo.jpg" alt=""> </td> </tr> </table> </div> <div class="Content"> </div> <div class="Footer"> </div> </div> </div> </body> </html> Alright, so can anyone direct me on how to center this page? Preferably without using the div.Envelope, I don't like that there. I just did it because I thought it might be my only option. Can someone show me how to center the text of the body so that the div.Container is in the center of the page? Thanks for any help in advanced, Austin Quote Link to comment Share on other sites More sharing options...
jason310771 Posted January 15, 2012 Share Posted January 15, 2012 remove the div.Envelope from your html and the css related to it and change your div.Container to this... div.Container { text-align:center; border:1px solid black; width:65%; height:auto; margin: 0 auto; } Quote Link to comment Share on other sites More sharing options...
austinlikesdubstep Posted January 15, 2012 Author Share Posted January 15, 2012 It worked! Gracias! One last thing, if you recheck the link now, the container is centered...why isn't the middle (darkish gray) box centered? Shouldn't the text align apply to every div tag within the Container? Gosh it's been a while since I've worked with CSS, I'm rusty at this stuff o.O haha Quote Link to comment Share on other sites More sharing options...
dodgeitorelse Posted January 15, 2012 Share Posted January 15, 2012 because text align is set to left in the <td> that has David Johnson Photography in it. Quote Link to comment Share on other sites More sharing options...
austinlikesdubstep Posted January 16, 2012 Author Share Posted January 16, 2012 because text align is set to left in the <td> that has David Johnson Photography in it. That didn't change anything. I'll try experimenting, but nothing I'm trying (changing the text align of different divs) is working, so I really don't know. I'll edit this with an update in a it. Quote Link to comment Share on other sites More sharing options...
dodgeitorelse Posted January 16, 2012 Share Posted January 16, 2012 try this .... div.Content { background-color:#837a7a; width:90%; height:600px; margin: 0px 0px 0px 45px; } the order is top, right, bottom, left Quote Link to comment Share on other sites More sharing options...
austinlikesdubstep Posted January 17, 2012 Author Share Posted January 17, 2012 Would that center it on every resolution? I'm always a little antsy about using px because with every different screen resolution it'll look different. Is there any place I can put the text-align:center tag in to make it center that div? Quote Link to comment Share on other sites More sharing options...
dodgeitorelse Posted January 17, 2012 Share Posted January 17, 2012 no it doesn't but this should work div.Content { background-color:#837a7a; width:90%; height:600px; margin: 0 auto; } and change <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> to <!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" xml:lang="en" lang="en"> Quote Link to comment Share on other sites More sharing options...
bspace Posted January 18, 2012 Share Posted January 18, 2012 or better still <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> and be up to date, it's html5 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.