OK, I'm stumped. I can't get my div (#maincontainer) to center. It's fine at some window sizes and some browsers (Ffx, 1024x768) , and totally off-center at others (Chrome, >1200px wide). The centering is very important to the design, and I am stumped. (This is not really my day job, as may be obvious.)

maincontainer has two vertical columns, called #leftcol and #rightcol. Rightcol contains text, leftcol an image, and some solutions I've tried have caused #rightcol to appear below the image.

Here's the code I'm working with. Hoping this is obvious to everyone but me. There's a similar question elsewhere here but I can't get the solution to actually work for me.

Stylesheet:

    #maincontainer {
    position: absolute;
    top: 65px;
    width: 960px;
    left: 50%;
    margin-left: -480px;} 

#leftcol {
    float: left;
    position: relative;
    margin-top: 0px;
    margin-left: 0px;
    text-align: left;
    width: 650px;
    font-size: small;
    text-decoration: none;
    color: #000;
}


#rightcol {
    float: left;
    position: relative;
    margin-top: 0px;
    margin-right: -1px;
    padding-left: 25px;
    text-align: left; 
    max-width: 200px;
    font-size: small;
    text-decoration: none;
    color: #000;}

HTML:

<body>
<div id="topnav">
<div id="topnavtype"> 
<div id="topnav1">Home</div><div id="topnav2"><a href="about.html">About</a></div><div id="topnav3"><a href="projects.html">Projects</a></div><div id="topnav4"><a href="partners.html">Partners</a></div></div></div>
<div id="maincontainer">

<div id="leftcol"> <h1>plumb/dsgn/mktng</h1><img src="boxes2.jpg" alt="projects" />
</div>
<div id="rightcol">
<h1>title</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur lobortis suscipit est ut aliquet. Nullam egestas accumsan urna nec viverra. Nam ut tellus ligula. Fusce nisl justo, consectetur vel mattis eu, semper ac magna. Aenean nec odio et neque porttitor rutrum. Fusce feugiat placerat tortor, ut gravida lacus interdum id. Nullam ornare ante tristique risus porttitor imperdiet. Maecenas mollis, purus non ultricies elementum, sapien lectus tincidunt elit, a eleifend enim nibh id velit. Vivamus nunc purus, dignissim sed faucibus non, feugiat at ipsum. Donec euismod tempus imperdiet.</p>
</div>
</div>
</body>

1 answer

4
points
This was chosen as the best answer

I see you are using the centering method with absolute positioning. It can be handy but has one big flaw; it clips content if the viewport gets to small!.

I recommend you use the margin: 0 auto; solution instead, like so:

<div id="content"> <!-- This div is wrapping everything on the page inside the body-element -->
  <!-- Your divs, columns and content here. Everything in the page.  -->
</div>

The CSS:

#container {
   width: 960px;
   margin: 0 auto;
}

By setting the top and bottom margins to 0px and the left and right margin to auto you center the div inside the body-element.

Note: you will have to remove your previous attempt to center the div (the absolute positioning and stuff).

You could also be include a be nice to IE 5 and 5.5 rule as well. As it misinterpret the auto margins:

body {
  text-align: center; /* new rule */
} 

#container {
    width: 960px;
    margin: 0 auto;
    text-align: left; /* new rule */
}

IE does however also misinterpret the centering of divs, so using text-align actually centers the div inside the body-element. But we don't wan't the text on the entire page to be centered so wo reset the text-align on the #container element.

Answered about 7 years ago by Jens Hedqvist