Page cut off with center technique
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
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>
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.
加载中,请稍侯......
精彩评论