Related
I've been trying to make a website with an image and a div next to each other, and make them responsive so it goes under the div when the screen size changes. It's been working so far, but whenever the image goes under the div, the size changes drastically and gets really weird.
Here's the code used
body{
margin: 0;
font-family: HebrewRegular;
background-color: white;
}
#font-face {
font-family: HebrewRegular;
src: url("Adobe Hebrew Regular.otf") format("opentype");
font-weight: bold;
}
.top-container{
background-color: white;
background-image: url("https://picsum.photos/400/200");
padding: 170px;
text-align: center;
background-position: center;
background-repeat: no-repeat;
background-size:contain;
position: relative;
max-width: 100%;
}
.menuBar{
background-color: rgb(168, 123, 81);
padding: 30px 40px;
text-align: left;
}
.sticky {
position: fixed;
top: 0;
width: 100%;
}
.sticky + .content {
padding-top: 102px;
}
.flex-container {
display: flex;
flex-wrap: wrap;
}
.flex1 {
background-color:rgba(230,199,177,255);
width: 50%;
margin: 10px;
text-align: center;
font-size: 15px;
line-height: 25px;
}
.flex2 {
background-image: url("https://picsum.photos/400/200");
background-size:contain;
background-repeat: no-repeat;
width: 600px;
margin: 10px;
text-align: center;
margin-top: 100px;
}
<body>
<div class = "top-container"></div>
<div class = "menuBar" id = "menuBar"> MenuBar</div>
<div class = "mainContent">
<div class="flex-container">
<div class = "flex1">
<h3> Welcome to Charm Thai Restaurant Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ultrices ligula quis nibh dignissim interdum. Proin consequat sem et lacus accumsan aliquam. Vestibulum sodales pretium ex at cursus. Maecenas efficitur finibus dictum. Duis nec quam ultrices, laoreet magna vel, auctor nunc. Sed ultricies lacus consequat velit lacinia, in consequat sapien pretium. Vestibulum sagittis ornare odio at elementum.
Vestibulum sodales mauris ut tempor posuere. Nulla orci dolor, porta sed risus viverra, consectetur hendrerit sapien. Phasellus tristique ante augue, id efficitur nisi placerat nec. Nam rhoncus erat quis feugiat sollicitudin. Mauris id magna sit amet risus bibendum pretium. Donec in mauris mi. Morbi dignissim porttitor iaculis. Praesent mollis placerat velit, et blandit nibh venenatis nec. Fusce ut ultrices sem. Nunc eget lectus quis mauris dignissim tempor id placerat tellus. Nam vitae semper augue.
Quisque rutrum laoreet urna eget posuere. Nulla cursus tincidunt elit et placerat. Duis sed pellentesque magna, non lacinia tortor. Nam nisl dui, rutrum et sollicitudin quis, condimentum quis augue. Aenean varius, nisi at luctus dapibus, diam magna dictum ex, ac sodales ex ex sit amet ligula. Donec pulvinar varius est. Nam vitae rutrum dolor. Donec lacinia, ex nec tempus venenatis, ligula justo dapibus diam, cursus semper augue mauris ac odio. Aliquam a arcu nec lacus rhoncus facilisis. Vestibulum sollicitudin lorem id metus auctor, sit amet ullamcorper mauris fringilla.
In in erat eu eros volutpat bibendum sit amet fermentum enim. Vestibulum dictum orci sed tincidunt posuere. Donec viverra nunc ut sem viverra, et vestibulum mauris feugiat. Donec imperdiet quam dui, vitae vehicula ipsum hendrerit non. Phasellus nec augue eu erat posuere varius in quis odio. Nunc justo turpis, scelerisque non leo vel, laoreet ornare neque. Donec a neque ac nibh ultricies tristique id vel magna. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Quisque viverra ante in magna fringilla, vel sodales lectus feugiat. Donec sodales, odio eget dictum scelerisque, urna massa fringilla quam, nec pharetra erat dui at massa. Maecenas suscipit velit id scelerisque consectetur. Praesent ac egestas enim. Vestibulum nulla turpis, hendrerit nec sodales vitae, congue at felis. Cras auctor ac quam sed fermentum. Quisque libero est, aliquam ac lorem a, semper molestie mi. Cras suscipit eu erat eget hendrerit.
</h3>
</div>
<div class = "flex2">2</div>
</div>
</body>
<script src="index.js"></script>
<!-- rgb(255, 209, 218); -->
Define a height or min-height to the image container. I also used flex instead of width to have a better result on wrap
body {
margin: 0;
font-family: HebrewRegular;
background-color: white;
}
.top-container {
background-color: white;
background-image: url("https://picsum.photos/400/200");
padding: 170px;
text-align: center;
background-position: center;
background-repeat: no-repeat;
background-size: contain;
position: relative;
}
.menuBar {
background-color: rgb(168, 123, 81);
padding: 30px 40px;
text-align: left;
}
.sticky {
position: fixed;
top: 0;
width: 100%;
}
.sticky+.content {
padding-top: 102px;
}
.flex-container {
display: flex;
flex-wrap: wrap;
}
.flex-container > * {
flex:300px; /* added this */
}
.flex1 {
background-color: rgba(230, 199, 177, 255);
margin: 10px;
text-align: center;
font-size: 15px;
line-height: 25px;
}
.flex2 {
background-image: url("https://picsum.photos/400/200");
background-size: contain;
background-repeat: no-repeat;
min-height: 300px; /* added this */
margin: 10px;
text-align: center;
}
<div class="top-container"></div>
<div class="menuBar" id="menuBar"> MenuBar</div>
<div class="mainContent">
<div class="flex-container">
<div class="flex1">
<h3> Welcome to Charm Thai Restaurant Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ultrices ligula quis nibh dignissim interdum. Proin consequat sem et lacus accumsan aliquam. Vestibulum sodales pretium ex at cursus. Maecenas efficitur
finibus dictum. Duis nec quam ultrices, laoreet magna vel, auctor nunc. Sed ultricies lacus consequat velit lacinia, in consequat sapien pretium. Vestibulum sagittis ornare odio at elementum. Vestibulum sodales mauris ut tempor posuere. Nulla
orci dolor, porta sed risus viverra, consectetur hendrerit sapien. Phasellus tristique ante augue, id efficitur nisi placerat nec. Nam rhoncus erat quis feugiat sollicitudin. Mauris id magna sit amet risus bibendum pretium. Donec in mauris mi.
Morbi dignissim porttitor iaculis. Praesent mollis placerat velit, et blandit nibh venenatis nec. Fusce ut ultrices sem. Nunc eget lectus quis mauris dignissim tempor id placerat tellus. Nam vitae semper augue. Quisque rutrum laoreet urna eget
posuere. Nulla cursus tincidunt elit et placerat. Duis sed pellentesque magna, non lacinia tortor. Nam nisl dui, rutrum et sollicitudin quis, condimentum quis augue. Aenean varius, nisi at luctus dapibus, diam magna dictum ex, ac sodales ex ex
sit amet ligula. Donec pulvinar varius est. Nam vitae rutrum dolor. Donec lacinia, ex nec tempus venenatis, ligula justo dapibus diam, cursus semper augue mauris ac odio. Aliquam a arcu nec lacus rhoncus facilisis. Vestibulum sollicitudin lorem
id metus auctor, sit amet ullamcorper mauris fringilla. In in erat eu eros volutpat bibendum sit amet fermentum enim. Vestibulum dictum orci sed tincidunt posuere. Donec viverra nunc ut sem viverra, et vestibulum mauris feugiat. Donec imperdiet
quam dui, vitae vehicula ipsum hendrerit non. Phasellus nec augue eu erat posuere varius in quis odio. Nunc justo turpis, scelerisque non leo vel, laoreet ornare neque. Donec a neque ac nibh ultricies tristique id vel magna. Orci varius natoque
penatibus et magnis dis parturient montes, nascetur ridiculus mus. Quisque viverra ante in magna fringilla, vel sodales lectus feugiat. Donec sodales, odio eget dictum scelerisque, urna massa fringilla quam, nec pharetra erat dui at massa. Maecenas
suscipit velit id scelerisque consectetur. Praesent ac egestas enim. Vestibulum nulla turpis, hendrerit nec sodales vitae, congue at felis. Cras auctor ac quam sed fermentum. Quisque libero est, aliquam ac lorem a, semper molestie mi. Cras suscipit
eu erat eget hendrerit.
</h3>
</div>
<div class="flex2">2</div>
</div>
the problem is the height of your element,
by default all html elements get height:auto; and it means take as much as your children need
so your second box has nothing but a '2' inside of it, that's why it only gets 18px height!
if this is true, then how it is working fine on wider devices?
That's flexbox's magic!
by default the align-items property of flex has stretch value, which means if the flex item has no explicit height, it should stretch and fill the parent's height, your first item has some text in it, right? so first item grows as much as necessary for his text and this causes your flexbox to grow up and wrap the children inside of it and align-items property forces your second box to grow and get the height, so it will get enough height to be visible on larger devices...
how to fix this??
you can use min-height or max-height or both!
or
you can use #media for smaller devices and set height for your second element to make it bigger
or
you can use an img tag instead of background and set specific height for it and use object-fit to maintain your image's aspect ratio
or
you can use padding or <br /> to make your second division big enough to make it's background visible
currently these are all options I can think of, if any better solution came to my mind, I'll let you know
I've been trying to style an absolutely-positioned, reactive modal window that can pop up with a potentially large amount of content.
However, I can't seem to get the content part of the modal window to become vertically scroll-able. I've played around with all sorts of div layouts and overflow CSS settings, but can't figure out a way to get the result I need.
Specifically, I need ONLY the "modal-content" div of the modal window to be vertically scroll-able, and for the scrollbar NOT to extend up into the "modal-head" div. The modal-content div should also take up all available vertical space, while modal-head only takes up however much space is necessary for the title and button.
JSFiddle:
https://jsfiddle.net/xe7p5uzv/12/
HTML:
<div class="modal">
<div class="modal-head">
<h1>Modal Title</h1>
<button>Exit Modal Window</button>
</div>
<div class="modal-content">
Modal content here. Dapibus sagittis adipiscing at facilisis augue amet eleifend ipsum netus facilisi ullamcorper ligula tristique facilisi. Lacinia vestibulum a suspendisse a lorem mi vel erat condimentum consectetur enim elementum vehicula a porttitor lacus adipiscing sit potenti elementum adipiscing iaculis a vulputate at. Orci ullamcorper purus id sociis nibh mi sodales parturient enim a iaculis ridiculus a elementum consectetur primis scelerisque fusce vestibulum. Dictum dictumst tristique enim scelerisque libero consequat ornare nisl et ligula dignissim lorem vehicula nunc parturient. Praesent consequat nisi consectetur tempus et cras vestibulum a quisque nulla ullamcorper a suspendisse augue a suspendisse. Himenaeos mi ultricies mollis a vestibulum leo elit montes ad lobortis a malesuada leo eleifend. <br/><br/>
Suspendisse pretium scelerisque parturient nulla pharetra facilisi suspendisse orci sodales venenatis ipsum proin aenean nunc curabitur posuere curabitur netus dolor sociosqu lobortis pharetra adipiscing conubia. Mus sapien est leo cubilia parturient nunc lectus duis erat cubilia scelerisque praesent vulputate nam sodales eros congue condimentum ad a. Parturient consequat hac ad nisi natoque interdum eu convallis mi dignissim eu elementum tempor euismod congue sem ut adipiscing quis vestibulum a vitae ullamcorper tincidunt turpis parturient tellus suspendisse. Duis et mus nascetur parturient conubia in suscipit a dui malesuada nisi scelerisque sem mus vestibulum morbi. Commodo a elit porttitor a metus a mattis scelerisque porttitor ut tempus eros accumsan quis condimentum. Per consectetur etiam habitant enim ad massa ut condimentum urna iaculis conubia nisi et orci fames adipiscing lacinia in gravida dapibus dui. <br/>
</div>
</div>
<div>
Regular page content here. Malesuada ac nam curabitur ullamcorper dictumst varius neque a curae est a sed odio in eu ullamcorper aliquet faucibus dis turpis eros in laoreet malesuada sit non vitae. Dis orci iaculis mauris penatibus a fringilla in dis diam habitasse pharetra scelerisque vehicula netus. Eu non nascetur enim litora sem ad suscipit vel enim ad non consequat adipiscing ultrices senectus a a sodales tellus pretium. A fermentum ullamcorper a proin vestibulum suspendisse sed a purus a vestibulum a nostra condimentum consectetur. Fames at at nam a ultrices parturient adipiscing mus pretium consequat ornare ultrices ullamcorper condimentum vestibulum vestibulum a augue vestibulum sem urna laoreet fringilla inceptos.
</div>
CSS:
html {
font-size: 24px;
}
body {
margin: 0px;
padding: 12px;
}
.modal-bg {
z-index: 2;
width: 100vw;
height: 100vh;
background: rgba(0,0,0,0.8);
}
.modal {
z-index: 3;
position: absolute;
top: 48px;
right: 48px;
bottom: 48px;
left: 48px;
border: 4px solid red;
background-color: white;
overflow: hidden;
display: flex;
flex-wrap: wrap;
}
.modal-head {
background-color: grey;
width: 100%;
padding: 12px;
display: flex;
justify-content: space-between;
}
.modal-content {
width: 100%;
padding: 12px;
overflow-y: scroll;
}
Any ideas on how to accomplish this?
html {
font-size: 24px;
}
body {
margin: 0px;
padding: 12px;
}
h1{font-size: 14px}
.modal-bg {
z-index: 2;
width: 100vw;
height: 100vh;
background: rgba(0,0,0,0.8);
}
.modal {
z-index: 3;
position: absolute;
top: 48px;
right: 48px;
bottom: 48px;
left: 48px;
border: 4px solid red;
background-color: white;
display: flex;
flex-wrap: wrap;
overflow: hidden
}
.modal-head {
background-color: grey;
width: 100%;
padding: 12px;
display: flex;
justify-content: space-between;
}
.modal-content {
width: 100%;
padding: 12px;
overflow-y: scroll;
height: 100px
}
<div class="modal">
<div class="modal-head">
<h1>Modal Title</h1>
<button>Exit Modal Window</button>
</div>
<div class="modal-content">
Modal content here. Dapibus sagittis adipiscing at facilisis augue amet eleifend ipsum netus facilisi ullamcorper ligula tristique facilisi. Lacinia vestibulum a suspendisse a lorem mi vel erat condimentum consectetur enim elementum vehicula a porttitor lacus adipiscing sit potenti elementum adipiscing iaculis a vulputate at. Orci ullamcorper purus id sociis nibh mi sodales parturient enim a iaculis ridiculus a elementum consectetur primis scelerisque fusce vestibulum. Dictum dictumst tristique enim scelerisque libero consequat ornare nisl et ligula dignissim lorem vehicula nunc parturient. Praesent consequat nisi consectetur tempus et cras vestibulum a quisque nulla ullamcorper a suspendisse augue a suspendisse. Himenaeos mi ultricies mollis a vestibulum leo elit montes ad lobortis a malesuada leo eleifend. <br/><br/>
Suspendisse pretium scelerisque parturient nulla pharetra facilisi suspendisse orci sodales venenatis ipsum proin aenean nunc curabitur posuere curabitur netus dolor sociosqu lobortis pharetra adipiscing conubia. Mus sapien est leo cubilia parturient nunc lectus duis erat cubilia scelerisque praesent vulputate nam sodales eros congue condimentum ad a. Parturient consequat hac ad nisi natoque interdum eu convallis mi dignissim eu elementum tempor euismod congue sem ut adipiscing quis vestibulum a vitae ullamcorper tincidunt turpis parturient tellus suspendisse. Duis et mus nascetur parturient conubia in suscipit a dui malesuada nisi scelerisque sem mus vestibulum morbi. Commodo a elit porttitor a metus a mattis scelerisque porttitor ut tempus eros accumsan quis condimentum. Per consectetur etiam habitant enim ad massa ut condimentum urna iaculis conubia nisi et orci fames adipiscing lacinia in gravida dapibus dui. <br/>
</div>
</div>
This question already has answers here:
How to disable equal height columns in Flexbox?
(4 answers)
How does flex-wrap work with align-self, align-items and align-content?
(2 answers)
Closed 5 years ago.
I'm currently setting display:flex on the parent as well the child element in the middle.
The issue now is since there is a nested flex property applied on the child element. The grandchild elements' height get auto distributed and generate unwanted spacing in between.
How to you remove the extra spacing in between while keeping the display:flex property on the child element?
.parent{
background:#cdcdcd;
display:flex;
flex-direction:row;
flex-wrap: wrap;
padding:30px 10px;
box-sizing: border-box;
}
.child{
flex-grow:1;
flex-basis:33.3%;
padding:10px;
background:#a2a2a2;
box-sizing: border-box;
}
.child:nth-child(3){
display:flex;
flex-direction:row;
flex-wrap: wrap;
padding:10px;
align-items: flex-start;
}
.grandchild {
padding: 10px;
background: #696969;
flex-grow: 1;
flex-shrink: 0;
flex-basis: 100%;
box-sizing: border-box;
}
<div class="parent">
<p style="position:absolute; top:-2px; left:28px;">parent</p>
<div class="child">child<br />
<p>
Curabitur ullamcorper erat eu dolor condimentum tempor. Praesent vel tortor rutrum, consequat nisl quis, congue turpis. Aliquam faucibusCurabitur ullamcorper erat eu dolor condimentum tempor. Praesent vel tortor rutrum, consequat nisl quis, congue turpis. Aliquam faucibus, arcu in egestas aliquet, massa mauris scelerisque nisl, sit amet interdum libero leo eu ligula. Aliquam tempor tincidunt
ante vel bibendum. Nullam volutpat mattis laoreet. Praesent et ullamcorper ante, eget cursus ante. Nam et elit quam. Sed velit quam, suscipit ut mollis sit amet, dapibus eu lacus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur
ridiculus mus. Nullam egestas arcu at molestie bibendum. Quisque et urna vestibulum, eleifend tortor id, volutpat odio. Nullam quis commodo felis, eu mattis augue. Fusce ante nisi, tincidunt in faucibus eget, mollis vitae felis. Vestibulum auctor
lorem lacinia, luctus tortor et, volutpat mi.
</p>
</div>
<div class="child">child
<div class="grandchild">grandchild</div>
<div class="grandchild">grandchild</div>
<div class="grandchild">grandchild</div>
</div>
<div class="child">child<br />
<p>
Curabitur ullamcorper erat eu dolor condimentum tempor. Praesent vel tortor rutrum, consequat nisl quis, congue turpis. Aliquam faucibus, arcu in egestas aliquet, massa mauris scelerisque nisl, sit amet interdum libero leo eu ligula. Aliquam tempor tincidunt
ante vel bibendum. Nullam volutpat mattis laoreet. Praesent et ullamcorper ante, eget cursus ante. Nam et elit quam. Sed velit quam, suscipit ut mollis sit amet,ante vel bibendum. Nullam volutpat mattis laoreet. Praesent et ullamcorper ante, eget cursus ante. Nam et elit quam. Sed velit quam, suscipit ut mollis sit amet,ante vel bibendum. Nullam volutpat mattis laoreet. Praesent et ullamcorper ante, eget cursus ante. Nam et elit quam. Sed velit quam, suscipit ut mollis sit amet, dapibus eu lacus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur
ridiculus mus. Nullam egestas arcu at molestie bibendum. Quisque et urna vestibulum, eleifend tortor id, volutpat odio. Nullam quis commodo felis, eu mattis augue. Fusce ante nisi, tincidunt in faucibus eget, mollis vitae felis. Vestibulum auctor
lorem lacinia, luctus tortor et, volutpat mi.
</p>
</div>
</div>
You can do it with the align-items: flex-start set on the .parent element (flex-container):
.parent {
background: #cdcdcd;
display: flex;
/*flex-direction: row; by default*/
flex-wrap: wrap;
align-items: flex-start; /* added */
padding: 30px 10px;
box-sizing: border-box;
}
.child {
flex: 1 1 33.33%; /* shorthand */
padding: 10px;
background: #a2a2a2;
box-sizing: border-box;
}
.child:nth-child(3){
display: flex;
/*flex-direction: row;*/
flex-wrap: wrap;
padding: 10px;
align-items: flex-start;
}
.grandchild {
padding: 10px;
background: #696969;
flex: 1 0 100%; /* shorthand */
box-sizing: border-box;
}
<div class="parent">
<p style="position:absolute;top:-2px;left:28px">parent</p>
<div class="child">child<br>
<p>
Curabitur ullamcorper erat eu dolor condimentum tempor. Praesent vel tortor rutrum, consequat nisl quis, congue turpis. Aliquam faucibusCurabitur ullamcorper erat eu dolor condimentum tempor. Praesent vel tortor rutrum, consequat nisl quis, congue turpis. Aliquam faucibus, arcu in egestas aliquet, massa mauris scelerisque nisl, sit amet interdum libero leo eu ligula. Aliquam tempor tincidunt
ante vel bibendum. Nullam volutpat mattis laoreet. Praesent et ullamcorper ante, eget cursus ante. Nam et elit quam. Sed velit quam, suscipit ut mollis sit amet, dapibus eu lacus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur
ridiculus mus. Nullam egestas arcu at molestie bibendum. Quisque et urna vestibulum, eleifend tortor id, volutpat odio. Nullam quis commodo felis, eu mattis augue. Fusce ante nisi, tincidunt in faucibus eget, mollis vitae felis. Vestibulum auctor
lorem lacinia, luctus tortor et, volutpat mi.
</p>
</div>
<div class="child">child
<div class="grandchild">grandchild</div>
<div class="grandchild">grandchild</div>
<div class="grandchild">grandchild</div>
</div>
<div class="child">child<br>
<p>
Curabitur ullamcorper erat eu dolor condimentum tempor. Praesent vel tortor rutrum, consequat nisl quis, congue turpis. Aliquam faucibus, arcu in egestas aliquet, massa mauris scelerisque nisl, sit amet interdum libero leo eu ligula. Aliquam tempor tincidunt
ante vel bibendum. Nullam volutpat mattis laoreet. Praesent et ullamcorper ante, eget cursus ante. Nam et elit quam. Sed velit quam, suscipit ut mollis sit amet,ante vel bibendum. Nullam volutpat mattis laoreet. Praesent et ullamcorper ante, eget cursus ante. Nam et elit quam. Sed velit quam, suscipit ut mollis sit amet,ante vel bibendum. Nullam volutpat mattis laoreet. Praesent et ullamcorper ante, eget cursus ante. Nam et elit quam. Sed velit quam, suscipit ut mollis sit amet, dapibus eu lacus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur
ridiculus mus. Nullam egestas arcu at molestie bibendum. Quisque et urna vestibulum, eleifend tortor id, volutpat odio. Nullam quis commodo felis, eu mattis augue. Fusce ante nisi, tincidunt in faucibus eget, mollis vitae felis. Vestibulum auctor
lorem lacinia, luctus tortor et, volutpat mi.
</p>
</div>
</div>
By default the value of the align-items property is set to stretch, which makes flex-items fill the flex-container cross axis (y) where the height of all items, therefore flex-container, is dictated by the height of the "tallest" one.
Addition:
If you prefer visually nicer solutions:
Solution #2:
.parent {
background: #cdcdcd;
display: flex;
/*flex-direction: row;*/
flex-wrap: wrap;
padding: 30px 10px;
box-sizing: border-box;
}
.child {
flex: 1 0 33.33%;
padding: 10px;
background: #a2a2a2;
box-sizing: border-box;
}
.child:nth-child(3){
display: flex;
/*flex-direction: row;*/
flex-wrap: wrap;
padding: 10px;
/*align-items: flex-start; commented out*/
align-self: flex-start; /* added */
}
.grandchild {
padding: 10px;
background: #696969;
flex: 1 0 100%;
box-sizing: border-box;
}
<div class="parent">
<p style="position:absolute;top:-2px;left:28px">parent</p>
<div class="child">child<br>
<p>
Curabitur ullamcorper erat eu dolor condimentum tempor. Praesent vel tortor rutrum, consequat nisl quis, congue turpis. Aliquam faucibusCurabitur ullamcorper erat eu dolor condimentum tempor. Praesent vel tortor rutrum, consequat nisl quis, congue turpis. Aliquam faucibus, arcu in egestas aliquet, massa mauris scelerisque nisl, sit amet interdum libero leo eu ligula. Aliquam tempor tincidunt
ante vel bibendum. Nullam volutpat mattis laoreet. Praesent et ullamcorper ante, eget cursus ante. Nam et elit quam. Sed velit quam, suscipit ut mollis sit amet, dapibus eu lacus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur
ridiculus mus. Nullam egestas arcu at molestie bibendum. Quisque et urna vestibulum, eleifend tortor id, volutpat odio. Nullam quis commodo felis, eu mattis augue. Fusce ante nisi, tincidunt in faucibus eget, mollis vitae felis. Vestibulum auctor
lorem lacinia, luctus tortor et, volutpat mi.
</p>
</div>
<div class="child">child
<div class="grandchild">grandchild</div>
<div class="grandchild">grandchild</div>
<div class="grandchild">grandchild</div>
</div>
<div class="child">child<br>
<p>
Curabitur ullamcorper erat eu dolor condimentum tempor. Praesent vel tortor rutrum, consequat nisl quis, congue turpis. Aliquam faucibus, arcu in egestas aliquet, massa mauris scelerisque nisl, sit amet interdum libero leo eu ligula. Aliquam tempor tincidunt
ante vel bibendum. Nullam volutpat mattis laoreet. Praesent et ullamcorper ante, eget cursus ante. Nam et elit quam. Sed velit quam, suscipit ut mollis sit amet,ante vel bibendum. Nullam volutpat mattis laoreet. Praesent et ullamcorper ante, eget cursus ante. Nam et elit quam. Sed velit quam, suscipit ut mollis sit amet,ante vel bibendum. Nullam volutpat mattis laoreet. Praesent et ullamcorper ante, eget cursus ante. Nam et elit quam. Sed velit quam, suscipit ut mollis sit amet, dapibus eu lacus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur
ridiculus mus. Nullam egestas arcu at molestie bibendum. Quisque et urna vestibulum, eleifend tortor id, volutpat odio. Nullam quis commodo felis, eu mattis augue. Fusce ante nisi, tincidunt in faucibus eget, mollis vitae felis. Vestibulum auctor
lorem lacinia, luctus tortor et, volutpat mi.
</p>
</div>
</div>
Solution #3:
.parent {
background: #cdcdcd;
display: flex;
/*flex-direction: row;*/
flex-wrap: wrap;
padding: 30px 10px;
box-sizing: border-box;
}
.child {
flex: 1 1 33.33%;
padding: 10px;
background: #a2a2a2;
box-sizing: border-box;
}
.child:nth-child(3){ /* added additional wrapper div to html */
display: flex;
flex-direction: column; /* modified */
flex-wrap: wrap;
padding: 10px;
/*align-items: flex-start; commented out*/
}
.grandchild {
padding: 10px;
background: #696969;
flex: 1 0 100%;
box-sizing: border-box;
}
<div class="parent">
<p style="position:absolute;top:-2px;left:28px">parent</p>
<div class="child">child<br>
<p>
Curabitur ullamcorper erat eu dolor condimentum tempor. Praesent vel tortor rutrum, consequat nisl quis, congue turpis. Aliquam faucibusCurabitur ullamcorper erat eu dolor condimentum tempor. Praesent vel tortor rutrum, consequat nisl quis, congue turpis. Aliquam faucibus, arcu in egestas aliquet, massa mauris scelerisque nisl, sit amet interdum libero leo eu ligula. Aliquam tempor tincidunt
ante vel bibendum. Nullam volutpat mattis laoreet. Praesent et ullamcorper ante, eget cursus ante. Nam et elit quam. Sed velit quam, suscipit ut mollis sit amet, dapibus eu lacus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur
ridiculus mus. Nullam egestas arcu at molestie bibendum. Quisque et urna vestibulum, eleifend tortor id, volutpat odio. Nullam quis commodo felis, eu mattis augue. Fusce ante nisi, tincidunt in faucibus eget, mollis vitae felis. Vestibulum auctor
lorem lacinia, luctus tortor et, volutpat mi.
</p>
</div>
<div class="child">child
<div> <!-- additional wrapper div -->
<div class="grandchild">grandchild</div>
<div class="grandchild">grandchild</div>
<div class="grandchild">grandchild</div>
</div>
</div>
<div class="child">child<br>
<p>
Curabitur ullamcorper erat eu dolor condimentum tempor. Praesent vel tortor rutrum, consequat nisl quis, congue turpis. Aliquam faucibus, arcu in egestas aliquet, massa mauris scelerisque nisl, sit amet interdum libero leo eu ligula. Aliquam tempor tincidunt
ante vel bibendum. Nullam volutpat mattis laoreet. Praesent et ullamcorper ante, eget cursus ante. Nam et elit quam. Sed velit quam, suscipit ut mollis sit amet,ante vel bibendum. Nullam volutpat mattis laoreet. Praesent et ullamcorper ante, eget cursus ante. Nam et elit quam. Sed velit quam, suscipit ut mollis sit amet,ante vel bibendum. Nullam volutpat mattis laoreet. Praesent et ullamcorper ante, eget cursus ante. Nam et elit quam. Sed velit quam, suscipit ut mollis sit amet, dapibus eu lacus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur
ridiculus mus. Nullam egestas arcu at molestie bibendum. Quisque et urna vestibulum, eleifend tortor id, volutpat odio. Nullam quis commodo felis, eu mattis augue. Fusce ante nisi, tincidunt in faucibus eget, mollis vitae felis. Vestibulum auctor
lorem lacinia, luctus tortor et, volutpat mi.
</p>
</div>
</div>
BOTH HTML/BODY 100% SOLUTION
html, body { height : 100% }
This works, no doubt. Both elements will take up the full screen, perfect.
Why not use? vh-instead? Well that has to do with mobile Safari, there is a big difference between 100% taking up the visible space and 100vh taking the view height making it larger then the toolbar, not desired in my case.
There is just one big problem with this approach. If the content within the body takes up more then 100% of the visible height, like in most cases, it will overflow. This might not be a big problem, besides it feeling hacky, however it does break -webkit-sticky to not stick elements further then the body container.
MIN-HEIGHT TO THE RESCUE, NOT QUITE
So actually what we want is to say, hey HTML and BODY be at least 100%. That would solve all our problems because that's exactly what we want. Luckily there is a property for that min-height.
html, body { min-height : 100% }
If they are both at least 100% of the viewport it should work, but it doesn't.
PROPOSED SOLUTION
html {
height : 100%;
}
body {
min-height : 100%;
}
This does make the height of the body the viewport height, however all the children elements do not recognize this, for example:
HTML Source
<head>
<title>Body Height Problem</title>
</head>
<body>
<div class="fullheight-cover">
Some beautiful image with the CSS background.
</div>
<section class="content">
Some content in section A.
</section>
<section class="content">
Some content in section B.
</section>
</body>
</html>
CSS Source
html,
body {
margin: 0;
padding: 0;
}
html {
height: 100%;
}
body {
min-height: 100%;
background: red;
}
.fullheight-cover {
min-height: 100%;
background: green;
}
(Codepen: http://codepen.io/anon/pen/pbGWBq)
If you inspect the elements you will notice that the body will now have a height, which is awesome. However you expect .fullheight-cover to fill up this space with it's height being minimal 100% as well, but this does not work.
How can I make it so that the children of the body can make use of the 100% height that flows naturally?
Check this. Im added display: flex to body, and width: 100% to .content
html,
body {
margin: 0;
padding: 0;
}
html {
height: 100%;
}
body {
min-height: 100%;
background: red;
display: flex;
}
.content {
width: 100%;
min-height: 100%;
background: green;
}
<html>
<head>
<title>Body Height Problem</title>
</head>
<body>
<div class="content">
Some sample content.
</div>
</body>
</html>
Hey I can help you with a solution
you can fix this template with css alone, Its better to use css rather than js.
This is a sample template please go through it.
SOLUTION
The html is..
<html>
<link rel="stylesheet" href="style.css"/>
<body>
<header class="border"><h1>Header</h1></header>
<section class="sub-header border"><h2>Sub header</h2></section>
<div class="side-menu border">
<div class="menu-head"><h3>Menu heading</h3></div>
<div class="menu-items ">
<p>Menu items 1</p>
<p>Menu items 2</p>
<p>Menu items 3</p>
<p>Menu items 4</p>
</div>
</div>
<div class="main-content border">
<p>Lorem ipsum dolor sit amet, rhoncus in nulla eget congue, lacus at id libero. Wisi viverra eget luctus senectus, nibh in at non tincidunt leo nulla, cras non risus, tincidunt vitae egestas. Condimentum integer sem at porttitor mi parturient. Amet vivamus nulla vivamus, dignissim velit ut quis erat donec. Tellus amet augue sodales ante. Nisl vehicula sollicitudin vitae. Ipsum arcu nulla elit maecenas habitasse, et mi, vehicula ullamcorper, nec eu eget ac placerat. In ac mauris morbi. Interdum nec tincidunt at ipsum est elit. Senectus lectus tincidunt aenean, nunc non vitae velit, ante sagittis animi vestibulum vestibulum luctus proin, fringilla quis nobis nunc ligula mus, vitae laoreet. Integer donec imperdiet vehicula.
Lectus mauris aliquam a mus consequat. Pulvinar minus in nam, aliquet erat, habitasse sed lorem velit, nullam purus in pariatur vitae lobortis sit. Varius et, erat nec dapibus tellus massa vitae, facilisis nulla pulvinar vivamus, nascetur imperdiet velit volutpat ut tellus. Pretium eros nascetur wisi consequat, pulvinar suspendisse duis curae, ratione a est sollicitudin maecenas sit mus, suspendisse justo lectus vitae libero est. Luctus ultricies, dis praesent in vestibulum, scelerisque ligula massa fusce, metus hendrerit vitae vitae rhoncus, arcu morbi ipsum curabitur dolor. Mauris vitae in, viverra amet lacus metus in mollis at. Lorem quam elementum mauris nam placerat. Urna in iaculis morbi lectus mauris vivamus.
Libero corporis amet, ante justo et pede arcu, ipsum massa ridiculus, semper class accumsan sociis cras. Dui eget vel ligula vel felis in. Massa mollis etiam gravida sagittis ante ligula, dis vehicula, sit leo, convallis morbi eu dis nec sapien sapien, augue imperdiet cursus justo conubia turpis. Nunc molestie pellentesque, phasellus scelerisque, in tristique et vel, adipisci dis pharetra nunc lacus. Rhoncus mi faucibus erat. Nibh nam, nunc vestibulum sed pellentesque suscipit exercitation, elit consectetuer vitae dolor sapien lorem, ligula vestibulum justo ut. Mauris urna est metus vel id sed, ornare condimentum, neque magna sodales, illum adipiscing tristique ligula augue vel, ut minus et pretium enim perspiciatis ullamcorper.
Erat eu cubilia massa arcu etiam, duis nostra sodales dictum scelerisque sed, fringilla pretium elementum nibh ligula, justo hendrerit magna. Dolor tellus cras, amet at aliquam egestas non tincidunt, vitae quis posuere consequat, purus massa sodales. Vulputate ipsum nec. Vitae amet, a massa mauris et, egestas odio fermentum, nam augue ipsum, id penatibus arcu ridiculus arcu. Nibh aenean sit, est quis luctus, eu eget consequat sit tincidunt a wisi, wisi eu, mi lacus maecenas. In consectetuer elementum, velit condimentum viverra porta. Arcu vulputate, elit vivamus ut sem vulputate, odio ac ipsum aliquam ut semper ante, ac ut ultricies ac, nec arcu risus dignissim fermentum pede amet. Lorem ipsum dolor sit amet, rhoncus in nulla eget congue, lacus at id libero. Wisi viverra eget luctus senectus, nibh in at non tincidunt leo nulla, cras non risus, tincidunt vitae egestas. Condimentum integer sem at porttitor mi parturient. Amet vivamus nulla vivamus, dignissim velit ut quis erat donec. Tellus amet augue sodales ante. Nisl vehicula sollicitudin vitae. Ipsum arcu nulla elit maecenas habitasse, et mi, vehicula ullamcorper, nec eu eget ac placerat. In ac mauris morbi. Interdum nec tincidunt at ipsum est elit. Senectus lectus tincidunt aenean, nunc non vitae velit, ante sagittis animi vestibulum vestibulum luctus proin, fringilla quis nobis nunc ligula mus, vitae laoreet. Integer donec imperdiet vehicula.
Lectus mauris aliquam a mus consequat. Pulvinar minus in nam, aliquet erat, habitasse sed lorem velit, nullam purus in pariatur vitae lobortis sit. Varius et, erat nec dapibus tellus massa vitae, facilisis nulla pulvinar vivamus, nascetur imperdiet velit volutpat ut tellus. Pretium eros nascetur wisi consequat, pulvinar suspendisse duis curae, ratione a est sollicitudin maecenas sit mus, suspendisse justo lectus vitae libero est. Luctus ultricies, dis praesent in vestibulum, scelerisque ligula massa fusce, metus hendrerit vitae vitae rhoncus, arcu morbi ipsum curabitur dolor. Mauris vitae in, viverra amet lacus metus in mollis at. Lorem quam elementum mauris nam placerat. Urna in iaculis morbi lectus mauris vivamus.
Libero corporis amet, ante justo et pede arcu, ipsum massa ridiculus, semper class accumsan sociis cras. Dui eget vel ligula vel felis in. Massa mollis etiam gravida sagittis ante ligula, dis vehicula, sit leo, convallis morbi eu dis nec sapien sapien, augue imperdiet cursus justo conubia turpis. Nunc molestie pellentesque, phasellus scelerisque, in tristique et vel, adipisci dis pharetra nunc lacus. Rhoncus mi faucibus erat. Nibh nam, nunc vestibulum sed pellentesque suscipit exercitation, elit consectetuer vitae dolor sapien lorem, ligula vestibulum justo ut. Mauris urna est metus vel id sed, ornare condimentum, neque magna sodales, illum adipiscing tristique ligula augue vel, ut minus et pretium enim perspiciatis ullamcorper.
Erat eu cubilia massa arcu etiam, duis nostra sodales dictum scelerisque sed, fringilla pretium elementum nibh ligula, justo hendrerit magna. Dolor tellus cras, amet at aliquam egestas non tincidunt, vitae quis posuere consequat, purus massa sodales. Vulputate ipsum nec. Vitae amet, a massa mauris et, egestas odio fermentum, nam augue ipsum, id penatibus arcu ridiculus arcu. Nibh aenean sit, est quis luctus, eu eget consequat sit tincidunt a wisi, wisi eu, mi lacus maecenas. In consectetuer elementum, velit condimentum viverra porta. Arcu vulputate, elit vivamus ut sem vulputate, odio ac ipsum aliquam ut semper ante, ac ut ultricies ac, nec arcu risus dignissim fermentum pede amet.</p>
</div>
</body>
</html>
CSS is..
*{
margin: 0;
padding: 0;
}
html,body{
height: 100%;
overflow: auto;
}
.border{
border: 1px solid #000;
}
header{
text-align: center;
position: fixed;
left: 0;
top: 0;
width: 100%;
background: #ea4242;
}
.sub-header{
text-align: center;
position: fixed;
left: 0;
top: 39px;
width: 100%;
background: #d46b6b;
}
.side-menu{
width: 240px;
position: fixed;
left: 0;
top: 68px;
height: 89%;
}
.menu-head{
width:100%;
text-align: center;
padding: 12px 0;
background: #96a2ff;
}
.menu-items{
height: 100%;
}
.menu-items p{
padding: 20px 10px;
border-bottom:1px solid #777;
}
.main-content{
height: 1900px;
width: calc(100% - 252px);
margin-left: 240px;
margin-top: 66px;
background: #fdefa9;
padding: 0 0px 0 10px;
}
Try this it will suits you the best way
*{
margin: 0;
padding: 0;
}
html,body{
height: 100%;
overflow: auto;
}
.border{
border: 1px solid #000;
}
header{
text-align: center;
position: fixed;
left: 0;
top: 0;
width: 100%;
background: #ea4242;
}
.sub-header{
text-align: center;
position: fixed;
left: 0;
top: 39px;
width: 100%;
background: #d46b6b;
}
.side-menu{
width: 240px;
position: fixed;
left: 0;
top: 68px;
height: 89%;
overflow:auto;
overflow:auto;
}
.menu-head{
width:100%;
text-align: center;
padding: 12px 0;
background: #96a2ff;
}
.menu-items{
height: 100%;
}
.menu-items p{
padding: 20px 10px;
border-bottom:1px solid #777;
}
.main-content{
height: 1900px;
width: calc(100% - 252px);
margin-left: 240px;
margin-top: 66px;
background: #fdefa9;
padding: 0 0px 0 10px;
}
<header class="border"><h1>Header</h1></header>
<section class="sub-header border"><h2>Sub header</h2></section>
<div class="side-menu border">
<div class="menu-head"><h3>Menu heading</h3></div>
<div class="menu-items ">
<p>Menu items 1</p>
<p>Menu items 2</p>
<p>Menu items 3</p>
<p>Menu items 4</p>
</div>
</div>
<div class="main-content border">
<p>Lorem ipsum dolor sit amet, rhoncus in nulla eget congue, lacus at id libero. Wisi viverra eget luctus senectus, nibh in at non tincidunt leo nulla, cras non risus, tincidunt vitae egestas. Condimentum integer sem at porttitor mi parturient. Amet vivamus nulla vivamus, dignissim velit ut quis erat donec. Tellus amet augue sodales ante. Nisl vehicula sollicitudin vitae. Ipsum arcu nulla elit maecenas habitasse, et mi, vehicula ullamcorper, nec eu eget ac placerat. In ac mauris morbi. Interdum nec tincidunt at ipsum est elit. Senectus lectus tincidunt aenean, nunc non vitae velit, ante sagittis animi vestibulum vestibulum luctus proin, fringilla quis nobis nunc ligula mus, vitae laoreet. Integer donec imperdiet vehicula.
Lectus mauris aliquam a mus consequat. Pulvinar minus in nam, aliquet erat, habitasse sed lorem velit, nullam purus in pariatur vitae lobortis sit. Varius et, erat nec dapibus tellus massa vitae, facilisis nulla pulvinar vivamus, nascetur imperdiet velit volutpat ut tellus. Pretium eros nascetur wisi consequat, pulvinar suspendisse duis curae, ratione a est sollicitudin maecenas sit mus, suspendisse justo lectus vitae libero est. Luctus ultricies, dis praesent in vestibulum, scelerisque ligula massa fusce, metus hendrerit vitae vitae rhoncus, arcu morbi ipsum curabitur dolor. Mauris vitae in, viverra amet lacus metus in mollis at. Lorem quam elementum mauris nam placerat. Urna in iaculis morbi lectus mauris vivamus.
Libero corporis amet, ante justo et pede arcu, ipsum massa ridiculus, semper class accumsan sociis cras. Dui eget vel ligula vel felis in. Massa mollis etiam gravida sagittis ante ligula, dis vehicula, sit leo, convallis morbi eu dis nec sapien sapien, augue imperdiet cursus justo conubia turpis. Nunc molestie pellentesque, phasellus scelerisque, in tristique et vel, adipisci dis pharetra nunc lacus. Rhoncus mi faucibus erat. Nibh nam, nunc vestibulum sed pellentesque suscipit exercitation, elit consectetuer vitae dolor sapien lorem, ligula vestibulum justo ut. Mauris urna est metus vel id sed, ornare condimentum, neque magna sodales, illum adipiscing tristique ligula augue vel, ut minus et pretium enim perspiciatis ullamcorper.
Erat eu cubilia massa arcu etiam, duis nostra sodales dictum scelerisque sed, fringilla pretium elementum nibh ligula, justo hendrerit magna. Dolor tellus cras, amet at aliquam egestas non tincidunt, vitae quis posuere consequat, purus massa sodales. Vulputate ipsum nec. Vitae amet, a massa mauris et, egestas odio fermentum, nam augue ipsum, id penatibus arcu ridiculus arcu. Nibh aenean sit, est quis luctus, eu eget consequat sit tincidunt a wisi, wisi eu, mi lacus maecenas. In consectetuer elementum, velit condimentum viverra porta. Arcu vulputate, elit vivamus ut sem vulputate, odio ac ipsum aliquam ut semper ante, ac ut ultricies ac, nec arcu risus dignissim fermentum pede amet. Lorem ipsum dolor sit amet, rhoncus in nulla eget congue, lacus at id libero. Wisi viverra eget luctus senectus, nibh in at non tincidunt leo nulla, cras non risus, tincidunt vitae egestas. Condimentum integer sem at porttitor mi parturient. Amet vivamus nulla vivamus, dignissim velit ut quis erat donec. Tellus amet augue sodales ante. Nisl vehicula sollicitudin vitae. Ipsum arcu nulla elit maecenas habitasse, et mi, vehicula ullamcorper, nec eu eget ac placerat. In ac mauris morbi. Interdum nec tincidunt at ipsum est elit. Senectus lectus tincidunt aenean, nunc non vitae velit, ante sagittis animi vestibulum vestibulum luctus proin, fringilla quis nobis nunc ligula mus, vitae laoreet. Integer donec imperdiet vehicula.
Lectus mauris aliquam a mus consequat. Pulvinar minus in nam, aliquet erat, habitasse sed lorem velit, nullam purus in pariatur vitae lobortis sit. Varius et, erat nec dapibus tellus massa vitae, facilisis nulla pulvinar vivamus, nascetur imperdiet velit volutpat ut tellus. Pretium eros nascetur wisi consequat, pulvinar suspendisse duis curae, ratione a est sollicitudin maecenas sit mus, suspendisse justo lectus vitae libero est. Luctus ultricies, dis praesent in vestibulum, scelerisque ligula massa fusce, metus hendrerit vitae vitae rhoncus, arcu morbi ipsum curabitur dolor. Mauris vitae in, viverra amet lacus metus in mollis at. Lorem quam elementum mauris nam placerat. Urna in iaculis morbi lectus mauris vivamus.
Libero corporis amet, ante justo et pede arcu, ipsum massa ridiculus, semper class accumsan sociis cras. Dui eget vel ligula vel felis in. Massa mollis etiam gravida sagittis ante ligula, dis vehicula, sit leo, convallis morbi eu dis nec sapien sapien, augue imperdiet cursus justo conubia turpis. Nunc molestie pellentesque, phasellus scelerisque, in tristique et vel, adipisci dis pharetra nunc lacus. Rhoncus mi faucibus erat. Nibh nam, nunc vestibulum sed pellentesque suscipit exercitation, elit consectetuer vitae dolor sapien lorem, ligula vestibulum justo ut. Mauris urna est metus vel id sed, ornare condimentum, neque magna sodales, illum adipiscing tristique ligula augue vel, ut minus et pretium enim perspiciatis ullamcorper.
Erat eu cubilia massa arcu etiam, duis nostra sodales dictum scelerisque sed, fringilla pretium elementum nibh ligula, justo hendrerit magna. Dolor tellus cras, amet at aliquam egestas non tincidunt, vitae quis posuere consequat, purus massa sodales. Vulputate ipsum nec. Vitae amet, a massa mauris et, egestas odio fermentum, nam augue ipsum, id penatibus arcu ridiculus arcu. Nibh aenean sit, est quis luctus, eu eget consequat sit tincidunt a wisi, wisi eu, mi lacus maecenas. In consectetuer elementum, velit condimentum viverra porta. Arcu vulputate, elit vivamus ut sem vulputate, odio ac ipsum aliquam ut semper ante, ac ut ultricies ac, nec arcu risus dignissim fermentum pede amet.</p>
</div>
Try this
<div style="overflow: hidden;">
<div style="background: green; float: left; padding-bottom: 20000px; margin-bottom: -20000px; width: 30%">Column 1st</div>
<div style="background: red; padding-bottom: 20000px; margin-bottom: -20000px; float: left; width:70%">Column 2nd<br/>Your text text text<br/>Other text text and something other text</div>
</div>
I have been given the following markup that cannot change.
<div class="container">
<div class="image">
<img src="some image"/>
</div>
<h3>Some Header the is in the wrong place</h3>
<p class="blurbThing"></p>
<div class="description">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean porttitor massa sed nisi eleifend, a molestie felis convallis. Curabitur luctus orci eget rhoncus eleifend. Vestibulum dui odio, feugiat non commodo vitae, luctus a nisl. Aliquam tempor nibh
ac ante ullamcorper egestas. In ut risus quis elit ullamcorper sollicitudin in vel ante. Phasellus id magna sed erat elementum iaculis non sed dolor. Aliquam erat volutpat. Curabitur quis lectus mauris. Vivamus dictum libero nulla, vel egestas libero
dictum ut. Maecenas aliquam lectus vitae arcu lacinia, sed aliquet erat porttitor. Maecenas maximus nunc vel nulla dictum finibus.
</p>
<p>
Aliquam erat volutpat. Donec quam mi, condimentum at dolor sodales, facilisis mollis lacus. Nulla condimentum sagittis elit quis mollis. Vestibulum ultrices, risus eu sagittis tristique, purus augue egestas erat, eget auctor massa augue vitae mauris.
Nulla at lacinia justo. Aenean nec arcu euismod, condimentum lectus vitae, rhoncus nisi. Fusce lorem tortor, tincidunt sed interdum eu, euismod ut purus.
</p>
<p>
Donec ultrices eleifend pulvinar. Donec accumsan felis vel nunc porta pretium. Aenean tellus velit, ultrices quis viverra eget, vehicula vel odio. Ut nec iaculis dolor, eu aliquam felis. Proin quis maximus metus. Phasellus tincidunt tristique pulvinar.
Nunc tincidunt aliquet tincidunt.
</p>
<p>
Nullam ac consequat lorem. Praesent rhoncus consequat arcu ut tempus. Sed non mi fringilla, aliquet lectus in, sagittis dolor. Integer eu lacus consectetur, fringilla eros quis, blandit tellus. Quisque eu arcu dui. Integer finibus varius ultricies. Nulla
vitae metus in velit suscipit cursus. Vestibulum ornare ac diam quis semper. Ut nunc massa, commodo ac lorem ut, faucibus tincidunt nulla. Proin sed urna eget diam ultricies consectetur ac eu tortor.
</p>
<p>
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam erat volutpat. Nunc lobortis feugiat laoreet. Maecenas ligula nulla, ornare hendrerit tempus id, venenatis vitae lacus. Cras cursus a nulla ac dapibus. Class
aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Quisque et lacinia est. Sed quam orci, luctus eu eros et, congue bibendum ipsum. Nunc non sodales est.
</p>
</div>
<hr class="clear">
</div>
So the goal is to get the html to render as per the following snippet:
.container {
max-width: 700px;
background-color: white;
border-radius: 5px;
padding: 15px;
text-align: left;
-webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.5);
-moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.5);
box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.5);
}
.container > .image {
max-width: 40%;
min-width: 40%;
min-height: 100px;
float:right;
}
.container > .description {
max-width: 100%;
text-align: left;
}
.container > .description > * {
padding-right: 15px;
}
.container > .description > p {
margin-bottom: 8px;
}
.container > h3 {
width: 100%;
text-align: left;
font-weight: 600;
font-size: 20px;
}
.container > hr {
display: none;
}
.container > .image > img{
object-fit: cover;
object-position: center center;
max-width: 100%;
}
<div class="container">
<h3>Some Header the is in the wrong place</h3>
<div class="image">
<img src="some image"/>
</div>
<p class="blurbThing"></p>
<div class="description">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean porttitor massa sed nisi eleifend, a molestie felis convallis. Curabitur luctus orci eget rhoncus eleifend. Vestibulum dui odio, feugiat non commodo vitae, luctus a nisl. Aliquam tempor nibh
ac ante ullamcorper egestas. In ut risus quis elit ullamcorper sollicitudin in vel ante. Phasellus id magna sed erat elementum iaculis non sed dolor. Aliquam erat volutpat. Curabitur quis lectus mauris. Vivamus dictum libero nulla, vel egestas libero
dictum ut. Maecenas aliquam lectus vitae arcu lacinia, sed aliquet erat porttitor. Maecenas maximus nunc vel nulla dictum finibus.
</p>
<p>
Aliquam erat volutpat. Donec quam mi, condimentum at dolor sodales, facilisis mollis lacus. Nulla condimentum sagittis elit quis mollis. Vestibulum ultrices, risus eu sagittis tristique, purus augue egestas erat, eget auctor massa augue vitae mauris.
Nulla at lacinia justo. Aenean nec arcu euismod, condimentum lectus vitae, rhoncus nisi. Fusce lorem tortor, tincidunt sed interdum eu, euismod ut purus.
</p>
<p>
Donec ultrices eleifend pulvinar. Donec accumsan felis vel nunc porta pretium. Aenean tellus velit, ultrices quis viverra eget, vehicula vel odio. Ut nec iaculis dolor, eu aliquam felis. Proin quis maximus metus. Phasellus tincidunt tristique pulvinar.
Nunc tincidunt aliquet tincidunt.
</p>
<p>
Nullam ac consequat lorem. Praesent rhoncus consequat arcu ut tempus. Sed non mi fringilla, aliquet lectus in, sagittis dolor. Integer eu lacus consectetur, fringilla eros quis, blandit tellus. Quisque eu arcu dui. Integer finibus varius ultricies. Nulla
vitae metus in velit suscipit cursus. Vestibulum ornare ac diam quis semper. Ut nunc massa, commodo ac lorem ut, faucibus tincidunt nulla. Proin sed urna eget diam ultricies consectetur ac eu tortor.
</p>
<p>
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam erat volutpat. Nunc lobortis feugiat laoreet. Maecenas ligula nulla, ornare hendrerit tempus id, venenatis vitae lacus. Cras cursus a nulla ac dapibus. Class
aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Quisque et lacinia est. Sed quam orci, luctus eu eros et, congue bibendum ipsum. Nunc non sodales est.
</p>
</div>
<hr class="clear">
</div>
Note in the above snippet I have moved the <h3> tag to the top inside the container and everything is fine and dandy. However I cannot change this in my scenario.
I can use jQuery/JavaScript to do it, but I really don't want to, and would like to use CSS only.
I have tried using a flexbox approach to get it to re order but then I cannot get the text to wrap around the bottom of the image, e.g.
.container {
max-width: 700px;
background-color: white;
border-radius: 5px;
padding: 15px;
text-align: left;
display: flex;
flex-direction: row;
flex-wrap: wrap;
-webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.5);
-moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.5);
box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.5);
}
.container > .image {
max-width: 40%;
min-width: 40%;
min-height: 100px;
order: 4;
}
.container > .specials-info {
order: 2;
}
.container > .description {
max-width: 60%;
text-align: left;
order: 3;
}
.container > .description > * {
padding-right: 15px;
}
.container > .description > p {
margin-bottom: 8px;
}
.container > h3 {
width: 100%;
text-align: left;
font-weight: 600;
font-size: 20px;
order: 1;
}
.container > hr {
display: none;
}
.container > .image > img{
object-fit: cover;
object-position: center center;
max-width: 100%;
}
<div class="container">
<div class="image">
<img src="some image"/>
</div>
<h3>Some Header the is in the wrong place</h3>
<p class="blurbThing"></p>
<div class="description">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean porttitor massa sed nisi eleifend, a molestie felis convallis. Curabitur luctus orci eget rhoncus eleifend. Vestibulum dui odio, feugiat non commodo vitae, luctus a nisl. Aliquam tempor nibh
ac ante ullamcorper egestas. In ut risus quis elit ullamcorper sollicitudin in vel ante. Phasellus id magna sed erat elementum iaculis non sed dolor. Aliquam erat volutpat. Curabitur quis lectus mauris. Vivamus dictum libero nulla, vel egestas libero
dictum ut. Maecenas aliquam lectus vitae arcu lacinia, sed aliquet erat porttitor. Maecenas maximus nunc vel nulla dictum finibus.
</p>
<p>
Aliquam erat volutpat. Donec quam mi, condimentum at dolor sodales, facilisis mollis lacus. Nulla condimentum sagittis elit quis mollis. Vestibulum ultrices, risus eu sagittis tristique, purus augue egestas erat, eget auctor massa augue vitae mauris.
Nulla at lacinia justo. Aenean nec arcu euismod, condimentum lectus vitae, rhoncus nisi. Fusce lorem tortor, tincidunt sed interdum eu, euismod ut purus.
</p>
<p>
Donec ultrices eleifend pulvinar. Donec accumsan felis vel nunc porta pretium. Aenean tellus velit, ultrices quis viverra eget, vehicula vel odio. Ut nec iaculis dolor, eu aliquam felis. Proin quis maximus metus. Phasellus tincidunt tristique pulvinar.
Nunc tincidunt aliquet tincidunt.
</p>
<p>
Nullam ac consequat lorem. Praesent rhoncus consequat arcu ut tempus. Sed non mi fringilla, aliquet lectus in, sagittis dolor. Integer eu lacus consectetur, fringilla eros quis, blandit tellus. Quisque eu arcu dui. Integer finibus varius ultricies. Nulla
vitae metus in velit suscipit cursus. Vestibulum ornare ac diam quis semper. Ut nunc massa, commodo ac lorem ut, faucibus tincidunt nulla. Proin sed urna eget diam ultricies consectetur ac eu tortor.
</p>
<p>
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam erat volutpat. Nunc lobortis feugiat laoreet. Maecenas ligula nulla, ornare hendrerit tempus id, venenatis vitae lacus. Cras cursus a nulla ac dapibus. Class
aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Quisque et lacinia est. Sed quam orci, luctus eu eros et, congue bibendum ipsum. Nunc non sodales est.
</p>
</div>
<hr class="clear">
</div>
In summary is there a way to achieve Snippet 1 with out altering the original HTML and without using JavaScript?
Edit 1
Just to clarify a bit in the image below on the left is Snippet 1. It is what I want to end up with (but the markup is different in that the <h3> tag is higher). On the right is Snippet 2, as close as I can get without editing the markup (which I cannot do) / using JavaScript (I can do but would rather use CSS only).
Note that I have used a flexbox to reorder the items, but at that point I cannot use a float on the image container.
Edit 2
A bit more clarification(apologies)
The header(h3) must sit at the top and take 100% of the width. (no wrapping by just padding the image down).
The Image will be 45% of the width but will change in height depending on diffent use cases.
The Content of description will be x no of p tags with varying content.
You can achieve this pretty easily with just using the float property on the image container and some margin-top. I won't go through line-by-line with what CSS properties I've changed, but here is a JSFiddle that doesn't change your HTML and achieves the layout you want. It has the added benefit of far fewer lines of CSS than using flex.
Note: Since I don't know what size your image actually is, I chose an explicit size based on your what your image looked like.
.container {
max-width: 700px;
background-color: white;
border-radius: 5px;
padding: 15px;
-webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.5);
-moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.5);
box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.5);
}
.container .image {
margin-top: 70px;
}
.container > .image {
float: right;
width: 300px; /* just an example size */
height: 150px; /* just an example size */
background: grey; /* This is just to show you where the image would be */
}
.container > .description > * {
padding-right: 15px;
}
.container > .description > p {
margin-bottom: 8px;
}
.container > h3 {
width: 100%;
font-weight: 600;
font-size: 20px;
white-space: nowrap;
}
<div class="container">
<div class="image">
<img src="some image"/>
</div>
<h3>Some Header the is in the wrong place</h3>
<p class="blurbThing"></p>
<div class="description">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean porttitor massa sed nisi eleifend, a molestie felis convallis. Curabitur luctus orci eget rhoncus eleifend. Vestibulum dui odio, feugiat non commodo vitae, luctus a nisl. Aliquam tempor nibh
ac ante ullamcorper egestas. In ut risus quis elit ullamcorper sollicitudin in vel ante. Phasellus id magna sed erat elementum iaculis non sed dolor. Aliquam erat volutpat. Curabitur quis lectus mauris. Vivamus dictum libero nulla, vel egestas libero
dictum ut. Maecenas aliquam lectus vitae arcu lacinia, sed aliquet erat porttitor. Maecenas maximus nunc vel nulla dictum finibus.
</p>
<p>
Aliquam erat volutpat. Donec quam mi, condimentum at dolor sodales, facilisis mollis lacus. Nulla condimentum sagittis elit quis mollis. Vestibulum ultrices, risus eu sagittis tristique, purus augue egestas erat, eget auctor massa augue vitae mauris.
Nulla at lacinia justo. Aenean nec arcu euismod, condimentum lectus vitae, rhoncus nisi. Fusce lorem tortor, tincidunt sed interdum eu, euismod ut purus.
</p>
<p>
Donec ultrices eleifend pulvinar. Donec accumsan felis vel nunc porta pretium. Aenean tellus velit, ultrices quis viverra eget, vehicula vel odio. Ut nec iaculis dolor, eu aliquam felis. Proin quis maximus metus. Phasellus tincidunt tristique pulvinar.
Nunc tincidunt aliquet tincidunt.
</p>
<p>
Nullam ac consequat lorem. Praesent rhoncus consequat arcu ut tempus. Sed non mi fringilla, aliquet lectus in, sagittis dolor. Integer eu lacus consectetur, fringilla eros quis, blandit tellus. Quisque eu arcu dui. Integer finibus varius ultricies. Nulla
vitae metus in velit suscipit cursus. Vestibulum ornare ac diam quis semper. Ut nunc massa, commodo ac lorem ut, faucibus tincidunt nulla. Proin sed urna eget diam ultricies consectetur ac eu tortor.
</p>
<p>
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam erat volutpat. Nunc lobortis feugiat laoreet. Maecenas ligula nulla, ornare hendrerit tempus id, venenatis vitae lacus. Cras cursus a nulla ac dapibus. Class
aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Quisque et lacinia est. Sed quam orci, luctus eu eros et, congue bibendum ipsum. Nunc non sodales est.
</p>
</div>
<hr class="clear">
</div>
Used some CSS hacks to achieve the first layout in Flexbox.
Flexbox does not allow wrapping of text around the images, since it takes its own row or column.
Give the parent container position: relative and the child item image position: absolute and align with the top and left values.
You can adjust the width from the 2nd paragraph to last to occupy 100% width.
.container {
background-color: white;
border-radius: 5px;
box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.5);
display: flex;
flex-flow: row wrap;
max-width: 700px;
padding: 15px;
position: relative;
text-align: left;
}
.container > .image {
max-width: 40%;
min-height: 100px;
min-width: 40%;
order: 4;
position: absolute;
right: 0;
top: 100px;
}
.container > .specials-info {
order: 2;
}
.container > .description {
order: 3;
text-align: left;
}
.container > .description > * {
padding-right: 15px;
}
.container > .description > p {
margin-bottom: 8px;
}
.container > h3 {
font-size: 20px;
font-weight: 600;
order: 1;
text-align: left;
width: 100%;
}
.container > hr {
display: none;
}
.container > .image > img {
max-width: 100%;
object-fit: cover;
object-position: center center;
}
.description > p:not(:first-child) {
width: 100%;
}
.description > p:first-child {
max-width: 60%;
}
<div class="container">
<div class="image">
<img src="http://placehold.it/200x200" />
</div>
<h3>Some Header the is in the wrong place</h3>
<p class="blurbThing"></p>
<div class="description">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean porttitor massa sed nisi eleifend, a molestie felis convallis. Curabitur luctus orci eget rhoncus eleifend. Vestibulum dui odio, feugiat non commodo vitae, luctus a nisl. Aliquam tempor nibh
ac ante ullamcorper egestas. In ut risus quis elit ullamcorper sollicitudin in vel ante. Phasellus id magna sed erat elementum iaculis non sed dolor. Aliquam erat volutpat. Curabitur quis lectus mauris. Vivamus dictum libero nulla, vel egestas libero
dictum ut. Maecenas aliquam lectus vitae arcu lacinia, sed aliquet erat porttitor. Maecenas maximus nunc vel nulla dictum finibus.
</p>
<p>
Aliquam erat volutpat. Donec quam mi, condimentum at dolor sodales, facilisis mollis lacus. Nulla condimentum sagittis elit quis mollis. Vestibulum ultrices, risus eu sagittis tristique, purus augue egestas erat, eget auctor massa augue vitae mauris.
Nulla at lacinia justo. Aenean nec arcu euismod, condimentum lectus vitae, rhoncus nisi. Fusce lorem tortor, tincidunt sed interdum eu, euismod ut purus.
</p>
<p>
Donec ultrices eleifend pulvinar. Donec accumsan felis vel nunc porta pretium. Aenean tellus velit, ultrices quis viverra eget, vehicula vel odio. Ut nec iaculis dolor, eu aliquam felis. Proin quis maximus metus. Phasellus tincidunt tristique pulvinar.
Nunc tincidunt aliquet tincidunt.
</p>
<p>
Nullam ac consequat lorem. Praesent rhoncus consequat arcu ut tempus. Sed non mi fringilla, aliquet lectus in, sagittis dolor. Integer eu lacus consectetur, fringilla eros quis, blandit tellus. Quisque eu arcu dui. Integer finibus varius ultricies. Nulla
vitae metus in velit suscipit cursus. Vestibulum ornare ac diam quis semper. Ut nunc massa, commodo ac lorem ut, faucibus tincidunt nulla. Proin sed urna eget diam ultricies consectetur ac eu tortor.
</p>
<p>
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam erat volutpat. Nunc lobortis feugiat laoreet. Maecenas ligula nulla, ornare hendrerit tempus id, venenatis vitae lacus. Cras cursus a nulla ac dapibus. Class
aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Quisque et lacinia est. Sed quam orci, luctus eu eros et, congue bibendum ipsum. Nunc non sodales est.
</p>
</div>
<hr class="clear">
</div>
Use this margin-top for .image class in snippet1
.container > .image {
max-width: 40%;
min-width: 40%;
min-height: 100px;
float:right;
margin-top:72px;
}