Asked  7 Months ago    Answers:  5   Viewed   20 times

I have 6 elements which should result in two rows of 3 elements each, so I've floated them. But the content of the elements varies quite a bit, and the layout breaks when one taller element prevents subsequent siblings from floating all the way left:

Floated elements breaking layout

Here is example CSS:

figure { width: 30%; float: left; margin-left: 1%; font-size: small; outline: solid #999 1px; }
img { max-width: 100%; }

and HTML:

<figure>
  <img src="http://placekitten.com/150/200?image=1" alt="Kitten 1" />
  <figcaption>Bacon ipsum dolor sit amet short ribs pork chop pork belly spare ribs shoulder tri-tip beef ribs turkey brisket short loin tenderloin ground round. </figcaption>
</figure>
<figure>
  <img src="http://placekitten.com/150/200?image=2" alt="Kitten 2" />
  <figcaption>Short ribs cow corned beef, beef tenderloin swine biltong short loin. </figcaption>
</figure>
<figure>
  <img src="http://placekitten.com/150/200?image=3" alt="Kitten 3" />
  <figcaption>Boudin chuck ground round, pig pastrami salami turkey ham hock beef ribs tongue. </figcaption>
</figure>
<figure>
  <img src="http://placekitten.com/150/200?image=4" alt="Kitten 4" />
  <figcaption>Tri-tip pork loin tongue corned beef shankle ball tip. </figcaption>
</figure>
<figure>
  <img src="http://placekitten.com/150/200?image=5" alt="Kitten 5" />
  <figcaption>Turkey swine tenderloin spare ribs sausage filet mignon hamburger. Leberkas andouille prosciutto, bresaola tri-tip short loin meatloaf shank pig shoulder spare ribs ribeye. </figcaption>
</figure>
<figure>
  <img src="http://placekitten.com/150/200?image=6" alt="Kitten 6" />
  <figcaption>Pastrami andouille tongue tri-tip jerky.</figcaption>
</figure>

And an example JSFiddle: http://jsfiddle.net/KatieK/5Upbt/

How can I get second row of figure elements to line up below the first 3 elements?

HTML/CSS solutions are preferable to JavaScript / jQuery solutions.

 Answers

97

How about a CSS only solution? Add this rule:

figure:nth-of-type(3n+1) {
    clear:left;
}

jsFiddle example

Tuesday, June 1, 2021
 
Silfverstrom
answered 7 Months ago
34

Yes, it is possible - see this:

demo

.circle {
  position: relative;
  margin: 7em auto;
  width: 16em;
  height: 16em;
  border-radius: 50%;
  background: lightblue;
}

.arc {
  overflow: hidden;
  position: absolute;
  /* make sure top & left values are - the width of the border */
  /* the bottom right corner is the centre of the parent circle */
  top: -1em;
  right: 50%;
  bottom: 50%;
  left: -1em;
  /* the transform origin is the bottom right corner */
  transform-origin: 100% 100%;
  /* rotate by any angle */
  /* the skew angle is 90deg - the angle you want for the arc */
  transform: rotate(45deg) skewX(30deg);
}

.arc:before {
  box-sizing: border-box;
  display: block;
  border: solid 1em navy;
  width: 200%;
  height: 200%;
  border-radius: 50%;
  transform: skewX(-30deg);
  content: '';
}
<div class='circle'>
  <div class='arc'></div>
</div>
Thursday, June 3, 2021
 
SubniC
answered 7 Months ago
95

No, this is not possible with pure CSS/flexbox.

I'll cite the W3C spec:

When a flex container has multiple lines, the cross size of each line is the minimum size necessary to contain the flex items on the line (after aligment due to align-self), and the lines are aligned within the flex container with the align-content property. [...]

(From http://www.w3.org/TR/css3-flexbox/#flex-lines)

So, one item is only expanded to the maximum height of that line it's currently on.

Terminology of the above quote:

(From http://www.w3.org/TR/css3-flexbox/#box-model)

Sunday, August 15, 2021
 
MKM
answered 4 Months ago
MKM
65

Yes it is via the new step-function easing curves property.

Instead of "ease-in" etc. use "step-start" or "step-end" which will make the transition happen instantaneously either at the beginning or end of the time period specified in transition-duration.

You can also have multiple steps: "steps(N, start | end ])" which will have the transition happen in equally spaced steps.

AFAIK this is only supported in Chrome to date.

Wednesday, August 25, 2021
 
xosp7tom
answered 4 Months ago
11

As I know only block with position:absolute may be 100% height and its children too.

If you sure that .catb2 has the biggest height of .catb* try to add wrapper:

<div class="catbg0" id="b1">

    <div class="catb2">Board Name</div>

    <div class="wrapper">
        <div class="catb1">#</div>
        <!-- margin == catb2 width -->
        <div class="catb3">Topics</div>
        <div class="catb4">Posts</div>
        <div class="catb5">Last Post</div>
    </div>

    <div class="clearboth"></div>

</div>

CSS

.catbg0 { position: relative; }
.wrapper { position: absolute; width: 100%; height: 100%; }
.catb2 { margin-left: /* catb1 width here */  }

P.S. Maybe it'll be usefull for you - A new micro clearfix hack

Wednesday, November 3, 2021
 
Optimight
answered 1 Month ago
Only authorized users can answer the question. Please sign in first, or register a free account.
Not the answer you're looking for? Browse other questions tagged :
 
Share