This question already has answers here:
How to make an element width: 100% minus padding?
(15 answers)
Closed 2 years ago.
The div for the red box and the div for the green and purple boxes are both set to the same max-width of 75rem. I'm stumped on how the red box is displaying a max-width of nearly 1250px when stretched on a wide monitor.
JSFiddle
I'm applying this helper class to both divs.
.wrapper {
margin: auto;
max-width: 75rem;
}
Add CSS box-sizing:border-box to your .hero will solve the issue.
What happens
As .hero has padding 20px on left and right. Your whole div becomes 75rem + 40px
box-sizing:border-box makes sure that padding should be included in width. So your div's actual width will become 75rem - 40px
More on box sizing: https://www.w3schools.com/css/css3_box-sizing.asp
Related
This question already has answers here:
How is the margin-top percentage calculated?
(3 answers)
Closed 3 years ago.
Why does top/bottom margin set to % change when resizing the screen horizontally?
Here is an example of a layout with boxes, and I've set all of the margins to 1.45%. I do understand why the left and right margins change, but why do the top and bottom margins change when I resize the screen HORIZONTALLY? Is there any way to implement this so that they only change when resizing screen VERTICALLY?
https://jsfiddle.net/c60ymrfu/2/
.item {
width:30%;
margin-left:1.45%;
margin-right:1.45%;
margin-top: 1.45%;
margin-bottom: 1.45%;
}
You can use vh here
vh: is viewport height which will be only reacting when the height change not on width change.
.item {
width:30%;
margin-left:1.45%;
margin-right:1.45%;
margin-top: 1vh;
margin-bottom: 1vh;
}
Read more about units here
https://developer.mozilla.org/en-US/docs/Web/CSS/length
This question already has answers here:
CSS - how to overflow from div to full width of screen
(3 answers)
Closed 4 years ago.
Let me give an example of my problem: I'm working with magento (just explaining) and i want to make a full-width banner. Perhaps, Magento by default place a
class="container"
div that limit the width for the custom grid they have. So, i don't know what to do to get the full-width banner when it's placed (forced by Magento structure) inside a div with max-width setting.
In fact, i did some "margin" and "padding" configuration, but i'm trying to avoid this exaustive path just for one banner.
Here is my example: https://jsfiddle.net/mq4sr8d8/1/
<div class="background-size"><div class="outside"><div class="inside"></div></div></div>
You can achieve what you want in - if the outside div is centred, you need the following styles for inside:
.inside {
background-color: #ababab;
width: 100vw; /* make as wide as viewport */
margin-left: 50%; /* move it 50% right width of container */
transform: translateX(-50%); /* move it 50% left width of itself (to make it start at beggining of screen */
height: 100%;
}
Centred container fiddle
If your container is left aligned, just add the width:100vw
Left container fiddle
This question already has answers here:
How to make a div 100% height of the browser window
(40 answers)
Closed 8 years ago.
I'm using Bootstrap for my responsive layout. Within the .container I want to have a div which isn't limited to the width of the container. Furthermore I want it to be stretched over the full body. I could place the div outside the .container but I don't want to mess around with absolute positioning or similar.
How can I make a div 100% to the body, even if the parent div is not filling the whole width of the body.
.div {
width: 100%;
height: 6px;
}
Thanks
Use class .container-fluid instead of .container. Bootstrap provide .container-fluid class to make full screen div.
If you are specific to some requirement please share code as well to understand better.
This question already has answers here:
Image inside div has extra space below the image
(10 answers)
Closed 8 years ago.
When you have images with
width: 100%;
height: auto;
contained in a box, depending on the aspect ratio(I think) of the image and the dimensions of the box it will not always populate the entire height of the box.
You don't really notice this when there is just one row of these images side by side but if they go onto a new row you can see a few pixels space between the top and bottom row. The boxes are touching but the images in the box are not taking up all of the height of the box.
I can't set a fixed height and width on these boxes/images as they are supposed to be fluid.
I'd like to get a solution to this without Javascript if possible but if that's the only solution I will take it.
JSFIDDLE
http://jsfiddle.net/BeYqu/
You can set display:block to images
img {
width: 100%;
height: auto;
display:block; /* add this */
}
Hope you need this.
Demo
This question already has answers here:
Closed 11 years ago.
Possible Duplicate:
How to center horizontally div inside parent div
I have the following:
<div id="a">
<div id="b">abc</div>
</div>
My first div "a" is styled to be 100% of the screen width. I would like to make div "b" appear horizontally in the center. I know I can do this with tables but is there a way to do this with just div's and CSS?
Hope someone can help
You can set the margin-left and margin-right properties to auto. According to CSS2.1 ยง 10.3.3 you need to specify a width (other than auto) though:
#b {width: 300px; margin: 0 auto;}
you can do that by setting a fixed width to the child div such as and setting left/right margin auto. Like:
div#b{width:40px;margin:0 auto;}
The preferred way to do this would be to set the width of the child div and set the left and right margin to auto. Auto assigns equal amount to both left and right margins.
div#b { width: 100px; margin: 0 auto;}
If you are not sure about the width of the child, you can also assign text-align:center to the parent div. This might not be the best way but gets the job done.
div#a {text-align:center;}