Menu
I would like to display a row of tow divs next to each other while in the next row, the next div sits directly under the last one. Like this:
Because the layout has to be built into an CMS, I can't put Box 1,3 and 2,4 in a separat div. Is there a way to achieve this kind of behavior without extra wrapping elements? (Normal float behavior doesn't work, display inline/inline-block also doesn't do the trick.) Or is some JavaScript required to build a layout like this?
708
FLOAT POSITION means a position for the purpose of providing coverage for approved absences of Employees. The position may or may not have a master rotation but will have scheduled hours within the posted and confirmed period in accordance with the letter of appointment.
The float CSS property places an element on the left or right side of its container, allowing text and inline elements to wrap around it. The element is removed from the normal flow of the page, though still remaining a part of the flow (in contrast to absolute positioning).
Use "overflow: hidden" to avoid floating elements from wrapping a container's text. We use flexbox for this use case now. The reason behind this is that " overflow: hidden " will give you a new block formatting context.
Floats are meant to be used in images that you want the text to wrap around. Position absolute is meant to place elements with some kind of x and y coordinates.
Because of the different heights, this looks like the problem where I still haven't found a general purpose pure CSS technique to handle it properly, despite trying really hard.
I've posted this answer before: css alignment question
I've given up and used a jQuery plugin to do this in the past for something similar:
jQuery Masonry
A picture is worth a thousand words:
199
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
