CSS wrapping two columns (Main content & Menu Bar) - html

I am seeking to have a menu bar located on the right hand side of the page and have the main page content wrap underneath it. By using a float:right; in CSS I am able to achieve the result I want for desktop, though for Mobile, the Menu bar sits above the content, when I want it to sit below it.
I have tried methods (such as flex tables / reorder) to no avail. Any thoughts to point me in the right direction would be greatly appreciated.
.content {
display: block;
background: #f5f5f5;
width: 100%;
}
.information {
background: #ddd;
padding: 10px;
width: 100;
display: block;
}
.menu {
width: 100%;
display: block;
}
.side-info {
display: block;
text-align: center;
font-size: 13px;
padding: 10px 20px;
}
.colour-1 {
background: pink;
}
.colour-2 {
background: lightblue;
}
#media all and (min-width: 992px) {
.content {
max-width: 1200px;
background: #ccc;
margin: 0 auto;
}
.information {
width: auto;
}
.menu {
width: 250px !important;
display: block;
float: right;
}
}
<section class="content">
<aside class="menu">
<div class="side-info colour-1">Menu Item </div>
<div class="side-info colour-2">Menu Item </div>
<div class="side-info colour-1">Menu Item </div>
<div class="side-info colour-2">Menu Item </div>
<div class="side-info colour-1">Menu Item </div>
<div class="side-info colour-2">Menu Item </div>
<div class="side-info colour-1">Menu Item </div>
<div class="side-info colour-2">Menu Item </div>
</aside>
<div class="information">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sagittis tristique enim, ut laoreet est maximus non. Duis cursus, ligula quis porta scelerisque, nunc nunc gravida neque, faucibus varius erat est non ipsum. Nunc vitae risus maximus, luctus turpis nec, facilisis justo. Pellentesque fermentum, nulla nec accumsan luctus, elit dolor tincidunt dui, vel imperdiet tortor massa et magna. Duis volutpat suscipit luctus. Sed sit amet nulla mollis, volutpat diam eu, lacinia velit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec lobortis urna ante, imperdiet ornare diam aliquet in. Vestibulum quis purus ultricies, pretium nulla id, maximus risus. Nunc volutpat, leo vitae imperdiet consectetur, elit odio ornare ipsum, sed fringilla diam lectus vel purus. Aenean quis diam sem. Donec quis tincidunt neque, quis eleifend felis. In hac habitasse platea dictumst. Praesent scelerisque, sapien vitae condimentum vestibulum, neque tellus tempus erat, et interdum arcu velit vel ipsum.</p>
<p>In blandit sed augue nec hendrerit. Curabitur sed finibus mi. Donec in laoreet sapien, ac blandit odio. In hac habitasse platea dictumst. Donec vel lorem vitae lacus placerat facilisis. Etiam tortor dui, consequat sit amet lorem eu, lacinia eleifend tellus. Sed tristique tincidunt iaculis. Suspendisse laoreet augue leo, eu hendrerit neque pellentesque sed.</p>
<p>Aliquam a suscipit ante. Sed fermentum eros a libero pellentesque imperdiet. Maecenas bibendum lobortis scelerisque. Sed nisi arcu, tristique sit amet lectus sit amet, suscipit gravida ex. Ut ut tortor cursus nulla lobortis posuere non vitae libero. Aliquam vitae neque ornare, tincidunt nibh ac, accumsan magna. In ut malesuada sem. Fusce non porttitor ante.</p>
<p>Nulla at leo eget eros congue aliquet. Vivamus tincidunt erat ligula, sed tincidunt purus ullamcorper sit amet. Vestibulum suscipit molestie lectus in sagittis. Ut ipsum urna, tempor eget libero sagittis, gravida fringilla orci. Sed efficitur porta enim, eu auctor neque dignissim non. Suspendisse vitae purus at purus tristique pulvinar. Ut sed eros commodo, luctus diam sit amet, pulvinar tellus. </p>
</div>
</section>

