Geek Answers Handbook

It is not possible to completely wrap the wrapper and center the element

I use the following code to create a wrapped shrink and centered page. Everything is fine if the browser window is wider than the maximum width. In this case, there are three floating paragraphs with a fixed width. If the window is wide enough so that everyone can float on the same line, the div is centered and wrapped correctly. But when the browser is already, and one of the paragraphs is wrapped on the next line, the div expands to the full width of the window and no longer shrinks. I have tried everything that I can think of, and am going to give up and move on if someone does not have a new idea. Oddly enough, it works well in ie7. Hover over your mouse.

<!doctype html>

<head>
<style type="text/css">

header, footer, nav, section, article { display: block; }

body
{
    font-size:1em;
    margin:0;
    padding:0;
    font-family: Verdana, Arial, Helvetica, Sans-Serif;
    color:#000;
    background:#ddd url(images/BG.jpg);
}

/*********** Start shrink wrapped and centered layout styles ************************/
#page {
    position:relative;
    overflow:hidden;
}
#container {
    float:left;
    position:relative;
    left:50%;
}
#content 
{

    float:left;
    position:relative;
    right:50%;
}
/*********** End shrink wrapped and centered layout styles ************************/
#content
{
    border:solid 4px #bbb;
}
p
{
    width:20em;
    background-color:red;
    float:left;
}
</style>
<body>
<div id="page">
  <div id="container">
    <div id="content">
        <p>p1</p>
        <p>p2</p>
        <p>p3</p>

    </div>
  </div>
</div>
</body>
</html>
+5
source share
2 answers

-. .

p {width:200px; height:20px; background:salmon; float:left; margin:10px; padding:10px;}
div {background:lightblue; overflow:auto; width:720px; margin:0 auto;}

@media screen and (max-width: 720px) {
 div{width:480px;}
}
@media screen and (max-width: 480px) {
 div{width:240px;}
}

0

: , text-align: center

0

More articles:


All Articles