CSS border problem?
I would like to preface this with I'm a complete newb, so keep that in mind. So what I'm trying to do is have a main content area and I 开发者_如何学JAVAwant that a specific width, lets say 800px. And to the left and right of it I want just a black border. Now I want it so when someone resizes the page the two borders change width to fill the entire window but my main content box stays the same. Couldn't figure it out. thanks for the help!
Try this:
<html>
<head>
<style>
html {height:100%;}
body {background-color:#000000;height:100%;margin:0px;padding:0px;}
#content{background-color:#FFFFFF;width:800px;margin:auto;height:100%;}
</style>
</head>
<body>
<div id="content">content</div>
</body>
</html>
If this is your HTML code:
<div id="outer-container">
<div id="main-content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
</div>
you could set the CSS to the following and it should work.
<style type="text/css">
#outer-container {
background-color: black;
height: 200px;
}
#main-content {
background-color: white;
width: 800px;
margin: 0 auto 0 auto;
height: 200px;
}
</style>
加载中,请稍侯......
精彩评论