This question already has answers here:
Flexbox not giving equal width to elements
(5 answers)
Closed 1 year ago.
I have just started learning CSS and I was working on a page using flexbox. The problem is that,
I have a container which is display: flex.
I have a left side image
I have a right side long text.
As you can see in the below snippet, the .content is not taking 50% width.
Any help would be appreciated.
Thanks in advance
.container {
display: flex;
}
img {
max-width: 100%;
}
.content {
width: 50%;
}
<div class='container'>
<img src="https://static.remove.bg/sample-gallery/graphics/bird-thumbnail.jpg" />
<div class='content'>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ex asperiores recusandae maxime possimus obcaecati sint atque quas, inventore quo ipsam quam tenetur voluptate excepturi adipisci nihil omnis consequuntur nemo ea?
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ex asperiores recusandae maxime possimus obcaecati sint atque quas, inventore quo ipsam quam tenetur voluptate excepturi adipisci nihil omnis consequuntur nemo ea?
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ex asperiores recusandae maxime possimus obcaecati sint atque quas, inventore quo ipsam quam tenetur voluptate excepturi adipisci nihil omnis consequuntur nemo ea?</p>
</div>
</div>
You need to specify the flex property as below.
.container {
display: flex;
}
img, .content {
/* max-width: 100%; */
flex: 1;
width: 50%;
}
<div class='container'>
<img src="https://static.remove.bg/sample-gallery/graphics/bird-thumbnail.jpg" />
<div class='content'>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ex asperiores recusandae maxime possimus obcaecati sint atque quas, inventore quo ipsam quam tenetur voluptate excepturi adipisci nihil omnis consequuntur nemo ea?
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ex asperiores recusandae maxime possimus obcaecati sint atque quas, inventore quo ipsam quam tenetur voluptate excepturi adipisci nihil omnis consequuntur nemo ea?
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ex asperiores recusandae maxime possimus obcaecati sint atque quas, inventore quo ipsam quam tenetur voluptate excepturi adipisci nihil omnis consequuntur nemo ea?</p>
</div>
</div>
Related
I am trying to make a website layout with a header, sidebar, and main body. The main layout is a CSS grid. The sidebar has two elements in it:
The first (.sidebar .container .top) is a navigation area that is sticky, i.e. remains pinned to the top-left of the viewport when the user scrolls past the header.
The second (.sidebar .container .bottom) is a footer that should always be in the bottom left of the viewport.
In my code, the sticky navigation area works as intended, but I cannot get the .bottom element to do what I want:
If I set .sidebar .container to have height 100vh (as I have done below), then the sidebar behaves correctly once you scroll down, but when the page loads, the .bottom text is partially cut off.
If I set .sidebar .container to have height 100%, it stretches to match the length of the body text and the .bottom element isn't visible until you scroll all the way down.
I cannot use .bottom { position: fixed; } because this resets the width of .bottom, but I want the width to respond dynamically (note the use of fr units and max-width in the body styling).
How can I get the text at the bottom of the sidebar to float to the bottom of the viewport?
Here is my code (pardon the long lorem ipsum—it is necessary to show the scrolling behavior):
body {
display: grid;
grid-template-columns: 1fr 5fr;
max-width: 800px;
}
header {
grid-column: 1 / 3;
background-color: aqua;
}
.sidebar {
background-color: greenyellow;
}
.sidebar .container {
position: sticky;
top: 0;
height: 100vh;
display: grid;
grid-template-rows: 1fr auto;
}
main {
background-color: lightcoral;
}
<header>
<h1>Page title</h1>
</header>
<div class="sidebar">
<div class="container">
<div class="top">This is the main sidebar text. It should be in the top left of the sidebar. The sidebar itself should run from the bottom of the header to the bottom of the, and once the user scrolls past the header, the sidebar should take up the full height of
the page.</div>
<div class="bottom">This is some secondary sidebar text. It should always be at the bottom left of the viewport. However, it is partially hidden from view when the page loads because the header pushes it below the viewport.</div>
</div>
</div>
<main>
<h1>
Body text
</h1>
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nihil, id. Sapiente dolores mollitia quo sequi officiis ipsa corrupti minima fugiat rem laudantium natus soluta, ab non porro asperiores nostrum possimus. Lorem ipsum, dolor sit amet consectetur
adipisicing elit. Officia voluptatibus, corporis tempore reiciendis provident delectus temporibus modi in nemo corrupti eum rerum animi, veniam vero? Adipisci voluptas voluptatum similique incidunt. Lorem ipsum dolor sit amet consectetur adipisicing
elit. Minima quasi neque aliquam ea sed quia amet saepe illo placeat? Magnam, possimus a doloribus blanditiis culpa officia ad explicabo dolorem tempora! Lorem ipsum dolor sit amet consectetur adipisicing elit. Rem, velit! Vero eveniet fugit qui dignissimos
incidunt. Debitis repellat pariatur cum totam laboriosam nesciunt, impedit excepturi, eaque veniam commodi odit reiciendis. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Aliquid voluptatem ut tempore debitis alias veniam minus natus nemo
id dignissimos dicta nobis rerum dolorem iste, ab blanditiis. Quibusdam, tempore nisi? Lorem ipsum dolor sit amet consectetur adipisicing elit. Est adipisci recusandae architecto explicabo numquam fuga repellat totam eligendi voluptatum, earum ab
doloremque iste assumenda optio. Eveniet ipsa laboriosam rerum dolores. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Tenetur quia velit ratione architecto distinctio nam atque pariatur reprehenderit. Praesentium debitis voluptatum rem
blanditiis, doloremque assumenda quibusdam vero consectetur! Cum, ipsa. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Fugiat rerum tempore voluptatibus! Ut pariatur fugit facilis autem minus eum facere maxime laborum? Cumque dicta magnam,
asperiores nam molestiae laboriosam cupiditate?
</p>
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nihil, id. Sapiente dolores mollitia quo sequi officiis ipsa corrupti minima fugiat rem laudantium natus soluta, ab non porro asperiores nostrum possimus. Lorem ipsum, dolor sit amet consectetur
adipisicing elit. Officia voluptatibus, corporis tempore reiciendis provident delectus temporibus modi in nemo corrupti eum rerum animi, veniam vero? Adipisci voluptas voluptatum similique incidunt. Lorem ipsum dolor sit amet consectetur adipisicing
elit. Minima quasi neque aliquam ea sed quia amet saepe illo placeat? Magnam, possimus a doloribus blanditiis culpa officia ad explicabo dolorem tempora! Lorem ipsum dolor sit amet consectetur adipisicing elit. Rem, velit! Vero eveniet fugit qui dignissimos
incidunt. Debitis repellat pariatur cum totam laboriosam nesciunt, impedit excepturi, eaque veniam commodi odit reiciendis. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Aliquid voluptatem ut tempore debitis alias veniam minus natus nemo
id dignissimos dicta nobis rerum dolorem iste, ab blanditiis. Quibusdam, tempore nisi? Lorem ipsum dolor sit amet consectetur adipisicing elit. Est adipisci recusandae architecto explicabo numquam fuga repellat totam eligendi voluptatum, earum ab
doloremque iste assumenda optio. Eveniet ipsa laboriosam rerum dolores. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Tenetur quia velit ratione architecto distinctio nam atque pariatur reprehenderit. Praesentium debitis voluptatum rem
blanditiis, doloremque assumenda quibusdam vero consectetur! Cum, ipsa. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Fugiat rerum tempore voluptatibus! Ut pariatur fugit facilis autem minus eum facere maxime laborum? Cumque dicta magnam,
asperiores nam molestiae laboriosam cupiditate?
</p>
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nihil, id. Sapiente dolores mollitia quo sequi officiis ipsa corrupti minima fugiat rem laudantium natus soluta, ab non porro asperiores nostrum possimus. Lorem ipsum, dolor sit amet consectetur
adipisicing elit. Officia voluptatibus, corporis tempore reiciendis provident delectus temporibus modi in nemo corrupti eum rerum animi, veniam vero? Adipisci voluptas voluptatum similique incidunt. Lorem ipsum dolor sit amet consectetur adipisicing
elit. Minima quasi neque aliquam ea sed quia amet saepe illo placeat? Magnam, possimus a doloribus blanditiis culpa officia ad explicabo dolorem tempora! Lorem ipsum dolor sit amet consectetur adipisicing elit. Rem, velit! Vero eveniet fugit qui dignissimos
incidunt. Debitis repellat pariatur cum totam laboriosam nesciunt, impedit excepturi, eaque veniam commodi odit reiciendis. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Aliquid voluptatem ut tempore debitis alias veniam minus natus nemo
id dignissimos dicta nobis rerum dolorem iste, ab blanditiis. Quibusdam, tempore nisi? Lorem ipsum dolor sit amet consectetur adipisicing elit. Est adipisci recusandae architecto explicabo numquam fuga repellat totam eligendi voluptatum, earum ab
doloremque iste assumenda optio. Eveniet ipsa laboriosam rerum dolores. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Tenetur quia velit ratione architecto distinctio nam atque pariatur reprehenderit. Praesentium debitis voluptatum rem
blanditiis, doloremque assumenda quibusdam vero consectetur! Cum, ipsa. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Fugiat rerum tempore voluptatibus! Ut pariatur fugit facilis autem minus eum facere maxime laborum? Cumque dicta magnam,
asperiores nam molestiae laboriosam cupiditate?
</p>
</main>
Here is how it is cut off
I added this css to the bottom class:
.bottom {
bottom: 0;
position: sticky;
}
No part of this element will be below the viewport.
I made a website but I want to improve the layout.
I wrapped all the div elements from the website inside <div class="wrapper">. I want to keep the height of div wrapper 95% by default. The problem is that if I add text to div element which is below, it will exit outside div. How to keep "div wrapper" at stable height even if other div below is empty? and later when I add text it should extend automatically so I could scroll it in the browser. Look at the picture.
<style>
body {
background-color: black;
}
.wrapper {
background-color: blue;
width: 90%;
margin: 0 auto;
}
.menu {
/* background-color: red;*/
width: 800px;
height: 100px;
}
.maintext {
border: dashed 2px black;
color: white;
}
</style>
and here's the HTML:
</head>
<body>
<div class="wrapper">
<div class="menu">
<h1>This is my little menu</h1>
</div>
<div class="maintext">
<h2>You can write here what you want</h2>
<p>Ok I will start now
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quam rem officia dolor dicta. Voluptatum, sunt! Atque animi cupiditate quasi. Modi accusamus consequuntur esse quis suscipit, velit obcaecati cumque reprehenderit perferendis.
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Atque odio tenetur, rem dolorum nesciunt voluptas quia ex alias corrupti, ullam consequatur distinctio cupiditate voluptate praesentium. Rem perspiciatis totam cumque officia.
nde amet saepe optio obcaecati blanditiis sed sequi nostrum quaerat voluptatibus, est libero culpa nemo! Quaerat, eaque.
</p>
</p>
</div>
</div>
</body>
</html>
you can use overflow: auto property on your wrapper with fixed height if you need to scroll vertically
body {
background-color: black;
}
.wrapper {
background-color: blue;
/* width: 90%; */
height:400px; /*+++*/
overflow: auto; /*+++*/
margin: 0 auto;
}
.menu {
/* background-color: red;*/
width: 800px;
height: 100px;
}
.maintext {
border: dashed 2px black;
color: white;
}
<div class="wrapper">
<div class="menu">
<h1>This is my little menu</h1>
</div>
<div class="maintext">
<h2>You can write here what you want</h2>
<p>Ok I will start now
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quam rem officia dolor dicta. Voluptatum, sunt! Atque animi cupiditate quasi. Modi accusamus consequuntur esse quis suscipit, velit obcaecati cumque reprehenderit perferendis.
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Atque odio tenetur, rem dolorum nesciunt voluptas quia ex alias corrupti, ullam consequatur distinctio cupiditate voluptate praesentium. Rem perspiciatis totam cumque officia.
nde amet saepe optio obcaecati blanditiis sed sequi nostrum quaerat voluptatibus, est libero culpa nemo! Quaerat, eaque.
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Officiis ratione, amet doloremque nulla iste atque reiciendis, autem, delectus fugiat sequi beatae praesentium molestias minima. Nostrum, consectetur, possimus provident facere, iusto officia tempore esse sapiente obcaecati quis dolorum fugiat blanditiis! Minus, sunt ex soluta eveniet odio sit nobis vero dolorem pariatur.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente repellat placeat dignissimos provident commodi est quasi dolorem optio iusto officia earum facilis quae, magnam expedita mollitia vitae consectetur laborum quas in nam temporibus repudiandae fugit! A saepe obcaecati sapiente ullam ut labore odio. Voluptates quaerat, natus aspernatur vero debitis commodi perferendis laboriosam ut est sit nisi iste quisquam nostrum nam dolor exercitationem quos ipsum molestias eius veritatis fugit dolorem aliquid voluptate! Nam corporis fugiat nulla magnam, cupiditate maxime dolorem facilis quaerat laboriosam aspernatur illum in possimus doloribus voluptas porro voluptatem soluta, adipisci inventore, et commodi est odit nisi delectus? Rerum?
</p>
</p>
</div>
</div>
I'm currently working on a GUI-Layout which can be reused.
So I just want a basic header, mainContainer and a Footer.
I tried multiple things.
The problem is that I don't know how to define the hight of the properly.
html body{
margin: 0;
background-color: red;
overflow: hidden;
height: 100vh;
width: 100vw;
}
.header{
height: 64px;
min-height: 64px;
background-color: blue;
}
.mainContainer{
background-color: gray;
height: 100vh;
width: 100vw;
min-width: 800px;
min-height: 600px;
overflow: auto;
}
.footer{
height: 20px;
min-height: 20px;
background-color: green;
}
<div class="header">
</div>
<div class="mainContainer">
</div>
<div class="footer">
</div>
Header should 64px high. Footer should be 20px.
The mainContainer should then fill the rest of Website.
But if the size of the page gets too small then a scrollbar should appear but only inside the mainContainer.
You can use flexbox along with specifuing a height for the .mainContainer with calc function and also specifying an overflow: auto to allow scrolling only in that element.
Here's a demo :
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.wrapper {
display: flex;
flex-flow: column nowrap; /** elements are stacked vertically without line breaks **/
height: 100vh;
}
.header {
min-height: 64px;
height: 64px;
max-height: 64px;
background-color: red;
}
.footer {
height: 20px;
background-color: blue;
}
.mainContainer {
min-height: calc(100% - (64px + 20px)); /** height = 100% of parent height which is 100vh minus (header height + footer height) **/
overflow: auto; /** allow scrolling if needed **/
background-color: green;
}
<div class="wrapper">
<div class="header">HEADER</div>
<div class="mainContainer">
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Porro necessitatibus dolorum deleniti excepturi vel numquam reiciendis impedit. Natus neque reiciendis ea voluptatibus, vero explicabo odit harum perspiciatis fugiat rerum nemo!</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Porro necessitatibus dolorum deleniti excepturi vel numquam reiciendis impedit. Natus neque reiciendis ea voluptatibus, vero explicabo odit harum perspiciatis fugiat rerum nemo!</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Porro necessitatibus dolorum deleniti excepturi vel numquam reiciendis impedit. Natus neque reiciendis ea voluptatibus, vero explicabo odit harum perspiciatis fugiat rerum nemo!</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Porro necessitatibus dolorum deleniti excepturi vel numquam reiciendis impedit. Natus neque reiciendis ea voluptatibus, vero explicabo odit harum perspiciatis fugiat rerum nemo!</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Porro necessitatibus dolorum deleniti excepturi vel numquam reiciendis impedit. Natus neque reiciendis ea voluptatibus, vero explicabo odit harum perspiciatis fugiat rerum nemo!</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Porro necessitatibus dolorum deleniti excepturi vel numquam reiciendis impedit. Natus neque reiciendis ea voluptatibus, vero explicabo odit harum perspiciatis fugiat rerum nemo!</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Porro necessitatibus dolorum deleniti excepturi vel numquam reiciendis impedit. Natus neque reiciendis ea voluptatibus, vero explicabo odit harum perspiciatis fugiat rerum nemo!</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Porro necessitatibus dolorum deleniti excepturi vel numquam reiciendis impedit. Natus neque reiciendis ea voluptatibus, vero explicabo odit harum perspiciatis fugiat rerum nemo!</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Porro necessitatibus dolorum deleniti excepturi vel numquam reiciendis impedit. Natus neque reiciendis ea voluptatibus, vero explicabo odit harum perspiciatis fugiat rerum nemo!</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Porro necessitatibus dolorum deleniti excepturi vel numquam reiciendis impedit. Natus neque reiciendis ea voluptatibus, vero explicabo odit harum perspiciatis fugiat rerum nemo!</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Porro necessitatibus dolorum deleniti excepturi vel numquam reiciendis impedit. Natus neque reiciendis ea voluptatibus, vero explicabo odit harum perspiciatis fugiat rerum nemo!</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Porro necessitatibus dolorum deleniti excepturi vel numquam reiciendis impedit. Natus neque reiciendis ea voluptatibus, vero explicabo odit harum perspiciatis fugiat rerum nemo!</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Porro necessitatibus dolorum deleniti excepturi vel numquam reiciendis impedit. Natus neque reiciendis ea voluptatibus, vero explicabo odit harum perspiciatis fugiat rerum nemo!</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Porro necessitatibus dolorum deleniti excepturi vel numquam reiciendis impedit. Natus neque reiciendis ea voluptatibus, vero explicabo odit harum perspiciatis fugiat rerum nemo!</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Porro necessitatibus dolorum deleniti excepturi vel numquam reiciendis impedit. Natus neque reiciendis ea voluptatibus, vero explicabo odit harum perspiciatis fugiat rerum nemo!</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Porro necessitatibus dolorum deleniti excepturi vel numquam reiciendis impedit. Natus neque reiciendis ea voluptatibus, vero explicabo odit harum perspiciatis fugiat rerum nemo!</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Porro necessitatibus dolorum deleniti excepturi vel numquam reiciendis impedit. Natus neque reiciendis ea voluptatibus, vero explicabo odit harum perspiciatis fugiat rerum nemo!</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Porro necessitatibus dolorum deleniti excepturi vel numquam reiciendis impedit. Natus neque reiciendis ea voluptatibus, vero explicabo odit harum perspiciatis fugiat rerum nemo!</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Porro necessitatibus dolorum deleniti excepturi vel numquam reiciendis impedit. Natus neque reiciendis ea voluptatibus, vero explicabo odit harum perspiciatis fugiat rerum nemo!</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Porro necessitatibus dolorum deleniti excepturi vel numquam reiciendis impedit. Natus neque reiciendis ea voluptatibus, vero explicabo odit harum perspiciatis fugiat rerum nemo!</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Porro necessitatibus dolorum deleniti excepturi vel numquam reiciendis impedit. Natus neque reiciendis ea voluptatibus, vero explicabo odit harum perspiciatis fugiat rerum nemo!</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Porro necessitatibus dolorum deleniti excepturi vel numquam reiciendis impedit. Natus neque reiciendis ea voluptatibus, vero explicabo odit harum perspiciatis fugiat rerum nemo!</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Porro necessitatibus dolorum deleniti excepturi vel numquam reiciendis impedit. Natus neque reiciendis ea voluptatibus, vero explicabo odit harum perspiciatis fugiat rerum nemo!</p>
</div>
<div class="footer">FOOTER</div>
</div>
Use calc css for this. check attach snippet
html body{
margin: 0;
background-color: red;
overflow: hidden;
height: 100vh;
width: 100vw;
}
.header{
height: 64px;
min-height: 64px;
background-color: blue;
}
.mainContainer{
background-color: gray;
height: calc(100vh - 64px - 20px);
width: 100vw;
min-width: 800px;
overflow: auto;
}
.footer{
height: 20px;
height: 20px;
background-color: green;
}
<div class="header">
</div>
<div class="mainContainer">
</div>
<div class="footer">
</div>
I have some long text that I want to put into 2 columns.
I have a separate semantic element (in this case a table) that I want to appear at the top of the 2nd column.
The table will be the width of one column and fixed height.
The length of the text is unknown.
If the text is short enough that it occupies less height than the table then it should remain entirely within the 1st column.
Is there a way to achieve this without splitting the text between multiple elements and without using javascript?
I've tried floating the table to the right within an element with column-count: 2 but this didn't work because it floats to the right of the column, not the entire container.
I've also tried floating the table to the right outside of the element with column-count: 2, but this didn't work because the text doesn't flow around the table and attempts to display in 2 columns across only part of the width of the container.
I looked at using CSS grid but this doesn't allow for non-rectangular regions.
Absolute positioning won't work as the text will overlap the table.
I tried letting the table go to the bottom of the column and then adding a negative top margin, but this causes it to overlap the text.
Desired result:
Are there any other options?
Pure CSS solutions only please, no javascript.
N.B. This html will be converted to PDF with PrinceXML
EDIT: didn't work in Chrome. Fixed with a transform: translateZ(0); (may repaint the first paragraph or something in Chrome)
It seems to be possible but only because your special element is fixed height (which doesn't happen in reality or let's say on screen. You control how it's printed so OK but… well)
➡️ Codepen
Solution combines:
absolute position for the special element (and fixed height)
padding top on container (thus element doesn't surimpose on another element). There's a lot of room on top of 1st column, alongside the special element.
negative margin on the first paragraph (so the 1st column now appears filled).
CSS3 columns takes care of the total height so we're good.
/* Not normalize'd here */
/* 10rem is the fixed height of the special element. Update values like 11rem, + or -10rem accordingly */
.col-2 {
position: relative;
columns: 2;
width: 40rem;
padding: 11rem 1rem 1rem 1rem;
background-color: lightyellow;
}
.col-2 p:first-of-type {
/* or ".col-2 aside + p, .col-2 p:first-child {}" */
margin-top: -10rem;
background-color: lightblue;
transform: translateZ(0); /* bugfix Chrome paragraph disappeared (some paint problem) */
}
.col-2 aside {
position: absolute;
top: 1rem;
right: 0;
display: flex;
justify-content: center;
align-items: center;
width: 50%;
height: 9rem; /* leaves room for 1rem of margin below */
font-weight: bold;
font-size: 1.5rem;
background-color: tomato;
}
.col-2 + * {
max-width: 60rem;
min-height: 20rem;
padding: 1rem;
background-color: #f5f5f5;
}
<!-- https://stackoverflow.com/questions/48342730/placing-semantic-element-at-top-of-column#48342730 -->
<h1>2 test cases in this pen (scroll)</h1>
<div class="col-2">
<p>Case 1: special element at the end of its container.<br>Lorem ipsum dolor sit amet consectetur adipisicing elit. Repudiandae dignissimos commodi accusantium nihil quibusdam fugiat unde, ea exercitationem illum omnis aut similique odit tenetur, non</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Repudiandae dignissimos commodi accusantium nihil vitae a voluptatibus quibusdam fugiat unde, ea exercitationem illum omnis aut similique odit tenetur, non</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Repudiandae dignissimos commodi accusantium nihil vitae a voluptatibus quibusdam fugiat unde, ea exercitationem illum omnis aut similique odit tenetur, non</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Repudiandae dignissimos commodi accusantium nihil vitae a voluptatibus quibusdam fugiat unde, ea exercitationem illum omnis aut similique odit tenetur, non</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Repudiandae dignissimos commodi accusantium nihil vitae a voluptatibus quibusdam fugiat unde, ea exercitationem illum omnis aut similique odit tenetur, non</p>
<aside>your element</aside>
</div>
<p>Rest of content Lorem, ipsum dolor sit amet consectetur adipisicing elit. Cumque similique blanditiis veritatis voluptatibus a ipsa possimus laboriosam ducimus excepturi! Culpa quidem dolores unde? Deleniti voluptatibus ab eligendi similique, magni optio. Lorem, ipsum dolor sit amet consectetur adipisicing elit. Cumque similique blanditiis veritatis voluptatibus a ipsa possimus laboriosam ducimus excepturi! Culpa quidem dolores unde? Deleniti voluptatibus ab eligendi similique, magni optio. Lorem, ipsum dolor sit amet consectetur adipisicing elit. Cumque similique blanditiis veritatis voluptatibus a ipsa possimus laboriosam ducimus excepturi! Culpa quidem dolores unde? Deleniti voluptatibus ab eligendi similique, magni optio. Lorem, ipsum dolor sit amet consectetur adipisicing elit. Cumque similique blanditiis veritatis voluptatibus a ipsa possimus laboriosam ducimus excepturi! Culpa quidem dolores unde? Deleniti voluptatibus ab eligendi similique, magni optio. Lorem, ipsum dolor sit amet consectetur adipisicing elit. Cumque similique blanditiis veritatis voluptatibus a ipsa possimus laboriosam ducimus excepturi! Culpa quidem dolores unde? Deleniti voluptatibus ab eligendi similique, magni optio. Lorem, ipsum dolor sit amet consectetur adipisicing elit. Cumque similique blanditiis veritatis voluptatibus a ipsa possimus laboriosam ducimus excepturi! Culpa quidem dolores unde? Deleniti voluptatibus ab eligendi similique, magni optio. Lorem, ipsum dolor sit amet consectetur adipisicing elit. Cumque similique blanditiis veritatis voluptatibus a ipsa possimus laboriosam ducimus excepturi! Culpa quidem dolores unde? Deleniti voluptatibus ab eligendi similique, magni optio.</p>
<div class="col-2">
<aside>your element</aside>
<p>Case 2: special element at the beginning of its container.<br>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Repudiandae dignissimos commodi accusantium nihil vitae a voluptatibus quibusdam fugiat unde, ea exercitationem illum omnis aut similique odit tenetur, non</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Repudiandae dignissimos commodi accusantium nihil vitae a voluptatibus quibusdam fugiat unde, ea exercitationem illum omnis aut similique odit tenetur, non</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Repudiandae dignissimos commodi accusantium nihil vitae a voluptatibus quibusdam fugiat unde, ea exercitationem illum omnis aut similique odit tenetur, non</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Repudiandae dignissimos commodi accusantium nihil vitae a voluptatibus quibusdam fugiat unde, ea exercitationem illum omnis aut similique odit tenetur, non</p>
</div>
I'm working on a website and I've this code
.container {
width: 100%;
margin:0 auto;
}
.container div {
width: 25%;
display: inline-block;
vertical-align:top;
background: lightblue;
border: 1px solid black
}
<div class="container">
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo nisi, sit eius provident, vitae, quisquam impedit dolore ad aperiam incidunt optio consequuntur aliquam facilis hic ullam! Quisquam tempora, fuga numquam.</p>
</div>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis quod, ipsa quidem natus quis quam odit molestiae sit, debitis amet expedita fugiat nesciunt at modi eos, porro laborum quas optio.</p>
</div>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis, necessitatibus alias atque nulla praesentium dolorem, dignissimos autem culpa placeat quae doloribus unde illo fugiat! Delectus quia recusandae aperiam est eligendi quae doloribus unde illo fugiat! Delectus quia recusandae aperiam est eligendi.</p>
</div>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora labore optio placeat aperiam facilis recusandae velit, minus modi quo dolores molestias in ratione officia accusantium, reiciendis porro, ipsam, repellendus atque!</p>
</div>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime quisquam ratione ducimus temporibus rerum, voluptatum facilis repellat quos nostrum commodi adipisci hic libero, rem optio consequatur tempora sed sequi voluptas!</p>
</div>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio dolor nobis veritatis deserunt voluptate illum, voluptatibus consequuntur optio autem sint, accusamus ipsam, quidem nesciunt doloribus similique doloremque magni dolorem. Animi.</p>
</div>
</div>
I want my divs collapse vertically like this image :
I try to add a float: left; but it does not work.
Thanks for your help !
Add flex properties to your .container class.
.container {
width: 100%;
margin:0 auto;
display:flex;
flex-wrap:wrap;
}
It is not that easy to achieve with few lines of html + css when you don't want to use flexbox.
I suspect you should give a try this plugin:
http://masonry.desandro.com/