Tweet
Hi,
I've wrapped all my main content, in a div and set that to margin:auto
When I re-size the browser from the left, it resizes the header, however when I re-size from the right, the header doesnt re-size.
What am I missing?
Thanks
<html>
<head>
<style type="text/css">
.wrapper {margin:auto;
background-image:url('http://borg.cc.gatech.edu/Software/bsubtract/Images/demo-reverselinear-black.jpg');
width:100%;
height:100%}
.wrappertwo {width:700px;
margin-left:250px;
margin-top:5px;
background-image:url('http://t3.gstatic.com/images?q=tbn:ANd9GcQBDSAFsf9EvoZ9Ad_a7EiLX26R-8mFAIKNNbO5FcnzTa5MlZPKig');}
.aa { float:right;
width:200px;
margin-top:-45px;
margin-right:5px;
display: }
.aa li {float:right;
background-color:white; }
.aa a {padding-right:20px;
padding-left:10px;
padding-top:10px;
padding-bottom:10px;
display:inline-block; }
h1 {color:black;
padding-left:220px; }
.pp {border-right:dashed;
border-width:1px; }
.ooo {padding-left:5px; }
.allheader {background-image:url('http://media.bigoo.ws/content/background/color_light_blue/color_light_blue_173.gif');
border-width:1px;
border-style:dotted; }
</style>
</head>
<body>
<div class="wrapper">
<div class="wrappertwo">
<div class="allheader">
<h1>An example website</h1>
<ul class="aa">
<li class="ooo"><a href="http://badabingbaby.com">Login</a></li>
<li class="pp"><a href="http://bbc.co.uk">Register</a></li>
</ul>
</div>
</div>
</div>
<body>
</html>
I've wrapped all my main content, in a div and set that to margin:auto
When I re-size the browser from the left, it resizes the header, however when I re-size from the right, the header doesnt re-size.
What am I missing?
Thanks
<html>
<head>
<style type="text/css">
.wrapper {margin:auto;
background-image:url('http://borg.cc.gatech.edu/Software/bsubtract/Images/demo-reverselinear-black.jpg');
width:100%;
height:100%}
.wrappertwo {width:700px;
margin-left:250px;
margin-top:5px;
background-image:url('http://t3.gstatic.com/images?q=tbn:ANd9GcQBDSAFsf9EvoZ9Ad_a7EiLX26R-8mFAIKNNbO5FcnzTa5MlZPKig');}
.aa { float:right;
width:200px;
margin-top:-45px;
margin-right:5px;
display: }
.aa li {float:right;
background-color:white; }
.aa a {padding-right:20px;
padding-left:10px;
padding-top:10px;
padding-bottom:10px;
display:inline-block; }
h1 {color:black;
padding-left:220px; }
.pp {border-right:dashed;
border-width:1px; }
.ooo {padding-left:5px; }
.allheader {background-image:url('http://media.bigoo.ws/content/background/color_light_blue/color_light_blue_173.gif');
border-width:1px;
border-style:dotted; }
</style>
</head>
<body>
<div class="wrapper">
<div class="wrappertwo">
<div class="allheader">
<h1>An example website</h1>
<ul class="aa">
<li class="ooo"><a href="http://badabingbaby.com">Login</a></li>
<li class="pp"><a href="http://bbc.co.uk">Register</a></li>
</ul>
</div>
</div>
</div>
<body>
</html>