Menu
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?
581
Styling of an element such as background color does not affect the margin. Padding is affected by the styling of an element, such as background color.
Simply add overflow:hidden to #container
Note you can also accomplish what you want in a far simpler way:
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;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
