Issue with ASP.NET and CSS- Layout isn't centered

  • (2 Pages)
  • +
  • 1
  • 2

17 Replies - 2371 Views - Last Post: 10 May 2011 - 08:23 AM Rate Topic: -----

#16 Nakor  Icon User is offline

  • Professional Lurker
  • member icon

Reputation: 444
  • View blog
  • Posts: 1,492
  • Joined: 28-April 09

Re: Issue with ASP.NET and CSS- Layout isn't centered

Posted 09 May 2011 - 05:50 AM

just noticed you don't have a Doctype specified. Try adding

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">



just before the <html> tag


Info on Doctypes

basically though the browser doesn't know what standard to apply to the html and css so it doesn't render correctly.

This post has been edited by Nakor: 09 May 2011 - 06:24 AM

Was This Post Helpful? 0
  • +
  • -

#17 souptoy  Icon User is offline

  • D.I.C Head


Reputation: 54
  • View blog
  • Posts: 244
  • Joined: 17-January 08

Re: Issue with ASP.NET and CSS- Layout isn't centered

Posted 09 May 2011 - 08:24 AM

Try this:
#wrap
{
    width: 99%; /* This is the width of the wrap */
    /* This is set to auto so that the layout will be centered */
    /*margin: 0 auto; 
    border: 1px #000 solid;
    background: white;
    height: 700px;
    position: absolute;*/
}
#wrapContents
{
    width:900px;
    margin:0 auto;
    border: 1px #000 solid;
    background: white;
    height: 700px;
}



Inside your wrap div, place another div with an ID of wrapContents. Your other divs will go inside of wrapContents. Margin for the wrap div will center containing elements, not center the wrap div itself. Once you put a second container div in there named wrapContents, it should center that container.

Please let us know if this solved your problem and mark as helpful if it did.

This post has been edited by souptoy: 09 May 2011 - 08:25 AM

Was This Post Helpful? 0
  • +
  • -

#18 souptoy  Icon User is offline

  • D.I.C Head


Reputation: 54
  • View blog
  • Posts: 244
  • Joined: 17-January 08

Re: Issue with ASP.NET and CSS- Layout isn't centered

Posted 10 May 2011 - 08:23 AM

View Postsouptoy, on 09 May 2011 - 09:24 AM, said:

Try this:
#wrap
{
    width: 99%; /* This is the width of the wrap */
    /* This is set to auto so that the layout will be centered */
    /*margin: 0 auto; 
    border: 1px #000 solid;
    background: white;
    height: 700px;
    position: absolute;*/
}
#wrapContents
{
    width:900px;
    margin:0 auto;
    border: 1px #000 solid;
    background: white;
    height: 700px;
}



I woke up this morning thinking about this for some reason and wasn't really thrilled about how I explained the solution to this problem. So here goes another attempt with a slightly different solution to avoid using more container divs:

body,
html
{
    margin:auto;
    padding:0;
    background: black; 
    font-family:Helvetica, Arial, sans-serif;
    width:100%;
}
#wrap
{
    width: 900px; /* This is the width of the wrap */
    margin: 0 auto; /* This is set to auto so that the layout will be centered */
    border: 1px #000 solid;
    background: white;
    height: 700px;
}



By setting the width of the body tag (a container for everything else), we are explicitly telling the browser to use all of the available browser space horizontally. With that set, the margin:0 auto; style knows the correct horizontal width to center on; the important thing to remember is that it will center based on the parent container's width. As stated in my initial post about position messing people up, it has here, as well; position is not required in this particular case.

It looks like the initial solution worked for the person that posted the question, even if it was a little sloppy (sorry I'm at work!). I feel like this is a cleaner solution to the problem and hopefully it's a little easier to understand.

PS - Nakor is correct: you need/should always declare the DOCTYPE for proper rendering.
Was This Post Helpful? 0
  • +
  • -

  • (2 Pages)
  • +
  • 1
  • 2