Floated Elements of Variable Height Push Siblings Down

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,
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 a line box.

http://www.w3.org/TR/REC-CSS2/visuren.html#line-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



Leave a reply



Submit