I have a row of divs that each contain one image. The image height is set to 100% for each image and each div has a padding-left of 20px, except for the last div which has no padding. Because the last div does not have padding and the img width is set to 100%, the last image appears taller than the other images. I would like to fix this but I am not sure how.
Here is a jsfiddle that shows a visual representation of the problem.
HTML :
<div class="grid">
<div class="col-1-4">
<img src="" />
</div>
<div class="col-1-4">
<img src="" />
</div>
<div class="col-1-4">
<img src="" />
</div>
<div class="col-1-4">
<img src="" />
</div>
</div>
CSS :
img {
width: 100%;
}
*, *:after, *:before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body {
margin: 0px;
}
[class*='col-'] {
float: left;
padding-right: 20px;
}
[class*='col-']:last-of-type {
padding-right: 0px;
}
.grid {
width: 100%;
max-width: 940px;
min-width: 755px;
margin: 0 auto;
overflow: hidden;
}
.grid:after {
content: "";
display: table;
clear: both;
}
.col-1-4 {
width: 25%;
}
I'd switch to a (percentage-based) margin for your gutters, like so:
[class*='col-'] {
float: left;
margin-right: 4%;
}
[class*='col-']:last-of-type {
margin-right: 0;
}
.col-1-4 {
width: 22%;
}
Example: http://jsfiddle.net/sknf7/3/
You have this in your CSS
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
border-box means the size of an element is its height/width and its padding. So if your image is 100px tall with 10px padding at top and bottom, it'll only show as 80px tall. This is what's causing your issue.
The alternative is content-box, where the padding is added on to the height or width. So 100px + 10px padding top and bottom would be 120px tall instead.
One way to fix it is make the divs content-box, and slightly narrow as a result (to compensate for increased padding width).
[class*='col-'] {
box-sizing: content-box;
-moz-box-sizing:content-box;
}
.col-1-4 {
width: 23%;
}
It's because you use box-sizing: border-box;, you can either remove this or use margin instead of padding. (either way you need to adjust your grid)
border box removed:
http://jsfiddle.net/sknf7/1/
margin instead of padding:
http://jsfiddle.net/sknf7/2/
Paul's answer certainly works, however you may want to consider improving the compatibility of/shortening your CSS by re-working this a bit. Those *col wildcard selectors won't work in IE8 or earlier
.col-1-4 {
width: 22%;
margin-right: 4%;
float: left;
}
.col-1-4:last-child
{
margin-right: 0;
}
The above would get you the same effect
Related
My problem is that I am trying to use padding in my CSS so that the two divs inside my div are responsive at 50% each. But together they obviously are bigger than 100%. I know this is probably the paddings fault, but I don't know how to fix it.
CSS:
.columns {
max-width:100%;
width:100%;
display:inline-block;
text-align:left;
}
.col1 {
width:50%;
float:left;
padding-left:100px;
}
.col2 {
width:50%;
float:right;
padding-right:100px;
}
HTML:
<div class="columns">
<div class="col1">
</div>
<div class="col2">
</div>
</div>
By default the box model will use padding and border to expand an element beyond a specified width. To keep the paddings/borders from pushing outward, and contain them inward, use box-sizing: border-box;
.columns {
max-width: 100%;
width: 100%;
display: inline-block;
text-align: left;
}
.col1 {
width: 50%;
float: left;
padding-left: 100px;
}
.col2 {
width: 50%;
float: right;
padding-right: 100px;
}
.col1,
.col2 {
box-sizing: border-box;
}
<div class="columns">
<div class="col1">
</div>
<div class="col2">
</div>
</div>
In situations like these, it's useful to put this rule at the beginning of your styles:
* {
box-sizing: border-box;
}
It sets everything to box-sizing: border-box;, which means that the borders and paddings are included in the width/height settings, i.e. a container with width: 200px, border: 1px and padding 10px will really be 200px wide, including borders and padding (and not 222px, as it would be without box-sizing: border-box).
I tried to create CSS grid like bootstrap col.
I want to add a padding of 15px from the left and the right. But when I add the attribute it breaks the float (makes it to not stand side by side).
Here is the example:
https://jsfiddle.net/t29q1gcL/
Why didn't it work?
.grid-4{
float: left;
width: 40%;
background: red;
padding: 0 15px;
}
.grid-6{
float: left;
width: 60%;
background: blue;
padding: 0 15px;
}
add this to your css, reference link http://www.w3schools.com/cssref/css3_pr_box-sizing.asp
* {
box-sizing:border-box;
-webkit-box-sizing:border-box;
-ms-box-sizing:border-box;
-moz-box-sizing:border-box;
}
check with the working fiddle https://jsfiddle.net/d8mrdz7x/
Add: "box-sizing: border-box;"
.grid-4{
float: left;
width: 40%;
background: red;
padding: 0 15px;
box-sizing:border-box;
}
.grid-6{
float: left;
width: 60%;
background: blue;
padding: 0 15px;
box-sizing:border-box;
}
.clearfix{
clear: both;
}
This is because you set width for content area, and content area is inside the padding, border and margin. So when you specify padding, total width would be 60% + 15px.
You can get around it by using nested cell:
/* remove padding from grid-X classes */
.cell {
padding: 0 15px;
}
<div class="grid-6">
<div class="cell">
<p>content for grid6</p>
</div>
</div>
(I've forked your jsfiddle here: https://jsfiddle.net/9ss09b15/)
You can also add box-sizing:border-box; to your grid-X classes, which will make it include padding and border in width, but it still won't include margin.
If padding is a constant, you can use calc() function to assign a calcutated width. Check below example.
.grid-4 {
float: left;
width: calc(40% - 30px);
/* 30px = 15px(padding-right) + 15px(padding-left) */
background: red;
padding: 0 15px;
}
.grid-6 {
float: left;
width: calc(60% - 30px);
background: blue;
padding: 0 15px;
}
.clearfix {
clear: both;
}
<div class="grid-4">
<p>content for grid4</p>
</div>
<div class="grid-6">
<p>content for grid6</p>
</div>
<div class="clearfix"></div>
Updated fiddle: https://jsfiddle.net/t29q1gcL/11/
Use box-sizing:border-box; style. Because The box-sizing property is used to tell the browser what the sizing properties (width and height) should include.
In width calculation formula is width = margin-left -padding-left + width + margin-right -padding-right + border
In your css style total width morethan 100% You have use 60% , 40% and padding 30px. so, it's break.
Use CSS3 box-sizing Property
The box-sizing property is used to tell the browser what the sizing properties (width and height) should include.
Should they include the border-box? Or just the content-box (which is the default value of the width and height properties)?
Instead of calculating width by including padding and border, the box-sizing property in combination with the border-box value uses the width property as the actual rendered width.
Example:
.sidebar {
box-sizing: border-box;
width: 200px;
padding: 20px;
border: 1px solid #DDD;
}
Any padding or border that’s applied will not be added to the rendered width. Instead, it will automatically subtract from the space that’s available in the content area. This results in code that is far more readable. Here’s an image that helps illustrate how box-sizing: border-box calculates widths.
Reference
https://css-tricks.com/box-sizing/
http://www.w3schools.com/cssref/css3_pr_box-sizing.asp
http://blog.teamtreehouse.com/box-sizing-secret-simple-css-layouts
.grid-4{
float: left;
width: 40%;
background: red;
padding: 0 15px;
box-sizing: border-box;
}
.grid-6{
float: left;
width: 60%;
background: blue;
padding: 0 15px;
box-sizing: border-box;
}
.clearfix{
clear: both;
}
<div class="grid-4">
<p>content for grid4</p>
</div>
<div class="grid-6">
<p>content for grid6</p>
</div>
<div class="clearfix"></div>
I make grid system and i have encountered "strage" behaviour of block
for example
HTML:
<div class="l_row">
<div class="l_cell"></div>
<div class="l_cell"></div>
<div class="l_cell"></div>
<div class="l_cell"></div>
</div>
CSS:
.l_row {
min-width: 0px;
width: 100%;
max-width: 100%;
margin: 2rem auto;
}
.l_row:before, .l_row:after {
content: " ";
display: table;
}
.l_row:after {
clear: both;
}
.l_cell {
float: left;
padding-right: 15px;
width: 25%;
}
.l_row .l_cell:last-child {
padding-right: 0px;
}
And if .l_cell have some content at least one symbol 1, a, - works well, but if .l_cell is empty it collapses to width:0 and ignoring width in css
Your layout can be fixed with a few minor adjustments.
(1) If you add padding to .l_cell, this will increase the box width and the four .l_cell blocks with width 25% will not fit on a single line. You can fix this by using box-sizing: border-box which will force .l-cell to keep the over width to 25% while also including the 20px right padding.
(2) The "zero collapse width" effect is due to the nature of the floats. Since you did not specify a height or minimum height, any float without content will have zero height but with 25% width. If you have a sequence of floats as in your example, the left edges of the floats will be positioned to the left as far as possible until they hit the right edge of a previous float. If a float has zero height, it has no right edge, to it appears to have zero width. If you add a min-height value, all the floats will position themselves as you expect.
.l_row {
min-width: 0px;
width: 100%;
max-width: 100%;
margin: 2rem auto;
}
.l_row:before, .l_row:after {
content: " ";
display: table;
}
.l_row:after {
clear: both;
}
.l_cell {
box-sizing: border-box;
float: left;
padding-right: 20px;
width: 25%;
min-height: 20px;
}
.l_cell:nth-child(odd) {
background-color: beige;
}
.l_cell:nth-child(even) {
background-color: lightblue;
}
.l_row .l_cell:last-child {
padding-right: 0px;
}
<div class="l_row">
<div class="l_cell">x1</div>
<div class="l_cell"></div>
<div class="l_cell">x3</div>
<div class="l_cell"></div>
</div>
use   inside it to achieve what you are looking for.
For instance,
<div class="l_cell"> </div>
This considers the div as a block with content.
Hope this helps.
Finded...
https://css-tricks.com/make-sure-columns-dont-collapse-horizontally/
.col {
border-top: 1px solid white;
border-bottom: 1px solid white;
padding-top: 1rem;
padding-bottom: 1rem;
min-height: 1px;
}
this is my code: http://jsfiddle.net/Loaz7gcu/
I have three inputs which should fit on one line, equaling 100% but instead one sits on the next line. I have cleared all the margins and padding but still no luck. What am I doing wrong here?
My example CSS:
* {
margin: 0;
padding: 0
}
.one {
width: 30%;
margin-right: 10%
}
.two {
width: 30%;
margin-right: 10%
}
.three {
width: 20%
}
You could do it by using box-sizing: border-box; and display:inline-block; to input and use font-size:0px; to div for remove the white-space and then set font-size: 16px; to input.
JSFiddle - DEMO
HTML:
<div style="width: 100%; font-size:0px;">
<input class="one">
<input class="two">
<input class="three">
</div>
CSS:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
input {
display:inline-block;
font-size:16px;
}
.one {
width: 30%;
margin-right: 10%
}
.two {
width: 30%;
margin-right: 10%
}
.three {
width: 20%
}
There are two things you should take care about:
In inline flow, there's a whitespace between inline level elements.
UAs apply a border to input elements by default which causes the total width exceeds 100% of width of the container.
That being said, you could float the inputs and give box-sizing: border-box to achieve the goal:
Example Here
input {
float: left;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
And don't forget to clear the float at the end of the container.
Another solution is to use display: flex in your div container:
html
css
* {
margin: 0;
padding: 0
}
.one {
width: 30%;
margin-right: 10%
}
.two {
width: 30%;
margin-right: 10%
}
.three {
width: 20%
}
div {
width: 100%;
display: flex;
}
fiddle
Ref
The flex CSS property is a shorthand property specifying the ability
of a flex item to alter its dimensions to fill available space. Flex
items can be stretched to use available space proportional to their
flex grow factor or their flex shrink factor to prevent overflow.
you need to add this
input{
box-sizing:border-box;
}
because you have 100% + the border left and right for each element...so that's 100% + 6px;
border-box will make the border to be inside the div not outside of it
and also because of the whitespace between the elements you have to get dirty with the inputs
either add them on the same line or :
<input><!--
--><input><!--
--><input>
by adding comments such as this
I have a layout that works fine in Firefox and Chrome but not in IE or Opera, so I'm looking for a better solution or a way to modify my present solution without using any JavaScript. The problem is that I can't get the innermost divs to get maximal height within the divs containing them, i.e. #l within #left and #r within #right.
<div id="wrap">
<div id="header">
</div>
<div id="content">
<div id="left">
<div id="l">
L
</div>
</div>
<div id="right">
<div id="r">
R
</div>
</div>
</div>
</div>
Here's the CSS I've come up with so far:
* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
body, div {
margin: 0;
padding: 0;
}
body {
overflow-y: scroll;
}
html, body {
height: 100%;
}
#wrap {
background-color: #dddddd;
width: 100%;
height: 100%;
display: table;
border-spacing: 1em;
}
#header {
height: 2em;
display: table-row;
}
#content {
background-color: #f49837;
width: 90%;
display: table-row;
padding: 1em;
}
#left {
width: 30%;
background-color: #490274;
display: table-cell;
padding: 1em;
}
#right {
width: 70%;
background-color: #490274;
display: table-cell;
padding: 1em;
}
#l, #r {
width: 100%;
height: 100%;
background-color: #e1098f;
border-spacing: 0.5em;
display: table;
}
And here's a jsfiddle that shows what it should look like (if you look at it in Firefox or Chrome). The pink fields should cover the entire height of the purple ones except for padding.
http://jsfiddle.net/SsyAr/1/
Edit: Even if I should solve the IE/Opera problem I realize that I need something else as well, since there is no colspan feature available for CSS tables, and I'd need that for the header if I want it to have a width of 100%. The standard solution seems to be using display: table-caption + display: table-row-group. But however I try I can't make the caption part of the total height of 100% of the viewport. The table-row-group will be 100% high and the caption is added upon that.