If you want to do it with flexbox you can just use flex-wrap: wrap-reverse;
Working example below:
.content {
display: flex;
background: #f5f5f5;
width: 100%;
flex-wrap: wrap-reverse;
}
.information {
background: #ddd;
padding: 10px;
width: 100;
display: block;
}
.menu {
width: 100%;
display: block;
}
.side-info {
display: block;
text-align: center;
font-size: 13px;
padding: 10px 20px;
}
.colour-1 {
background: pink;
}
.colour-2 {
background: lightblue;
}
#media all and (min-width: 992px) {
.content {
display: block;
max-width: 1200px;
background: #ccc;
margin: 0 auto;
}
.information {
width: auto;
}
.menu {
width: 250px !important;
float: right;
}
}
<section class="content">
<aside class="menu">
<div class="side-info colour-1">Menu Item </div>
<div class="side-info colour-2">Menu Item </div>
<div class="side-info colour-1">Menu Item </div>
<div class="side-info colour-2">Menu Item </div>
<div class="side-info colour-1">Menu Item </div>
<div class="side-info colour-2">Menu Item </div>
<div class="side-info colour-1">Menu Item </div>
<div class="side-info colour-2">Menu Item </div>
</aside>
<div class="information">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sagittis tristique enim, ut laoreet est maximus non. Duis cursus, ligula quis porta scelerisque, nunc nunc gravida neque, faucibus varius erat est non ipsum. Nunc vitae risus maximus, luctus turpis nec, facilisis justo. Pellentesque fermentum, nulla nec accumsan luctus, elit dolor tincidunt dui, vel imperdiet tortor massa et magna. Duis volutpat suscipit luctus. Sed sit amet nulla mollis, volutpat diam eu, lacinia velit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec lobortis urna ante, imperdiet ornare diam aliquet in. Vestibulum quis purus ultricies, pretium nulla id, maximus risus. Nunc volutpat, leo vitae imperdiet consectetur, elit odio ornare ipsum, sed fringilla diam lectus vel purus. Aenean quis diam sem. Donec quis tincidunt neque, quis eleifend felis. In hac habitasse platea dictumst. Praesent scelerisque, sapien vitae condimentum vestibulum, neque tellus tempus erat, et interdum arcu velit vel ipsum.</p>
<p>In blandit sed augue nec hendrerit. Curabitur sed finibus mi. Donec in laoreet sapien, ac blandit odio. In hac habitasse platea dictumst. Donec vel lorem vitae lacus placerat facilisis. Etiam tortor dui, consequat sit amet lorem eu, lacinia eleifend tellus. Sed tristique tincidunt iaculis. Suspendisse laoreet augue leo, eu hendrerit neque pellentesque sed.</p>
<p>Aliquam a suscipit ante. Sed fermentum eros a libero pellentesque imperdiet. Maecenas bibendum lobortis scelerisque. Sed nisi arcu, tristique sit amet lectus sit amet, suscipit gravida ex. Ut ut tortor cursus nulla lobortis posuere non vitae libero. Aliquam vitae neque ornare, tincidunt nibh ac, accumsan magna. In ut malesuada sem. Fusce non porttitor ante.</p>
<p>Nulla at leo eget eros congue aliquet. Vivamus tincidunt erat ligula, sed tincidunt purus ullamcorper sit amet. Vestibulum suscipit molestie lectus in sagittis. Ut ipsum urna, tempor eget libero sagittis, gravida fringilla orci. Sed efficitur porta enim, eu auctor neque dignissim non. Suspendisse vitae purus at purus tristique pulvinar. Ut sed eros commodo, luctus diam sit amet, pulvinar tellus. </p>
</div>
</section>

