CODEWITHSUNDEEP
htmlcss
user3623414
user3623414

Reputation: 71

How to make a background color not overlap a border?

im new to this site, and html/css aswell. Im trying to make some simpel stuff here, but im already stuck at this.

Please have a look at this: http://jsfiddle.net/SoronSR/u6GEh/

HTML:

<body>
<div id="container">
    <div id="column1-wrap">
        <div id="column1">Column 1</div>
    </div>
    <div id="column2">Column 2</div>
    <div id="clear"></div>
</div>
</body>

CSS:

#container {
border:5px solid #990000;
border-radius:10px;
}
#column1-wrap {
    float: left;
    width: 100%;
}
#column1 {
    background-color: cyan;
    margin-right: 200px;
}
#column2 {
    background-color: lime;
    float: left;
    width: 200px;
    margin-left: -200px;
}
#clear {
    clear: both;
}

The background color is overlapping the border at the edges. I want the background color to stay within the border. Can anyone help me with this?

Upvotes: 7

Views: 17122

Answers (3)

bakee
bakee

Reputation: 28

Please check: http://jsfiddle.net/u6GEh/4/ 

#container {
margin-top:80px;
border:5px solid #990000;
border-radius:10px;
height:30px;
padding:10px;
}

. I think you can get the idea how padding's are making a distance of your background to the border. Change the values until you are happy.

Upvotes: 0

donkey
donkey

Reputation: 4363

Is this what you want? JSFiddle

Complete CSS:

#container {
border:5px solid #990000;
border-radius:10px;
}
#column1-wrap {
    float: left;
    width: 100%;
}
#column1 {
    background-color: cyan;
    margin-right: 200px;
    border-bottom-left-radius: 5px;
    border-top-left-radius: 5px;

}
#column2 {
    background-color: lime;
    float: left;
    width: 200px;
    margin-left: -200px;
    border-bottom-right-radius: 5px;
    border-top-right-radius: 5px;
}
#clear {
    clear: both;
}

Upvotes: 0

SW4
SW4

Reputation: 71150

Simply add overflow:hidden to #container

Demo Fiddle

Note you can also accomplish what you want in a far simpler way:

Demo Fiddle

HTML

<div id="container">
    <div id="column2">Column 2</div>
    <div id="column1">Column 1</div>
</div>

CSS

#container {
    border:5px solid #990000;
    overflow:hidden;
    border-radius:10px;
}
#column1 {
    background-color: cyan;
    overflow:hidden;
}
#column2 {
    background-color: lime;
    float: right;
    width: 200px;
}

Upvotes: 11

Related Questions