Floated elements of variable height push siblings down
How about a CSS only solution? Add this rule:
figure:nth-of-type(3n+1) {
clear:left;
}
jsFiddle example
float on element effecting sibling elements height , Wy?
why is float on .form-control effecting its sibling elements ?
You have the setting font-size: 20em
applied to the selector .inline-form >*
. In CSS the line-height
property of a parent when inherited by block
elements the containing block
inherits the property, whereas when the property is inherited by inline elements the line-box
inherits the property. This is why the div
elements expand to the full height of the parent and the input
element did not.
Setting line-height: initial
on the parent of the block element will cancel the inheritance.
(Demo)
.input-group {
line-height: initial;
}
Specification Document Excerpts
What is a line-box?
9.4.2 Inline formatting context
In an inline formatting context, boxes are laid out horizontally,
http://www.w3.org/TR/REC-CSS2/visuren.html#line-box
one after the other, beginning at the top of a containing
block. Horizontal margins, borders, and padding are respected between
these boxes. The boxes may be aligned vertically in different ways: their
bottoms or tops may be aligned, or the baselines of text within them
may be aligned. The rectangular area that contains the boxes that form
a line is called aline box
.
How is line-height calculated for inline vs block elements?
10.8.1 Leading and half-leading
...
On a block container element
whose content
is composed of inline-level
elements, 'line-height' specifies the minimal height of line boxes
within the element. The minimum height consists of a minimum height above
the baseline and a minimum depth below it, exactly as if each
line box starts with a zero-width inline box with the
element's font and line height properties. We call that imaginary
box a "strut." (The name is inspired by TeX.)....
On a non-replaced inline element, 'line-height'
specifies the height that is used in the calculation of the line box
height.http://www.w3.org/TR/CSS2/visudet.html#propdef-line-height
Why after the third row the float property does not work correctly?
In your example, you have an image that's slightly shorter than the one before it. That's causing the gap on the following row which clear
would normally fix. if you had the same number of elements per row then something like nth-child
could be used with clear, but since you said the number of elements per line could change, that wouldn't work. An easy fix is to set a minimum height on your .box-inner
class:
.row {
width: 600px;
text-align: center;
margin: 0 auto;
}
.boxes {
box-sizing: border-box;
position: relative;
min-height: 1px;
height: auto;
float: left;
padding-left: 10px;
padding-bottom: 10px;
}
.box1 {
width: 33.33333333333333%;
}
.box2 {
width: 66.66666666666666%;
}
.box-inner {
background-color: grey;
width: 100%;
height: 100%;
min-height: 122px;
}
.img-responsive {
display: block;
max-width: 100%;
height: auto;
}
<div class="row">
<div class="box1 boxes">
<div class="box-inner">
<img class="img-responsive" src="https://picsum.photos/390/244?random=1" alt="">
</div>
</div>
<div class="box1 boxes">
<div class="box-inner">
<img class="img-responsive" src="https://picsum.photos/390/244?random=1" alt="">
</div>
</div>
<div class="box1 boxes">
<div class="box-inner">
<img class="img-responsive" src="https://picsum.photos/390/244?random=1" alt="">
</div>
</div>
<div class="box1 boxes">
<div class="box-inner">
<img class="img-responsive" src="https://picsum.photos/390/244?random=1" alt="">
</div>
</div>
<div class="box2 boxes">
<div class="box-inner">
<img class="img-responsive" src="https://picsum.photos/770/238?random=1" alt="">
</div>
</div>
<div class="box2 boxes">
<div class="box-inner">
<img class="img-responsive" src="https://picsum.photos/770/238?random=1" alt="">
</div>
</div>
<div class="box1 boxes">
<div class="box-inner">
<img class="img-responsive" src="https://picsum.photos/390/244?random=1" alt="">
</div>
</div>
<div class="box1 boxes">
<div class="box-inner">
<img class="img-responsive" src="https://picsum.photos/390/244?random=1" alt="">
</div>
</div>
<div class="box1 boxes">
<div class="box-inner">
<img class="img-responsive" src="https://picsum.photos/390/244?random=1" alt="">
</div>
</div>
<div class="box1 boxes">
<div class="box-inner">
<img class="img-responsive" src="https://picsum.photos/390/244?random=1" alt="">
</div>
</div>
</div>
CSS - Float leave white spaces
The margin-top
you have inlined is your problem. You could hack it and force it to clear? Add clear:left
.
.product-image-div:nth-child(4n+1){
clear:left;
}
Read more on nth-child awesomeness.
https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child
CSS float layout is uneven when responsive
You should use 'clear' to solve this issue
look at the my answer below. it will work fine
.wrap { width: 80%; margin-left: auto; margin-right: auto;}
@media only screen and (max-width: 500px) {.wrap { width: 90%; margin-left: auto; nargin-right: auto;}}
.container { display: table; width: 100%;}
.item { width: 33.3%; float: left; margin-bottom: 10px;}
// add this part.item:nth-child(3n + 1) { clear: both;}
@media only screen and (max-width: 500px) {.item { width: 50%; float: left; margin-bottom: 15px;}
// add this part.item:nth-child(3n + 1) { clear: none;}
.item:nth-child(2n + 1) { content: ""; clear: both; display: table;}}
.item-info { max-width: 90%; margin-left: auto; margin-right: auto; text-align: center;}
.item-icon{ width: 50px; height: 50px; background: url(https://via.placeholder.com/50x50) bottom no-repeat; background-size: contain; margin-left: auto; margin-right: auto;
<div class="wrap"> <div class="container"> <div class="item"> <div class="item-icon"></div> <div class="item-info"> <h1>Title</h1> <p>A short paragraph goes here</p> </div> </div> <div class="item"> <div class="item-icon"></div> <div class="item-info"> <h1>Title</h1> <p>A short paragraph goes here</p> </div> </div> <div class="item"> <div class="item-icon"></div> <div class="item-info"> <h1>Title</h1> <p>A short paragraph goes here</p> </div> </div> <div class="item"> <div class="item-icon"></div> <div class="item-info"> <h1>Title</h1> <p>A short paragraph goes here</p> </div> </div> <div class="item"> <div class="item-icon"></div> <div class="item-info"> <h1>Title</h1> <p>A short paragraph goes here</p> </div> </div> <div class="item"> <div class="item-icon"></div> <div class="item-info"> <h1>Title</h1> <p>A short paragraph goes here</p> </div> </div> </div></div>
Children element with height: 100% getting pushed by siblings
You could float the h1 element. It would work no matter what height it is, and the content of the stretch element will be pushed below it. But I'm not entirely sure if this is what you are looking for.
EDIT: I'm not certain what kind of browser support you're looking for, but you could also set the display to table
on .parent
and then have .stretch
inherit
the height. Then you can nest the column divs inside of .stretch
and float them.
Updated: http://jsbin.com/oluyin/2/edit
HTML
<div class="parent">
<h1>Element taking space</h1>
<div class="stretch">
<div class="col">Not much content, but needs to be stretched to the end.</div>
<div class="col">Not much content, but needs to be stretched to the end.</div>
</div>
</div>
CSS
.parent {
display: table;
}
.stretch {
height: inherit;
}
.col {
float: left;
width: 50%;
}
Related Topics
Change Default Text in Input Type="File"
How to Put CSS @Media Rules Inline
Fixed Headers on Scroll Inst Working Correctly in Angular Application
How to Get an Iframe to Be Responsive in iOS Safari
Displaying Comma Separated String in Angular 6
How to Modify the Primeng P-Calendar Style
How to Rotate the Block Every Time You Click on the Button
Text Cutting Inside Large Select Option Dropdown
How to View HTML File in Remote Unix Server
Mp4 Video Is Not Playing on Mobile Devices and Chrome
Removing Margin from Flex Items When They Wrap
Rendering HTML Content With @Html.Raw in Razor Mail Template
How to Change Pressed Item Background Color in Ion-List on Ionic
How to Load Image (And Other Assets) in Angular an Project
Using HTML Anchor Link #Id in Angular 6
How to Put Two Button in the Same Line Using Only HTML and CSS