Try to use flex - it is easy.
Do not use display: block on the <div> elements, because this property is the default.
Swap .information and <aside> blocks.
<style>
.content {
display: flex;
flex-wrap: nowrap;
background: #ccc;
max-width: 1200px;
margin: 0 auto;
}
.information {background: #ddd; padding: 10px; width: 100;}
.menu {
flex: 0 0 250px;
}
.side-info {display:block; text-align:center; font-size: 13px; padding: 10px 20px; }
.colour-1 {background:pink; }
.colour-2 {background: lightblue;}
#media all and (max-width: 992px) {
.content {width: 100%; background: #f5f5f5; flex-direction: column; }
.menu {flex: 0 0 auto;}
}
</style>
<section class="content">
<div class="information">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sagittis tristique enim, ut laoreet est maximus non....</p>
</div>
<aside class="menu">
<div class="side-info colour-1">Menu Item </div>
<div class="side-info colour-2">Menu Item </div>
<div class="side-info colour-1">Menu Item </div>
<div class="side-info colour-2">Menu Item </div>
<div class="side-info colour-1">Menu Item </div>
<div class="side-info colour-2">Menu Item </div>
<div class="side-info colour-1">Menu Item </div>
<div class="side-info colour-2">Menu Item </div>
</aside>
</section>

Related

Overflow: scroll still Overflowing

The problem is when I shrink the page to a certain point, the top of the <p> elements overflow, weirdly not the bottom. To be clear, I want neither to overflow.
Here's a JSFiddle link to it: https://jsfiddle.net/maep468x/1
You will see that when you run it and shrink the result window to about 350px, the <p> elements start overflowing.
I've tried removing my line-height and font-size properties from the .main-content rule, but it still overflows.
I'll put the code here aswell just in case
<main>
<div id="header-container">
<h1>My Life</h1>
</div>
<div class="main-container">
<div class="main-content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sagittis fermentum lectus vel consectetur. In hac habitasse platea dictumst. Aliquam suscipit vehicula hendrerit. Suspendisse a tristique nisi, eget hendrerit diam. Mauris cursus purus magna, a pharetra mi venenatis auctor. Etiam congue felis quis maximus ultrices. Duis quis libero libero. Proin et iaculis sapien. Quisque sodales augue urna, sed dapibus eros hendrerit ut. Cras ac leo odio. Sed quis ornare risus, ut pulvinar ipsum. Vestibulum interdum laoreet efficitur. Nulla facilisi. Suspendisse ullamcorper mi in risus congue vehicula. Aliquam erat volutpat. Etiam quis aliquet lacus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean rhoncus purus ac tortor tempus iaculis. Integer ac tempus lorem. Donec euismod libero nibh. Suspendisse tincidunt nulla ligula, et blandit quam imperdiet at.
</p>
</div>
<div class="img-container"><img src="../img/background-3062024.jpg" alt="starry night sky" /></div>
</div>
<div class="main-container" id="right-side">
<div class="img-container"><img src="../img/bali-2975787.jpg" alt="Bali beach sunset" /></div>
<div class="main-content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sagittis fermentum lectus vel consectetur. In hac habitasse platea dictumst. Aliquam suscipit vehicula hendrerit. Suspendisse a tristique nisi, eget hendrerit diam. Mauris cursus purus magna, a pharetra mi venenatis auctor. Etiam congue felis quis maximus ultrices. Duis quis libero libero. Proin et iaculis sapien. Quisque sodales augue urna, sed dapibus eros hendrerit ut. Cras ac leo odio. Sed quis ornare risus, ut pulvinar ipsum. Vestibulum interdum laoreet efficitur. Nulla facilisi. Suspendisse ullamcorper mi in risus congue vehicula. Aliquam erat volutpat. Etiam quis aliquet lacus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean rhoncus purus ac tortor tempus iaculis. Integer ac tempus lorem. Donec euismod libero nibh. Suspendisse tincidunt nulla ligula, et blandit quam imperdiet at.
</p>
</div>
</div>
<div class="main-container">
<div class="main-content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sagittis fermentum lectus vel consectetur. In hac habitasse platea dictumst. Aliquam suscipit vehicula hendrerit. Suspendisse a tristique nisi, eget hendrerit diam. Mauris cursus purus magna, a pharetra mi venenatis auctor. Etiam congue felis quis maximus ultrices. Duis quis libero libero. Proin et iaculis sapien. Quisque sodales augue urna, sed dapibus eros hendrerit ut. Cras ac leo odio. Sed quis ornare risus, ut pulvinar ipsum. Vestibulum interdum laoreet efficitur. Nulla facilisi. Suspendisse ullamcorper mi in risus congue vehicula. Aliquam erat volutpat. Etiam quis aliquet lacus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean rhoncus purus ac tortor tempus iaculis. Integer ac tempus lorem. Donec euismod libero nibh. Suspendisse tincidunt nulla ligula, et blandit quam imperdiet at.
</p>
</div>
<div class="img-container"><img src="../img/bali-1514132_1920.jpg" alt="bali ricefield" /></div>
</div>
</main>
main {
background-color: rgba(0, 128, 0, 0.5);
}
#header-container {
display: flex;
width: 100%;
height: 200px;
justify-content: center;
align-items: center;
font-size: calc(5px + 2vw);
border-bottom: 2px solid #000;
background-image: url("../img/panoramic-3358822_1920.jpg");
background-size: cover;
text-shadow: 0.5px 0.25px 2px #d49522;
}
.main-container {
display: flex;
height: fit-content();
}
.main-content {
display: flex;
height: 400px;
font-family: Georgia;
font-size: calc(10px + 0.5vw);
line-height: 24px;
overflow-y: scroll;
padding: 10px;
background-color: rgba(0, 128, 0, 0.25);
}
.img-container {
min-width: 600px;
}
.img-container img {
max-width: 100%;
height: auto;
}
#media only screen and (max-width: 930px) {
.main-container {
flex-wrap: wrap;
}
.main-content {
align-items: center;
}
}
Change property align-items from align-items: center; to align-items: flex-start; and set height: auto for mobile screens.
main {
background-color: rgba(0, 128, 0, 0.5);
}
#header-container {
display: flex;
width: 100%;
height: 200px;
justify-content: center;
align-items: center;
font-size: calc(5px + 2vw);
border-bottom: 2px solid #000;
background-image: url("../img/panoramic-3358822_1920.jpg");
background-size: cover;
text-shadow: 0.5px 0.25px 2px #d49522;
}
.main-container {
display: flex;
height: fit-content();
}
.main-content {
display: flex;
height: 400px;
font-family: Georgia;
font-size: calc(10px + 0.5vw);
line-height: 24px;
overflow-y: scroll;
padding: 10px;
background-color: rgba(0, 128, 0, 0.25);
}
.img-container {
min-width: 600px;
}
.img-container img {
max-width: 100%;
height: auto;
}
#media only screen and (max-width: 930px) {
.main-container {
flex-wrap: wrap;
}
.main-content {
align-items: flex-start;
height: auto;
}
}
<main>
<div id="header-container">
<h1>My Life</h1>
</div>
<div class="main-container">
<div class="main-content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sagittis fermentum lectus vel consectetur. In hac habitasse platea dictumst. Aliquam suscipit vehicula hendrerit. Suspendisse a tristique nisi, eget hendrerit diam. Mauris cursus purus magna, a pharetra mi venenatis auctor. Etiam congue felis quis maximus ultrices. Duis quis libero libero. Proin et iaculis sapien. Quisque sodales augue urna, sed dapibus eros hendrerit ut. Cras ac leo odio. Sed quis ornare risus, ut pulvinar ipsum. Vestibulum interdum laoreet efficitur. Nulla facilisi. Suspendisse ullamcorper mi in risus congue vehicula. Aliquam erat volutpat. Etiam quis aliquet lacus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean rhoncus purus ac tortor tempus iaculis. Integer ac tempus lorem. Donec euismod libero nibh. Suspendisse tincidunt nulla ligula, et blandit quam imperdiet at.
</p>
</div>
<div class="img-container"><img src="../img/background-3062024.jpg" alt="starry night sky" /></div>
</div>
<div class="main-container" id="right-side">
<div class="img-container"><img src="../img/bali-2975787.jpg" alt="Bali beach sunset" /></div>
<div class="main-content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sagittis fermentum lectus vel consectetur. In hac habitasse platea dictumst. Aliquam suscipit vehicula hendrerit. Suspendisse a tristique nisi, eget hendrerit diam. Mauris cursus purus magna, a pharetra mi venenatis auctor. Etiam congue felis quis maximus ultrices. Duis quis libero libero. Proin et iaculis sapien. Quisque sodales augue urna, sed dapibus eros hendrerit ut. Cras ac leo odio. Sed quis ornare risus, ut pulvinar ipsum. Vestibulum interdum laoreet efficitur. Nulla facilisi. Suspendisse ullamcorper mi in risus congue vehicula. Aliquam erat volutpat. Etiam quis aliquet lacus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean rhoncus purus ac tortor tempus iaculis. Integer ac tempus lorem. Donec euismod libero nibh. Suspendisse tincidunt nulla ligula, et blandit quam imperdiet at.
</p>
</div>
</div>
<div class="main-container">
<div class="main-content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sagittis fermentum lectus vel consectetur. In hac habitasse platea dictumst. Aliquam suscipit vehicula hendrerit. Suspendisse a tristique nisi, eget hendrerit diam. Mauris cursus purus magna, a pharetra mi venenatis auctor. Etiam congue felis quis maximus ultrices. Duis quis libero libero. Proin et iaculis sapien. Quisque sodales augue urna, sed dapibus eros hendrerit ut. Cras ac leo odio. Sed quis ornare risus, ut pulvinar ipsum. Vestibulum interdum laoreet efficitur. Nulla facilisi. Suspendisse ullamcorper mi in risus congue vehicula. Aliquam erat volutpat. Etiam quis aliquet lacus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean rhoncus purus ac tortor tempus iaculis. Integer ac tempus lorem. Donec euismod libero nibh. Suspendisse tincidunt nulla ligula, et blandit quam imperdiet at.
</p>
</div>
<div class="img-container"><img src="../img/bali-1514132_1920.jpg" alt="bali ricefield" /></div>
</div>
</main>

