Im having an issue where my background color for a child element is going past my parent elements borders. How could I remedy this?
.package {
border: 1px solid black;
min-height: 200px;
margin-bottom: 1rem;
border-radius: 20px;
}
.banner {}
.fedex {
background-color: #4D148C;
color: white;
border-bottom: 3px solid #FF6600;
}
.logo {
padding: 1rem;
}
<div class="package">
<div class="banner fedex">
<div class="logo"></div>
</div>
</div>
Edit: I should mention I tried adding the same border radius only to the top of banner but this then left a small gap of white space between the color and the border of the parent.
overflow:hidden will prevent the inner child elements from extending beyond the bounds of the parent.
.package {
border: 1px solid black;
min-height: 200px;
margin-bottom: 1rem;
border-radius: 20px;
overflow:hidden;
}
.banner {}
.fedex {
background-color: #4D148C;
color: white;
border-bottom: 3px solid #FF6600;
}
.logo {
padding: 1rem;
}
<div class="package">
<div class="banner fedex">
<div class="logo"></div>
</div>
</div>
Apart from using overflow: hidden, it's also possible to use contain: content, which tells other elements that the child elements inside that particular element will never affect other elements, and will also never be displayed outside the parent element.
.package {
border: 1px solid black;
min-height: 200px;
margin-bottom: 1rem;
border-radius: 20px;
/* ADDED */
contain: content;
}
.banner {}
.fedex {
background-color: #4D148C;
color: white;
border-bottom: 3px solid #FF6600;
}
.logo {
padding: 1rem;
}
<div class="package">
<div class="banner fedex">
<div class="logo"></div>
</div>
</div>
Related
Whenever I add a border smaller than 5px to a parent div there is a bit of whitespace at the bottom and to the right of the content. As shown in the picture below.The white space is visible here
Code Here:
body {
background: khaki;
margin: 10px;
}
.nav>div {
text-align: center;
font-size: 2rem;
color: white;
}
.st-div {
background: cadetblue;
}
.nd-div {
background: crimson;
}
.rd-div {
background: cadetblue;
}
.nav {
border: solid 3px orange;
}
<body>
<div class="nav">
<div class="st-div">Home</div>
<div class="nd-div">About us</div>
<div class="rd-div">Log Out</div>
</div>
</body>
In the following code when i specify margin-top for #thirdDiv, It doesn't work until i give it 36px.
What is the reason?
#Container {
border: 15px solid orange;
width: 350px;
}
#firstDiv {
display: inline-block;
border: 1px solid red;
font-size: 1em;
}
#secondDiv {
border: 1px solid green;
display: inline-block;
font-size: 2em;
}
#thirdDiv {
display: inline-block;
border: 1px solid pink;
font-size: 1em;
margin-top: 36px;
}
<div id="Container">
<div id="firstDiv"> a </div>
<div id="secondDiv"> b </div>
<div id="thirdDiv"> c </div>
</div>
Because the child elements of your Container element are based on the bottom of that div. If you add vertical-align: top to your child elements, any margin-top is possible. You can try it out in this CodePen where I copied you code and tidied the CSS up a bit. Note that you can choose to only put vertical-align: top in your #thirdDiv element. This way you can keep the other two divs in their original position.
What you are looking for is padding. The CSS margin properties are used to create space around elements, outside of any defined borders whereas the CSS padding properties are used to generate space around an element's content, inside of any defined borders.
Try the following instead of applying margin-top to #thirdDiv.
#Container {
padding-top: 36px;
border: 15px solid orange;
width: 350px;
}
#firstDiv {
display: inline-block;
border: 1px solid red;
font-size: 1em;
}
#secondDiv {
border: 1px solid green;
display: inline-block;
font-size: 2em;
}
#thirdDiv {
display: inline-block;
border: 1px solid pink;
font-size: 1em;
}
<div id="Container">
<div id="firstDiv"> a </div>
<div id="secondDiv"> b </div>
<div id="thirdDiv"> c </div>
</div>
You must specify a value for margin-top else it won't know how much margin to add.
What were typing for margin-top before, margin-top: ;?
What is your desired effect?
I'm working with bootstrap panel. PSD suggest that when I hover over a panel background color and content color will change. that's fine I can do that.
but how to extend hover-color in top and bottom? and content position should stay there!
<div class="row">
<div class="col-md-4">
<div class="panel">
</div>
</div>
</div>
.panel:hover{
background-color: #13BDFF;
}
Update
Just use outline CSS property which has excellent browser support (IE8+). Demo:
.panel:hover {
background-color: #13BDFF;
outline: 5px solid #13BDFF;
}
/* just styles for demo */
.panel {
padding: 10px;
background-color: lime;
}
<div class="panel">
This is panel
</div>
Original answer (not recommended way)
You can use transparent borders (also padding can help you with this) and negative margin for this:
.panel:hover {
background-color: #13BDFF;
border: 5px solid transparent;
margin-left: -5px;
margin-top: -5px;
}
/* just styles for demo */
.panel {
padding: 10px;
background-color: lime;
}
<div class="panel">
This is panel
</div>
https://jsfiddle.net/xkqvv92p/
Here's a version using padding on hover.
.rowArea {
height: 400px;
background-color: red;
display: flex;
align-items: center;
}
#container {
margin: auto;
width: 200px;
height: 300px;
background-color: white;
border-radius: 5px;
padding: 5px;
}
#container:hover {
padding: 30px 5px;
background-color: #13C3FF;
}
<div class="rowArea">
<div id="container">hi</div>
<div id="container">hi2</div>
</div>
Changing the border color and size might solve the issue.
please refer the sample fiddle :
.panel:hover{
background-color: #13BDFF;
border-color : #13BDFF;
border:10px solid #13BDFF;
}
https://jsfiddle.net/3wkjuzbk/1/
I am trying to make a product summary box for the following page:
I was playing around to set the border on the following divs:
<div style="border:1px solid black;" class="inner">
<div style="padding-bottom: 14px;border:1px solid black;" class="title">
The result looks like the following:
I would like to let it look like that:
Any suggestions how to set the divs properly? Or would it be better to design a backgroud image to fit the box?
I appreciate your replies!
You could use a tableinstead of DIVs whose cell borders you make visible.
Or use display: table , display: table-row and display: table-cell for the DIVs, again defining a border for the cell elements.
This is a 5-minute CSS solution:
* {
box-sizing: border-box;
font-family: sans-serif;
}
.product {
border: 2px solid #999;
border-radius: 2px;
width: 20em;
}
.product--header,
.product--image,
.product--rating {
width: 100%;
border-bottom: 2px solid #999;
}
.product--header h2, .product--header h3 {
text-align: center;
padding: 0.25em 0 0.5em;
margin: 0;
}
.product--image img {
width: 100%;
padding: 0.25em;
z-index: 1;
}
.product--image {
position: relative;
}
.product--pricetag {
position: absolute;
z-index: 2;
left: 0;
top: 1em;
color: white;
background: rgba(0, 0, 0, 0.75);
text-align: center;
width: 40%;
padding: 0.5em;
}
.product--rating p {
text-align: center;
}
.product--links {
width: 100%;
margin: 0.5em;
}
.product--links a.btn {
display: block;
color: white;
background: blue;
text-align: center;
width: 90%;
margin-left: 2.5%;
padding: 0.5em;
margin-bottom: 0.25em;
}
<div class="product">
<div class="product--header">
<h2>Test Product</h2>
<h3>Price Class: $$ | P3 | 14</h3>
</div>
<div class="product--image">
<img src="http://placekitten.com/200/200" alt="cat">
<p class="product--pricetag">
999 $
</p>
</div>
<div class="product--rating">
<p>Rating: 4/5</p>
</div>
<p class="product--links">
<a class="btn">Buy on Amazon</a>
<a class="btn">Other Sizes</a>
</p>
</div>
I wouldn't recommend a background frame image, because it's a pain to work with and loading it is a waste of bandwidth.
Put four borders on the container, then just add border-bottom in each child, except on the last.
.container-bordered {
border: 2px solid red;
}
.container-bordered > div:not(:last-of-type) {
border-bottom: 2px solid red;
}
https://jsfiddle.net/cqjxuype/
I have a footer div with inner span buttons.
Each button have margin-right: 20px and the .footer element has padding: 0 13px.
I want to prevent the margin-right of the most right button by setting negative margin-right to its parent.
How could I get it with margin-right?
.footer {
border: 2px solid blue;
padding: 0 13px;
width: 120px;
text-align: right;
background-color: yellow;
}
.btn {
border: 1px solid black;
margin-right: 20px;
background-color: red;
}
<div class="footer">
<span class="btn">Btn1</span>
<span class="btn">Btn2</span>
</div>
I am not looking for a solution with the last child CSS pseudo-class.
You need to add another container child of .footer and apply a negative margin-right to that element. This approach is also described here:
.footer {
border: 2px solid blue;
padding: 0 13px;
text-align: right;
background-color: yellow;
overflow:hidden;
}
.footer > div {
margin-right:-33px;
}
.btn {
border: 1px solid black;
margin-right: 20px;
background-color: red;
}
<div class="footer">
<div>
<span class="btn">Btn1</span>
<span class="btn">Btn2</span>
</div>
</div>
Note you also need to a d overflow:hidden; to the .footer element to prevent horizontal scrollbar.