CODEWITHSUNDEEP
htmlcss
Adam Ashwal
Adam Ashwal

Reputation: 1472

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 want 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!

Upvotes: 2

Views: 134

Answers (2)

H6_
H6_

Reputation: 32788

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>

Upvotes: 1

Thorgeir
Thorgeir

Reputation: 4433

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>

Upvotes: 4

Related Questions