The height of inner divs in a flexbox child

We've been looking all over the web, but can't find a solution to a seemingly unsolvable problem basically we've got two divs who need to be equal in height. In them we've got multiple other divs who need to scale in height with them.
We tried 100% height, flexbox, inherit, overflow hidden and other things we could think of. To no avail.
This is a simplistic view of what we've got:
.col-sm-12 {
width: 100%;
display: flex
}
.col-sm-6 {
width: 50%;
float: left;
flex: 1;
}
.c1 {
}
.c2 {
padding: 20px;
}
.c3 {
border: 1px solid grey;
padding: 20px;
}
.image {
width: 100%;
height: 300px;
background-color: grey;
}
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div class="col-sm-12">
<div class="col-sm-6">
<div class="c1">
<div class="c2">
<div class="image">
</div>
<div class="c3">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean consectetur dui quis arcu varius, sit amet consectetur risus auctor. Nulla id mattis ligula. Aliquam euismod dui et viverra ultrices. Praesent eget quam quam. Aenean sit amet lectus et leo ultrices sodales id sed nulla. Proin fringilla, dui vitae tincidunt tincidunt, nisi tellus efficitur lacus, ac facilisis libero elit ut tellus. In finibus tortor leo, hendrerit sagittis libero maximus sed. Sed rhoncus maximus odio, nec vestibulum enim fringilla ac. Nulla faucibus, justo nec fermentum blandit, est nisl eleifend purus, non pretium orci sapien at eros. Fusce non laoreet augue. Aenean ac eros augue. Sed sit amet enim sit amet lorem finibus volutpat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris placerat, diam sed vulputate aliquet, augue erat luctus massa, molestie egestas diam metus at dolor. Vivamus a metus vitae magna dignissim pulvinar.
</p>
</div>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="c1">
<div class="c2">
<div class="image">
</div>
<div class="c3">
<p>
Etiam id ullamcorper augue, a pharetra nisi. Sed justo enim, malesuada elementum erat non, vehicula varius turpis. Sed quis scelerisque eros, in vestibulum mi. Maecenas et consectetur risus, sed sagittis ex. Aliquam vestibulum fermentum hendrerit. Nulla eget hendrerit purus. Suspendisse commodo vel tortor ut sollicitudin.
</p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
How can we get the two boxes below the image to equal height?
Any help is appreciated!
There is no CSS method of equalising heights of elements that do not share a parent. If the top image is always the same height between columns you can use flexbox to expand the smaller/shorter column though.
.col-sm-12 {
display: flex;
}
.col-sm-6 {
width: 50%;
flex: 1;
display: flex;
flex-direction: column;
}
.c1 {
flex: 1;
display: flex;
flex-direction: column;
}
.c2 {
padding: 20px;
flex: 1;
display: flex;
flex-direction: column;
}
.c3 {
border: 1px solid grey;
padding: 20px;
flex: 1;
}
.image {
width: 100%;
height: 300px;
background-color: grey;
}
<div class="col-sm-12">
<div class="col-sm-6">
<div class="c1">
<div class="c2">
<div class="image">
</div>
<div class="c3">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean consectetur dui quis arcu varius, sit amet consectetur risus auctor. Nulla id mattis ligula. Aliquam euismod dui et viverra ultrices. Praesent eget quam quam. Aenean sit amet lectus et leo
ultrices sodales id sed nulla. Proin fringilla, dui vitae tincidunt tincidunt, nisi tellus efficitur lacus, ac facilisis libero elit ut tellus. In finibus tortor leo, hendrerit sagittis libero maximus sed. Sed rhoncus maximus odio, nec vestibulum
enim fringilla ac. Nulla faucibus, justo nec fermentum blandit, est nisl eleifend purus, non pretium orci sapien at eros. Fusce non laoreet augue. Aenean ac eros augue. Sed sit amet enim sit amet lorem finibus volutpat. Lorem ipsum dolor sit
amet, consectetur adipiscing elit. Mauris placerat, diam sed vulputate aliquet, augue erat luctus massa, molestie egestas diam metus at dolor. Vivamus a metus vitae magna dignissim pulvinar.
</p>
</div>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="c1">
<div class="c2">
<div class="image">
</div>
<div class="c3">
<p>
Etiam id ullamcorper augue, a pharetra nisi. Sed justo enim, malesuada elementum erat non, vehicula varius turpis. Sed quis scelerisque eros, in vestibulum mi. Maecenas et consectetur risus, sed sagittis ex. Aliquam vestibulum fermentum hendrerit. Nulla
eget hendrerit purus. Suspendisse commodo vel tortor ut sollicitudin.
</p>
</div>
</div>
</div>
</div>
</div>
Just use inline-style on the text div tags:
style="height:30em;overflow:scroll"
lol. There might be a lot of new, flashy and sexy frameworks & technologies out there (which I really like), but sometimes going back to the old school methods is a lot simpler and more efficient.

