2

On my website I have a center and a right column. The center and right columns are surrounded by a <div> element with id = wrap. The surrounding div element is centered using the following CSS technique: 

#wrap{
  position:absolute;
  left:50%;
  margin-left:-307px; /* 307px = half of 594px(width of #center_column) */
}

This works fine except that when the browser is resized to a width less than that of the surrounding <div> element then the left section of the page is cut off and cant be viewed by scrolling horizontally

Web_Designer
  • 72,308
  • 93
  • 206
  • 262
  • so you have a center aligned column using margin: 0 auto then you have a secondary column page to its right that hangs off it correct? both the center aligned column and secondary column dont move when you adjust the size of the browser? – m4tt1mus Mar 22 '11 at 22:10
  • If you're using position:absolute to center both, you shouldn't. – m4tt1mus Mar 22 '11 at 22:12

2 Answers2

1

you could try to give body or an overall wrapper if you have one a min-width of centre column (594px) + 2 x right column width

trouble is with a absolutely positioned layout the page doesn't actually know the divs exist, they're like post-it notes stuck on the screen, so you have to give it something "real" to scroll to

[Update]

I'm not quite sure how you're doing the positioning, but you shouldn't need to [absolutely] position the center column at all, then you can use the margin: 0 auto; method of centering.. then you put the right column inside the centered column, at the bottom, and position the right column off to the right.. the screen then keeps your layout centered and scrolls if the right sidebar gets covered over

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
 "http://www.w3.org/TR/REC-html40/strict.dtd">
<html>
<head>
<title> Centered with right Sidebar </title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<link rel="stylesheet" href="/" type="text/css" media="screen" charset="utf-8">
<style type="text/css" media="screen">
#wrap{
width: 594px; /* width of center column only */
margin: 0 auto;
position: relative;
border: 3px solid #eee;
height: 400px /* demo only add content for real height */
}

#rightcol {
position: absolute;
right: -260px; /* adjust to suit allowing for borders */
bottom: 0;
border: 3px solid #ff0;
width: 250px;
height: 300px /* demo only */
}

</style>
</head>
<body>
<div id="wrap">
 <div id="content">
    <h1>HTML Ipsum Presents</h1>
    <p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>

    <div id="rightcol">Right sidebar</div>
 </div>
</div>
</body>
</html>
Community
  • 1
  • 1
clairesuzy
  • 27,296
  • 8
  • 54
  • 52
0

another technique to center:

#wrap {
  width: 614px ;
  margin-left: auto ;
  margin-right: auto ;
}

and the div will always be visible or scrollable when the browser is resized.

manji
  • 47,442
  • 5
  • 96
  • 103
  • If I apply your code it will center the wrap and the center and right columns will be equally centered. This is not what I want. I want the right column to stick out to the right while the center column is centered. – Web_Designer Mar 22 '11 at 22:23
  • @inquisitive_web_developer you need to have a separate css class for the right column that absolutely positions it at the edge of the center column div. you also need to set position relative on the main center column so that the child column will be absolutely positioned based off the parent column, not the viewport. here is another post describing it: http://stackoverflow.com/questions/104953/position-an-html-element-relative-to-its-container-using-css – m4tt1mus Mar 22 '11 at 22:35