How to make a background color not overlap a border?
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;
}
Why does that border not covering up its contents
That is because of the float: left
Check out how I did it.
.square{ padding-bottom:30%; width:30%; margin:10px; background-color:brown; } .container{ height:100%; max-width:600px; margin:20px auto; border:2px solid red;
} .row { display: flex; flex-wrap: wrap; }<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> <div class="container">
<div class="row"> <div class="square"></div> <div class="square"></div> <div class="square"></div> </div>
<div class="row"> <div class="square"></div> <div class="square"></div> <div class="square"></div> </div> </div>
</body></html>Related Topics
Shorthand for Wrapping a Swift Variable in an Optional
Passing in Variable Number of Args from One Function to Another in Swift
Issue with Returning a Directory Enumerator from Nsfilemanager Using Enumeratoraturl in Swift
Swift Display Image UIimageview
Difference Between Sort and Sortinplace in Swift 2
iOS Swift, Aws Cognito User Pool, Unable to Refresh Access Token
Produce Sounds of Different Frequencies in Swift
Swift 2.0 Replicate Objc_Association_Retain
Swift System Version Checking on Ubuntu
Where Do I Register a Valuetransformer in Swift
Swift Protocol Extension Implementing Another Protocol with Shared Associated Type
Swift: Binary Operator '==' Cannot Be Applied to Operands of Type "Protocol"
Type 'Bundle' Has No Member "Module"
How to Create a Cocoapod with .Swift