Flexbox equal eight 50% width columns not displaying correctly [duplicate]

This question already has answers here:
Using margin on flex items
(5 answers)
Closed 5 years ago.
I am trying to use Flexbox to make 50% width columns with equal height. I have this....
.items {
display: flex;
flex-wrap: wrap;
}
.item {
padding: 10px;
width:50%;
margin: 10px;
background: aqua;
}
<div class="items">
<div class="item">llamcorper id vehicula quis, sollicitudin a nibh. Quisque sed bibendum ipsum, et tempor arcu. Duis ultrices feugiat purus, ut sollicitudin ipsum interdum a. Nam porta vestibulum elit, et feugiat eros viverra et. In hac habitasse platea dictumst. Nullam at tempus libero. Donec pretium risus sit amet lacus imperdiet, vitae lacinia lorem eleifend. Mauris faucibus, dolor vel facilisis ultrices, massa urna tempus urna, vitae euismod felis est nd
</div>
<div class="item">
Item 1sadasdasdasdasd
</div>
<div class="item">
Item 1satricies fermentum erat luctus placerat. Praesent cursus nisl vitae magna tristique lacinia ac ac justo. Nunc euismod, est sed sodales lacinia, nisi leo luctus nulla, id commodo lectus sem vel erat. Vivamus id quam id ligula condimentum fermentum. Nullam commodo, magna sit amet sdasd
</div>
<div class="item">
Item 1sadasdasdasdasd
</div>
</div>
It is just displaying in one column, what am I doing wrong?
since you use padding and margin , item's width is equal to 50% + paddings + margins,
As a workaround, you may set a safe min-width and set flex-grow: 1;
Box-sizing can be reset to include padding in min-width calculation.
.items {
display: flex;
flex-wrap: wrap;
}
.item {
min-width: 40%;
padding: 10px;
flex: 1;
margin: 10px;
background: aqua;
}
<div class="items">
<div class="item">llamcorper id vehicula quis, sollicitudin a nibh. Quisque sed bibendum ipsum, et tempor arcu. Duis ultrices feugiat purus, ut sollicitudin ipsum interdum a. Nam porta vestibulum elit, et feugiat eros viverra et. In hac habitasse platea dictumst. Nullam
at tempus libero. Donec pretium risus sit amet lacus imperdiet, vitae lacinia lorem eleifend. Mauris faucibus, dolor vel facilisis ultrices, massa urna tempus urna, vitae euismod felis est nd
</div>
<div class="item">
Item 1sadasdasdasdasd
</div>
<div class="item">
Item 1satricies fermentum erat luctus placerat. Praesent cursus nisl vitae magna tristique lacinia ac ac justo. Nunc euismod, est sed sodales lacinia, nisi leo luctus nulla, id commodo lectus sem vel erat. Vivamus id quam id ligula condimentum fermentum.
Nullam commodo, magna sit amet sdasd
</div>
<div class="item">
Item 1sadasdasdasdasd
</div>
</div>
What's happening is that the width of the box is set to 50%, but that doesn't include padding or margin. You can have the 50% include padding by setting box-sizing: border-box; but you can't include the margin. One way to solve this is by using the flex-grow attribute, which tells an element how much it can grow to fill empty space in a row (relative to other elements in the row. If all elements have flex-grow: 1; they will all grow the same amount).
.items {
display: flex;
flex-wrap: wrap;
}
.item {
flex-grow: 1;
width: 40%;
padding: 10px;
margin: 10px;
background: aqua;
}
<div class="items">
<div class="item">llamcorper id vehicula quis, sollicitudin a nibh. Quisque sed bibendum ipsum, et tempor arcu. Duis ultrices feugiat purus, ut sollicitudin ipsum interdum a. Nam porta vestibulum elit, et feugiat eros viverra et. In hac habitasse platea dictumst. Nullam at tempus libero. Donec pretium risus sit amet lacus imperdiet, vitae lacinia lorem eleifend. Mauris faucibus, dolor vel facilisis ultrices, massa urna tempus urna, vitae euismod felis est nd
</div>
<div class="item">
Item 1sadasdasdasdasd
</div>
<div class="item">
Item 1satricies fermentum erat luctus placerat. Praesent cursus nisl vitae magna tristique lacinia ac ac justo. Nunc euismod, est sed sodales lacinia, nisi leo luctus nulla, id commodo lectus sem vel erat. Vivamus id quam id ligula condimentum fermentum. Nullam commodo, magna sit amet sdasd
</div>
<div class="item">
Item 1sadasdasdasdasd
</div>
</div>
As you have padding and margin, it adds to your width: 50% of your .item, to compensate padding you should add box-sizing: border-box, and to compensate margins you can wrap .item content to one more div.
.items {
display: flex;
flex-wrap: wrap;
}
.item {
padding: 10px;
width: 50%;
box-sizing: border-box;
}
.item > div {
padding: 10px;
background: aqua;
height: 100%;
box-sizing: border-box;
}
<div class="items">
<div class="item">
<div>llamcorper id vehicula quis, sollicitudin a nibh. Quisque sed bibendum ipsum, et tempor arcu. Duis ultrices feugiat purus, ut sollicitudin ipsum interdum a. Nam porta vestibulum elit, et feugiat eros viverra et. In hac habitasse platea dictumst. Nullam
at tempus libero. Donec pretium risus sit amet lacus imperdiet, vitae lacinia lorem eleifend. Mauris faucibus, dolor vel facilisis ultrices, massa urna tempus urna, vitae euismod felis est nd</div>
</div>
<div class="item">
<div>Item 1sadasdasdasdasd</div>
</div>
<div class="item">
<div>Item 1satricies fermentum erat luctus placerat. Praesent cursus nisl vitae magna tristique lacinia ac ac justo. Nunc euismod, est sed sodales lacinia, nisi leo luctus nulla, id commodo lectus sem vel erat. Vivamus id quam id ligula condimentum fermentum.
Nullam commodo, magna sit amet sdasd</div>
</div>
<div class="item">
<div> Item 1sadasdasdasdasd</div>
</div>
</div>

Floated image overflows parent div

I'm trying to float:right; image next to paragraph <p>, which are nested together in <div> container. The problem is that the parent <div> resize its height with the size of the text in the paragraph, that's good, but floated right image overflows the div, and same <div> didn't resize itself according to the image height.
.container {
width: 70%;
background-color: #777;
margin: 0 auto;
padding: 25px;
}
.content {
width: 100%;
height: auto;
float: left;
}
.content .container {
width: 70%;
height: auto;
background-color: white;
/*
overflow: hidden; /* Try later without overflow. (autoportrait.jpg overflow .content .container
*/
}
.autoportrait {
width: 20%;
height: 20%;
/*
max-width:205px;
max-height:265px;
margin-bottom: 25px;
*/
padding: 10px 10px 10px 10px;
border: solid;
border-width: 2px;
float: right;
clear: both;
}
<div class="content">
<div class="container">
<!--
<main>
<section>
-->
<img class="autoportrait" src="autoportrait.jpg" alt="Autoportrait of me">
<h2>Post title</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eu purus et enim eleifend fringilla. Cras nec tortor elementum, vestibulum orci id, congue nisl. Fusce ornare ac turpis sit amet tincidunt. Phasellus vel magna ut massa tempus ultricies.
Etiam erat libero, molestie vitae scelerisque quis, consequat eget lorem. Nulla finibus felis non mi viverra efficitur. Proin eget lobortis libero. Fusce aliquam eros sed placerat viverra. Nulla venenatis, nulla sit amet suscipit vulputate, sem
mauris rutrum erat, id pharetra dui nunc at dui. Morbi dignissim luctus maximus. Cras vitae ornare risus. Sed accumsan vitae eros ac placerat. Proin commodo non orci nec consectetur. Nunc posuere, enim a lobortis ultrices, augue ex ultrices ante,
nec consectetur elit leo a ligula. Mauris pellentesque massa nisl, non pellentesque ex pulvinar eu.
</p>
<!--
</section>
</main>
-->
</div>
</div>
I tried to use overflow: hidden; , but that works only for a single "post". When I try to put a second one, the same problem appears and length of the images that flows out of the 'content container' doubles.
I'm newbie in HTML/CSS and the code I write it's for my own knowledge. So I'll be grateful if we figure out something.
Greetings from Varna, Bulgaria!
Make the div to clear it's children using :after pseudo class.
.container{
width: 70%;
background-color: #777;
margin: 0 auto;
padding: 25px;
border:1px solid red;
}
.content{
width: 100%;
height: auto;
float: left;
}
.content .container {
width: 70%;
height: auto;
background-color: white;
/*overflow: hidden; /* Try later without overflow. (autoportrait.jpg overflow .content .container) */
}
.autoportrait{
width: 20%;
height: 20%;
/*max-width:205px;
max-height:265px;
margin-bottom: 25px;*/
padding: 10px 10px 10px 10px;
border: solid;
border-width: 2px;
float: right;
clear:both;
}
.container:after {
visibility: hidden;
display:table;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
<div class="content">
<div class="container">
<!--<main>
<section>-->
<img class="autoportrait" src="http://images.financialexpress.com/2015/12/Lead-image.jpg" alt="Autoportrait of me">
<h2>Post title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eu purus et enim eleifend fringilla.
</p>
<!--</section>
</main>-->
</div>
<div class="container">
<!--<main>
<section>-->
<img class="autoportrait" src="http://images.financialexpress.com/2015/12/Lead-image.jpg" alt="Autoportrait of me">
<h2>Post title</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eu purus et enim eleifend fringilla.
Cras nec tortor elementum, vestibulum orci id, congue nisl. Fusce ornare ac turpis sit amet tincidunt.
Phasellus vel magna ut massa tempus ultricies. Etiam erat libero, molestie vitae scelerisque quis, consequat eget lorem.
Nulla finibus felis non mi viverra efficitur. Proin eget lobortis libero. Fusce aliquam eros sed placerat viverra.
Nulla venenatis, nulla sit amet suscipit vulputate, sem mauris rutrum erat, id pharetra dui nunc at dui.
Morbi dignissim luctus maximus. Cras vitae ornare risus. Sed accumsan vitae eros ac placerat.
Proin commodo non orci nec consectetur. Nunc posuere, enim a lobortis ultrices, augue ex ultrices ante, nec consectetur elit leo a ligula.
Mauris pellentesque massa nisl, non pellentesque ex pulvinar eu.
</p>
<!--</section>
</main>-->
</div>
</div>
Simplest solution is to use overflow: hidden; on .content .container.
I know you said you attempted it previously and even had it commented out in .content .container but it's working for me. Perhaps the issue was where/how you placed the second article in your markup.
.container {
width: 70%;
background-color: #777;
margin: 0 auto;
padding: 25px;
}
.content {
width: 100%;
height: auto;
float: left;
}
.content .container {
width: 70%;
height: auto;
background-color: white;
overflow: hidden;
border: 1px solid #ccc;
}
.autoportrait {
width: 20%;
height: 20%;
/*
max-width:205px;
max-height:265px;
margin-bottom: 25px;
*/
padding: 10px 10px 10px 10px;
border: solid;
border-width: 2px;
float: right;
clear: both;
}
<div class="content">
<div class="container">
<img class="autoportrait" src="http://placehold.it/300x500/fc0/" alt="Autoportrait of me">
<h2>Post title</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eu purus et enim eleifend fringilla. Cras nec tortor elementum, vestibulum orci id, congue nisl. Fusce ornare ac turpis sit amet tincidunt. Phasellus vel magna ut massa tempus ultricies.
Etiam erat libero, molestie vitae scelerisque quis, consequat eget lorem. Nulla finibus felis non mi viverra efficitur. Proin eget lobortis libero. Fusce aliquam eros sed placerat viverra. Nulla venenatis, nulla sit amet suscipit vulputate, sem
mauris rutrum erat, id pharetra dui nunc at dui. Morbi dignissim luctus maximus. Cras vitae ornare risus. Sed accumsan vitae eros ac placerat. Proin commodo non orci nec consectetur. Nunc posuere, enim a lobortis ultrices, augue ex ultrices ante,
nec consectetur elit leo a ligula. Mauris pellentesque massa nisl, non pellentesque ex pulvinar eu.
</p>
</div>
<div class="container">
<img class="autoportrait" src="http://placehold.it/300x500/fc0/" alt="Autoportrait of me">
<h2>Post title</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eu purus et enim eleifend fringilla. Cras nec tortor elementum, vestibulum orci id, congue nisl. Fusce ornare ac turpis sit amet tincidunt. Phasellus vel magna ut massa tempus ultricies.
Etiam erat libero, molestie vitae scelerisque quis, consequat eget lorem. Nulla finibus felis non mi viverra efficitur. Proin eget lobortis libero. Fusce aliquam eros sed placerat viverra. Nulla venenatis, nulla sit amet suscipit vulputate, sem
mauris rutrum erat, id pharetra dui nunc at dui. Morbi dignissim luctus maximus. Cras vitae ornare risus. Sed accumsan vitae eros ac placerat. Proin commodo non orci nec consectetur. Nunc posuere, enim a lobortis ultrices, augue ex ultrices ante,
nec consectetur elit leo a ligula. Mauris pellentesque massa nisl, non pellentesque ex pulvinar eu.
</p>
<!--
</section>
</main>
-->
</div>
</div>

HTML DIV / display/ float

i have no idea how to put yellow(bottom) div exactly under the pink(left) one.
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>AutoDealer</title>
<style>
.container{
width: 860px;
height: 1074px;
margin-right: auto;
margin-left: auto;
border: 1px solid red;
}
.nav{
}
.wrapper{
display: block;
overflow: hidden;
border: 1px solid green;
}
.left{
width: 399px;
float: left;
background-color: pink;
}
.right{
height:350px;
width: 449px;
float: left;
overflow: hidden;
background-color: blue;
overflow: hidden;
}
.bottom{
clear: both;
width: 399px;
background-color: yellow;
}
</style>
</head>
<body>
<div class="container">
<div class="nav"></div>
<div class="wrapper">
<div class="left">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ultricies aliquet tellus sit amet ultrices. Sed faucibus, nunc vitae accumsan laoreet, enim metus varius nulla, ac ultricies felis ante venenatis justo. In hac habitasse platea dictumst. In cursus enim nec urna molestie, id mattis elit mollis. In sed eros eget nibh congue vehicula. Nunc vestibulum enim risus, sit amet suscipit dui auctor et. Morbi orci magna, accumsan at turpis a, scelerisque congue eros. Morbi non mi vel nibh varius blandit sed et urna.</p>
</div>
<div class="right">
<p>Quisque vulputate mi id turpis luctus, quis laoreet nisi vestibulum. Morbi facilisis erat vitae augue ornare convallis. Fusce sit amet magna rutrum, hendrerit purus vitae, congue justo. Nam non mi eget purus ultricies lacinia. Fusce ante nisl, efficitur venenatis urna ut, pellentesque egestas nisl. In ut faucibus eros, sed viverra ex. Vestibulum aliquet accumsan massa, at feugiat ipsum interdum blandit. Morbi et orci hendrerit orci consequat ornare ac et sapien. Nulla vestibulum lectus bibendum, efficitur purus in, venenatis nunc. Nunc tincidunt velit sit amet orci pellentesque maximus. Quisque a tempus lectus.</p>
</div>
<div class="bottom">
<p>ucibus eros, sed viverra ex. Vestibulum aliquet accumsan massa, at feugiat ipsum interdum blandit. Morbi et orci hendrerit orci consequat ornare ac et sapien. Nulla vestibulum lectus bibendum, efficitur purus in, venenatis nunc. Nunc tincidunt velit sit amet orci pellentesq</p></div>
</div>
</div>
</body>
</html>
clear: both is causing the div to do just that, clear both sides and force itself into a position where the blue element isn't right next to it.
Remove that and it'll be right under the one above it.
Hi please check the update code
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>AutoDealer</title>
<style>
.container{
width: 860px;
height: 1074px;
margin-right: auto;
margin-left: auto;
border: 1px solid red;
}
.nav{
}
.wrapper{
display: block;
overflow: hidden;
border: 1px solid green;
}
.left{
width: 399px;
float: left;
background-color: pink;
}
.right{
height:350px;
width: 449px;
float: left;
overflow: hidden;
background-color: blue;
overflow: hidden;
}
.bottom{
width: 399px;
background-color: yellow;
}
.pull-left
{
float:left
}
</style>
</head>
<body>
<div class="container">
<div class="nav"></div>
<div class="wrapper">
<div class="pull-left">
<div class="left">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ultricies aliquet tellus sit amet ultrices. Sed faucibus, nunc vitae accumsan laoreet, enim metus varius nulla, ac ultricies felis ante venenatis justo. In hac habitasse platea dictumst. In cursus enim nec urna molestie, id mattis elit mollis. In sed eros eget nibh congue vehicula. Nunc vestibulum enim risus, sit amet suscipit dui auctor et. Morbi orci magna, accumsan at turpis a, scelerisque congue eros. Morbi non mi vel nibh varius blandit sed et urna.</p>
</div>
<div class="bottom">
<p>ucibus eros, sed viverra ex. Vestibulum aliquet accumsan massa, at feugiat ipsum interdum blandit. Morbi et orci hendrerit orci consequat ornare ac et sapien. Nulla vestibulum lectus bibendum, efficitur purus in, venenatis nunc. Nunc tincidunt velit sit amet orci pellentesq</p>
</div>
</div>
<div class="right">
<p>Quisque vulputate mi id turpis luctus, quis laoreet nisi vestibulum. Morbi facilisis erat vitae augue ornare convallis. Fusce sit amet magna rutrum, hendrerit purus vitae, congue justo. Nam non mi eget purus ultricies lacinia. Fusce ante nisl, efficitur venenatis urna ut, pellentesque egestas nisl. In ut faucibus eros, sed viverra ex. Vestibulum aliquet accumsan massa, at feugiat ipsum interdum blandit. Morbi et orci hendrerit orci consequat ornare ac et sapien. Nulla vestibulum lectus bibendum, efficitur purus in, venenatis nunc. Nunc tincidunt velit sit amet orci pellentesque maximus. Quisque a tempus lectus.</p>
</div>
</div>
</div>
</body>
</html>