i need to create a layout two column container with the following criteria, please advice:
On Desktop View:
Content position left and will flow below the sidebar on the right when it's longer than sidebar's height.
Sidebar position right.
On Mobile View:
Content flow on top
Sidebar flow below Content box
Minimum Browser Support:
IE8
Breakpoints
max-width: 768px
Problem
The problem that i had was sidebar will always goes to the top of the content instead of below.
Additional Notes
I know this will work if i declare the content div container before the sidebar having both float left will work but that's not the result that i want be cause i want the content overflow around the sidebar when it's longer than the sidebar's height. Solution must be CSS and HTML only. no JS
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div id="container">
<div id="sidebar" class="cf">
<span class="sidebar-heading">Sidebar</span>
</div> <!-- sidebar -->
<div id="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam non porttitor lectus. Suspendisse potenti. Donec porttitor libero id mauris dapibus, vulputate accumsan justo aliquam. Curabitur vel laoreet enim, ac vulputate nibh. In vulputate arcu augue, id vulputate quam volutpat id. Sed suscipit metus eget turpis bibendum viverra.</p>
<p>Donec ornare vestibulum congue. Nullam sed egestas ipsum, eget maximus tellus. Pellentesque tristique leo ac ligula dignissim rutrum. Aenean accumsan nibh augue, nec maximus lorem dictum scelerisque. Nulla commodo nisl justo, vel iaculis magna tristique a. Quisque eleifend urna nibh, in dictum nisl auctor nec. Maecenas venenatis nec tellus at lobortis. Sed in turpis sit amet elit sagittis accumsan ac hendrerit purus. Nulla et nibh vel turpis lacinia efficitur id non erat.</p>
<p>Curabitur aliquet, eros non facilisis sagittis, felis dolor consequat augue, vel tempus sem nisi vitae odio. Duis maximus arcu id enim egestas bibendum. Sed eleifend ex et accumsan fermentum. Vivamus varius sapien vel rutrum vestibulum. Interdum et malesuada fames ac ante ipsum primis in faucibus. Pellentesque eget ornare tortor. </p>
<p>Nunc sollicitudin euismod ex. Vestibulum lobortis libero sit amet tortor rhoncus, eu mollis augue pretium. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla id diam interdum, sodales purus in, ultricies libero. Vestibulum at dapibus erat. Mauris aliquam nulla risus, volutpat egestas est porta vitae. Quisque ultrices nulla vel mattis sagittis. Nam ornare risus arcu, in fermentum sapien pulvinar vel. Nullam ornare euismod lectus in sollicitudin. Sed ac sapien ligula.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam non porttitor lectus. Suspendisse potenti. Donec porttitor libero id mauris dapibus, vulputate accumsan justo aliquam. </p>
<p>Curabitur vel laoreet enim, ac vulputate nibh. In vulputate arcu augue, id vulputate quam volutpat id. Sed suscipit metus eget turpis bibendum viverra.</p>
<p>Donec ornare vestibulum congue. Nullam sed egestas ipsum, eget maximus tellus. Pellentesque tristique leo ac ligula dignissim rutrum. Aenean accumsan nibh augue, nec maximus lorem dictum scelerisque.</p>
<p>Nulla commodo nisl justo, vel iaculis magna tristique a. Quisque eleifend urna nibh, in dictum nisl auctor nec. Maecenas venenatis nec tellus at lobortis. Sed in turpis sit amet elit sagittis accumsan ac hendrerit purus. Nulla et nibh vel turpis lacinia efficitur id non erat.</p>
</div> <!-- #content -->
</div><!-- #container -->
<div class="other-content black cf">
<div class="other-content-inner">
<p>Nunc sollicitudin euismod ex. Vestibulum lobortis libero sit amet tortor rhoncus, eu mollis augue pretium. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla id diam interdum, sodales purus in, ultricies libero. Vestibulum at dapibus erat. Mauris aliquam nulla risus, volutpat egestas est porta vitae. Quisque ultrices nulla vel mattis sagittis. Nam ornare risus arcu, in fermentum sapien pulvinar vel. Nullam ornare euismod lectus in sollicitudin. Sed ac sapien ligula.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam non porttitor lectus. Suspendisse potenti. Donec porttitor libero id mauris dapibus, vulputate accumsan justo aliquam. </p>
<p>Curabitur vel laoreet enim, ac vulputate nibh. In vulputate arcu augue, id vulputate quam volutpat id. Sed suscipit metus eget turpis bibendum viverra.</p>
<p>Donec ornare vestibulum congue. Nullam sed egestas ipsum, eget maximus tellus. Pellentesque tristique leo ac ligula dignissim rutrum. Aenean accumsan nibh augue, nec maximus lorem dictum scelerisque.</p>
</div><!-- .other-content-inner -->
</div><!-- .other-content -->
</body>
</html>
CSS
#container {
width: 100%;
max-width: 960px;
margin: 0 auto;
background: #f3f3f3;
}
.cf:before,
.cf:after {
content: '';
display: table;
}
.cf:after {
clear: both;
}
.other-content {
display: block;
width: 100%;
max-width: 960px;
margin: 0 auto;
}
.other-content-inner {
padding: 15px;
}
.black {
background: #000;
color: #fff;
}
#sidebar {
float: right;
width: 300px;
height: 500px;
background: yellow;
margin: 0 0 30px 30px;
position: relative;
}
.sidebar-heading {
font-weight:bold;
font-size: 30px;
text-align: center;
position: absolute;
left: 0;
right: 0;
bottom:0;
top:0;
margin: auto;
height: 30px;
}
#content {
display: inline;
}
#media only screen and (max-width: 768px) {
#sidebar {
width: 100%;
}
}
Click here to view my code
Let us look at the problem in a different way:
The source order is sidebar, content, footer; which works for desktop and must not be changed
The display order on mobiles should be content, sidebar, footer
We can use CSS flex box to alter the order in which the divs are displayed.
#container {
margin: 0 auto;
max-width: 960px;
}
#sidebar {
float: right;
margin: 0 0 30px 30px;
width: 300px;
background: #FFFF00;
}
#content {
background: #F3F3F3;
}
#footer {
background: #000000;
color: #FFFFFF;
}
#media only screen and (max-width: 768px) {
#container {
display: flex;
flex-direction: column;
}
#sidebar {
float: none;
margin: 0;
width: auto;
order: 2;
}
#content {
order: 1;
}
#footer {
order: 3;
}
}
<div id="container">
<div id="sidebar">
<p style="text-align: center; font-weight: bold;">Use <em>Full page</em> button to view <em>Desktop</em> version</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Immo videri fortasse. Quae cum dixisset, finem ille.</p>
<p>Sed ad bona praeterita redeamus. Tuo vero id quidem, inquam, arbitratu. Ea possunt paria non esse. Duo Reges: constructio interrete. Certe, nisi voluptatem tanti aestimaretis. Res enim concurrent contrariae. Quid adiuvas? Eadem nunc mea adversum te oratio est. Aliter homines, aliter philosophos loqui putas oportere?</p>
</div>
<div id="content">
<p>Sed virtutem ipsam inchoavit, nihil amplius. Cur iustitia laudatur? Quis Aristidem non mortuum diligit? Quid censes in Latino fore?</p>
<p>Id Sextilius factum negabat. Beatus sibi videtur esse moriens. Sumenda potius quam expetenda. Nunc omni virtuti vitium contrario nomine opponitur. Reguli reiciendam; At certe gravius. Contemnit enim disserendi elegantiam, confuse loquitur. Ego vero isti, inquam, permitto. Contemnit enim disserendi elegantiam, confuse loquitur.</p>
<p>Beatus sibi videtur esse moriens. Facete M. Id enim natura desiderat.</p>
</div>
<div id="footer">
<p>Polycratem Samium felicem appellabant. Faceres tu quidem, Torquate, haec omnia; Efficiens dici potest. Venit ad extremum; Quid, de quo nulla dissensio est?</p>
<p>Praeclare hoc quidem. Sed haec omittamus; Sed videbimus.</p>
</div>
</div>
In older browsers you can use display: table-* to achieve similar result:
#container {
margin: 0 auto;
max-width: 960px;
}
#sidebar {
float: right;
margin: 0 0 30px 30px;
width: 300px;
background: #FFFF00;
}
#content {
background: #F3F3F3;
}
#footer {
background: #000000;
color: #FFFFFF;
}
#media only screen and (max-width: 768px) {
#container {
display: table;
width: 100%;
}
#sidebar {
float: none;
margin: 0;
width: auto;
display: table-row-group;
}
#content {
display: table-header-group;
}
#footer {
display: table-footer-group;
}
}
<div id="container">
<div id="sidebar">
<p style="text-align: center; font-weight: bold;">Use <em>Full page</em> button to view <em>Desktop</em> version</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Immo videri fortasse. Quae cum dixisset, finem ille.</p>
<p>Sed ad bona praeterita redeamus. Tuo vero id quidem, inquam, arbitratu. Ea possunt paria non esse. Duo Reges: constructio interrete. Certe, nisi voluptatem tanti aestimaretis. Res enim concurrent contrariae. Quid adiuvas? Eadem nunc mea adversum te oratio est. Aliter homines, aliter philosophos loqui putas oportere?</p>
</div>
<div id="content">
<p>Sed virtutem ipsam inchoavit, nihil amplius. Cur iustitia laudatur? Quis Aristidem non mortuum diligit? Quid censes in Latino fore?</p>
<p>Id Sextilius factum negabat. Beatus sibi videtur esse moriens. Sumenda potius quam expetenda. Nunc omni virtuti vitium contrario nomine opponitur. Reguli reiciendam; At certe gravius. Contemnit enim disserendi elegantiam, confuse loquitur. Ego vero isti, inquam, permitto. Contemnit enim disserendi elegantiam, confuse loquitur.</p>
<p>Beatus sibi videtur esse moriens. Facete M. Id enim natura desiderat.</p>
</div>
<div id="footer">
<p>Polycratem Samium felicem appellabant. Faceres tu quidem, Torquate, haec omnia; Efficiens dici potest. Venit ad extremum; Quid, de quo nulla dissensio est?</p>
<p>Praeclare hoc quidem. Sed haec omittamus; Sed videbimus.</p>
</div>
</div>
Well. i am not sure if it is possible without changing the div position,
so i have come with a proposition, if it is possible for you to use jquery and enquire.js to simulate media queries then it is very easy.
see this demo..
http://codepen.io/anon/pen/xrBAj
or
CODEPEN
just you need to add this script
enquire.register("screen and (max-width:768px)", {
match : function() {
$('#sidebar').insertAfter('#content');
},
unmatch : function() {
$('#sidebar').insertBefore('#content');
}
}).listen();
Related
I'm not entirely sure how to describe it better than the title, so I'll just draw it.
In the below images, the horizontal lines are the "text", the small box is the image, and the bigger box is the whole webpage. I want the text to behave like it does in the drawings and I have no idea how.
I can get the text to wrap around the image using float, and i can get the text vertically centered using flexbox or grid or table, but i can't do both at the same time. Using any of those techniques to vertically center the text appears to encounter the clearing bug and they basically treat height:100% as if the image wasn't there.
You can achieve with help of float and flex properties. So you will need to check dynamically small amount of text if exist then add .box-flex class in .box if amount of text is more then don't need to add .box-flex class.
With flex display I am using order property for transform image div from left to right.
I hope below snippet will help you a lot.
*{box-sizing: border-box;}
.box{
font-family: Arial;
font-size: 16px;
line-height: 22px;
width: 100%;
max-width: 480px;
min-height: 100px;
background-color: rgb(148, 206, 203);
padding: 15px;
margin: 15px auto 15px auto;
color: #333;
border-radius: 8px;
}
.img{
width: 100px;
height: 100px;
min-width: 100px;
max-width: 100px;
max-height: 100px;
background: coral;
margin-left: 12px;
float: right;
border-radius: 4px;
}
.txt{
position: relative;
min-height: inherit;
padding: 0;
text-align: justify;
}
.box-flex{
display: flex;
justify-content: space-between;
}
.box-flex .img{
order: 1;
}
.box-flex .txt{
padding: 0;
align-self: center;
min-height: auto;
}
<div class="box box-flex">
<div class="img"></div>
<div class="txt">
If small amout of text (use .box-flex)
</div>
</div>
<div class="box">
<div class="img"></div>
<div class="txt">
Lorem ipsum dolor sit amet conse ctetur adipis icing elit. Unde adipisci soluta beatae minima, dolores atque voluptas, explicabo mollitia, sunt alias nihil dolo ribus veritatis perfe rendis quib usdam error exerci ationem quia conseq uuntur eos digni ssimos sed veniam? Rerum saepe qui sed corporis volupt atibus soluta quo eaque. Quidem recu sandae dolorum nesciunt Rerum saepe qui sed.
</div>
</div>
CSS Exclusions would help here: it allows you to wrap text around any element, including an absolutely positioned element. Unfortunately, this spec is still a working draft, and no browsers support it yet.
Here is a snippet to illustrate how CSS Exclusions would be useful to you. As you can see, it uses absolute positioning rather than a float, and everything works as you want it to, except that the text does not wrap. The exclusion rule wrap-flow has no effect, sadly.
.d1 {
position: relative;
border: 2px solid cyan;
min-height: 200px;
margin-bottom: 2em;
display: flex;
flex-direction: column;
justify-content: center;
padding: 0 1em;
}
.excl {
position: absolute;
top: 0;
right: 0;
width: 100px;
height:200px;
background-color: lime;
wrap-flow: both;
}
<div class="d1">
<div class="excl"></div>
<div class="txt">
<p>
Lorem ipsum
</p>
<p>
Nunc eu
</p>
</div>
</div>
<div class="d1">
<div class="excl"></div>
<div class="txt">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse odio massa, tempor auctor posuere et, consequat non velit. Suspendisse potenti. Proin hendrerit eu neque id varius. Morbi consequat dui neque, non fringilla dolor pretium vitae. Pellentesque congue nec justo vel mattis. Fusce lobortis turpis a urna elementum eleifend. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla rhoncus sagittis lacus at dignissim.
</p>
<p>
Nunc eu rhoncus massa. Nam pretium pellentesque faucibus. Mauris fringilla erat et nunc feugiat hendrerit. Nullam bibendum faucibus quam ut rhoncus. Maecenas non orci dui. Suspendisse maximus feugiat augue, sit amet ultrices arcu egestas at. Phasellus eget libero purus. Suspendisse potenti. Nulla vestibulum diam at pharetra vehicula. Donec quis dignissim tellus. In dictum sagittis ex, euismod ultricies leo tempor vel.
</p>
<p>
Donec consectetur facilisis neque, eu dignissim massa interdum vel. Fusce vestibulum libero a ex malesuada, et pharetra risus gravida. Duis vehicula, dolor ut mattis sagittis, metus ex lacinia velit, sed interdum magna nisi eu magna. Aenean porttitor pulvinar lectus, sit amet efficitur ligula suscipit ut. Vivamus lobortis, felis at ultrices eleifend, risus ex ullamcorper lacus, nec aliquam orci sapien vitae elit. Suspendisse vitae nunc ante. Curabitur consequat diam et enim varius, quis mattis lectus posuere. Quisque sollicitudin, eros ut aliquet gravida, ipsum lectus consequat arcu, ac congue libero ante nec tellus. Mauris massa dolor, dapibus a metus eu, vehicula ultricies justo. Integer eu turpis non mauris finibus congue. Donec rhoncus felis in elit tempor lacinia. Ut placerat sodales libero, in laoreet nibh commodo quis.
</p>
<p>
Aliquam in lacus tempor, viverra quam in, interdum lorem. Aliquam bibendum, sem eget egestas iaculis, velit urna finibus est, a dapibus nulla orci at nibh. Cras eget ullamcorper nisl. Vivamus maximus, lorem a rutrum semper, eros orci auctor urna, a pharetra enim felis id arcu. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nam vitae consequat ipsum. Quisque egestas viverra elit, vel pulvinar enim. Vestibulum faucibus mattis sem sed placerat. Fusce pretium, mauris eget facilisis lobortis, lectus enim finibus lacus, a finibus orci odio at ante. Nullam non tincidunt turpis, ut tempor dolor. Aliquam sit amet augue eu orci cursus pulvinar eleifend et lacus. Nam imperdiet lectus quis urna fringilla convallis. Mauris pretium fringilla iaculis. Donec volutpat lacus urna, in convallis nisi tincidunt luctus. Maecenas ut augue metus. Aenean ornare erat eu auctor volutpat.
</p>
<p>
Praesent a odio enim. Proin tincidunt vulputate nibh, eget rhoncus arcu vulputate ultricies. Etiam nec magna nec est pharetra aliquet. Vivamus rhoncus convallis lectus at rhoncus. Nam elit risus, volutpat sit amet erat sit amet, fringilla tempus erat. Donec id diam sodales metus rutrum molestie eu ac erat. Mauris condimentum erat nec leo venenatis sodales. Interdum et malesuada fames ac ante ipsum primis in faucibus. Proin quis sem mattis, pellentesque dui id, imperdiet justo. Donec id iaculis ante. Morbi maximus nibh eget convallis cursus. Suspendisse tristique felis et tempus vulputate. Morbi id tincidunt sem, eget vestibulum tortor.
</p>
</div>
</div>
In the meantime, one suggestion would be to use a flexbox when you only have a small amount of text to go beside the image, and use a float when you have more text to go there. Otherwise you will simply have to choose between float or flex and live with it not looking quite right, or go for a different look.
you can use
position : relative (for the text)
top:50%
transform:translateY(-50%)
this will center the text at the center of the div vertically
or you can
use the vertical allign for both image and text
vertical-allign: middle
i don't know if i just answered your question or something is missing. let me know if it doesn't work to fix this again.
Codepen: https://codepen.io/pprunesquallor/pen/qKxvrX
I'm a beginner playing around with grid and flexbox.
I'd like the height of the article element (yellow) to be only just as long as the text requires (so in this case cca half as long), and therefore the aside element (grey) should be of the same height depending on the height of the article, and scrollable.
Thank you in advance!!
html, body {
height: 100%;
}
body {
display: grid;
grid-template-columns: 1fr;
grid-template-areas:
"header"
"main"
"footer";
align-items: stretch;
}
header {
grid-area: header;
display: flex;
flex-direction: column;
background-color: lime;
}
header > h1 {
margin: 0;
background-color: brown;
}
nav {
display: flex;
flex-direction: row;
background-color: orange;
}
main {
grid-area: main;
display: flex;
flex-direction: row;
background-color: red;
}
article {
background-color: yellow;
}
aside {
width: 50%;
overflow: auto;
overflow-y: scroll;
background-color: grey;
}
footer {
grid-area: footer;
background-color: pink;
}
<html lang="en">
<body>
<header>
<h1 id="title">Header Title</h1>
<nav>
<form style="display: inline" action="http://google.com" target="_blank">
<button>Link 1</button>
</form>
<form style="display: inline" action="http://google.com" target="_blank">
<button>Link 2</button>
</form>
<form style="display: inline" action="http://google.com" target="_blank">
<button>Link 3</button>
</form>
</nav>
</header>
<main id="main">
<article id="info">
<h2>Article Title</h2>
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute <a id="link" href="" target="_blank">Link</a> irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
<br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean leo urna, porta ac interdum placerat, rhoncus vel lectus. Aenean consectetur condimentum augue fringilla elementum. Mauris vel fermentum nisi. Donec nec condimentum sapien. Donec feugiat consequat est ac hendrerit. Phasellus nec turpis ex. Vestibulum malesuada leo mauris. Proin posuere ultricies mauris, at varius lorem laoreet sed. Nam congue, arcu sed feugiat scelerisque, massa turpis convallis ante, eu lobortis orci leo et ex. Vivamus ut aliquet massa.
<br>
Curabitur placerat gravida est, eu rutrum metus suscipit sit amet. Mauris placerat nibh felis, sit amet semper dolor facilisis ornare. Proin ut ultrices nisl. Aliquam laoreet porttitor ex quis elementum. Nullam nibh metus, convallis nec lectus vel, sollicitudin malesuada diam. Quisque nec semper turpis. Etiam vel eros porta, tincidunt nisl at, luctus elit. Fusce tristique nulla pharetra sagittis fermentum. Duis eget pharetra dolor, sagittis venenatis purus. Sed volutpat nisl et turpis consectetur blandit. In nunc eros, vehicula eu augue non, vehicula varius arcu. Mauris ut est elementum, tempus tellus pharetra, pretium urna. Nunc hendrerit finibus enim at efficitur. Vestibulum sagittis dolor et vehicula feugiat.
</article>
<aside><h3>Aside</h3>
Quisque volutpat turpis eu turpis elementum placerat. Integer auctor venenatis turpis, sit amet accumsan mi sagittis a. In scelerisque tempor dolor, sit amet mattis mi accumsan porta. Integer lacinia lobortis est sit amet bibendum. Vivamus faucibus aliquet odio vel vestibulum. Proin sit amet accumsan eros, hendrerit posuere magna. Ut et odio ac velit congue tincidunt. Suspendisse quis ex egestas, facilisis turpis id, cursus neque. Donec vulputate urna vel nisl convallis, pellentesque egestas felis placerat. Curabitur sit amet odio eget ante porttitor convallis et tempus leo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Etiam tellus sem, pharetra ut odio id, lobortis volutpat sem. In dictum at eros at vulputate. Morbi vel dui non erat vehicula suscipit quis eu ante. Proin condimentum sem dui, at mollis justo sollicitudin quis. Duis hendrerit tempus felis.
<br>
Morbi eget libero tristique eros porta tincidunt in et eros. Fusce tincidunt sit amet leo eu gravida. Maecenas ac imperdiet magna. Nullam tincidunt ultricies dignissim. Sed placerat leo in libero dignissim, sit amet volutpat arcu posuere. Sed consectetur eu arcu eu pulvinar. Integer varius rutrum orci, ac maximus nibh laoreet in. Duis laoreet elit quis erat fermentum luctus. Aliquam sollicitudin id odio sit amet vehicula. Sed tempor id quam vel lobortis.
<br>
Duis accumsan, sem et suscipit dictum, enim magna ornare justo, condimentum vulputate eros felis at ex. Nulla facilisi. Nunc porttitor semper est, eget accumsan ex accumsan quis. Integer tincidunt dignissim nisl. Sed ultrices venenatis massa, sed maximus massa pharetra ac. Sed tempus tempus dolor id pulvinar. Donec rutrum, diam et condimentum sollicitudin, ex nulla faucibus quam, quis eleifend risus ante aliquam turpis.
</aside>
</main>
<footer>Footer</footer>
</body>
</html>
Is there a way to do this just with CSS?
You could use positioning.
HTML: Wrap the aside content in an additional container
<aside>
<div class="aside__inner">
...content...
</div>
</aside>
CSS:
aside {
position: relative;
}
.aside__inner {
position: absolute;
}
codepen
If you need the header and footer to expand so that the article is only as tall as its content, you can add grid-template-rows: auto min-content auto to body.
I'd also suggest using min-width instead width on aside
html,
body {
height: 100%;
}
body {
display: grid;
grid-template-columns: 1fr;
grid-template-areas: "header" "main" "footer";
align-items: stretch;
/* added */
grid-template-rows: auto min-content auto;
}
header {
grid-area: header;
display: flex;
flex-direction: column;
background-color: lime;
}
header>h1 {
margin: 0;
background-color: brown;
}
nav {
display: flex;
flex-direction: row;
background-color: orange;
}
main {
grid-area: main;
display: flex;
flex-direction: row;
background-color: red;
}
article {
background-color: yellow;
}
aside {
width: 50%;
overflow: auto;
overflow-y: scroll;
background-color: grey;
position: relative;
}
.aside__inner {
position: absolute;
}
footer {
grid-area: footer;
background-color: pink;
}
<html lang="en">
<body>
<header>
<h1 id="title">Header Title</h1>
<nav>
<form style="display: inline" action="http://google.com" target="_blank">
<button>Link 1</button>
</form>
<form style="display: inline" action="http://google.com" target="_blank">
<button>Link 2</button>
</form>
<form style="display: inline" action="http://google.com" target="_blank">
<button>Link 3</button>
</form>
</nav>
</header>
<main id="main">
<article id="info">
<h2>Article Title</h2>
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
<a
id="link" href="" target="_blank">Link</a> irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
<br> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean leo urna, porta ac interdum placerat, rhoncus vel lectus. Aenean consectetur condimentum augue fringilla elementum. Mauris vel fermentum nisi. Donec nec condimentum sapien. Donec
feugiat consequat est ac hendrerit. Phasellus nec turpis ex. Vestibulum malesuada leo mauris. Proin posuere ultricies mauris, at varius lorem laoreet sed. Nam congue, arcu sed feugiat scelerisque, massa turpis convallis ante, eu lobortis orci
leo et ex. Vivamus ut aliquet massa.
<br> Curabitur placerat gravida est, eu rutrum metus suscipit sit amet. Mauris placerat nibh felis, sit amet semper dolor facilisis ornare. Proin ut ultrices nisl. Aliquam laoreet porttitor ex quis elementum. Nullam nibh metus, convallis nec lectus
vel, sollicitudin malesuada diam. Quisque nec semper turpis. Etiam vel eros porta, tincidunt nisl at, luctus elit. Fusce tristique nulla pharetra sagittis fermentum. Duis eget pharetra dolor, sagittis venenatis purus. Sed volutpat nisl et turpis
consectetur blandit. In nunc eros, vehicula eu augue non, vehicula varius arcu. Mauris ut est elementum, tempus tellus pharetra, pretium urna. Nunc hendrerit finibus enim at efficitur. Vestibulum sagittis dolor et vehicula feugiat.
</article>
<aside>
<div class="aside__inner">
<h3>Aside</h3>
Quisque volutpat turpis eu turpis elementum placerat. Integer auctor venenatis turpis, sit amet accumsan mi sagittis a. In scelerisque tempor dolor, sit amet mattis mi accumsan porta. Integer lacinia lobortis est sit amet bibendum. Vivamus faucibus aliquet
odio vel vestibulum. Proin sit amet accumsan eros, hendrerit posuere magna. Ut et odio ac velit congue tincidunt. Suspendisse quis ex egestas, facilisis turpis id, cursus neque. Donec vulputate urna vel nisl convallis, pellentesque egestas felis
placerat. Curabitur sit amet odio eget ante porttitor convallis et tempus leo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Etiam tellus sem, pharetra ut odio id, lobortis volutpat sem. In dictum
at eros at vulputate. Morbi vel dui non erat vehicula suscipit quis eu ante. Proin condimentum sem dui, at mollis justo sollicitudin quis. Duis hendrerit tempus felis.
<br> Morbi eget libero tristique eros porta tincidunt in et eros. Fusce tincidunt sit amet leo eu gravida. Maecenas ac imperdiet magna. Nullam tincidunt ultricies dignissim. Sed placerat leo in libero dignissim, sit amet volutpat arcu posuere.
Sed consectetur eu arcu eu pulvinar. Integer varius rutrum orci, ac maximus nibh laoreet in. Duis laoreet elit quis erat fermentum luctus. Aliquam sollicitudin id odio sit amet vehicula. Sed tempor id quam vel lobortis.
<br> Duis accumsan, sem et suscipit dictum, enim magna ornare justo, condimentum vulputate eros felis at ex. Nulla facilisi. Nunc porttitor semper est, eget accumsan ex accumsan quis. Integer tincidunt dignissim nisl. Sed ultrices venenatis massa,
sed maximus massa pharetra ac. Sed tempus tempus dolor id pulvinar. Donec rutrum, diam et condimentum sollicitudin, ex nulla faucibus quam, quis eleifend risus ante aliquam turpis.
</div>
</aside>
</main>
<footer>Footer</footer>
</body>
</html>
Would this do what you want? https://codepen.io/anon/pen/OEZMwV
I just added the following JS, added an ID to <aside>, and changed the display of the #info id.
$("#aside").css({
'height': ($("#info").height() + 'px')
});
Here's a pen where I have this working.
https://codepen.io/anon/pen/jKKvpb
Basically, what you're asking for is not possible given the HTML/CSS you provided. The grid rows will automatically size themselves according to the height of the tallest item in the column. There's no way to grab the natural height of the <article> element due to the the flex css on <main>.
The workaround is to add a wrapper <div> around the <article> element. I did this with jQuery because I'm lazy but you should probably add it to the HTML. I did add some css to make the colors of the divs match up.
Here's my code:
//wrap the article in a div
jQuery('#info').wrap('<div id="article-wrap"></div>');
//a function that gets the height of the article and sets the aside to the height of the article
function sizeMe() {
var height= jQuery('#info').height();
jQuery('#aside').css('height', height);
}
//run the function on page load
sizeMe();
//to make it responsive run the function if the page is resized.
jQuery(window).resize( function(){
sizeMe();
});
I am trying to move my footer to the bottom and in the cases if the content is not long enough, then push it to the bottom of the screen. I read that it can be achieved solely by using css, however I couldn't achieve it.
I tried creating columns,
<body>
<div id="wrapper">
<nav class="navbar navbar-default" role="navigation">
...
</nav>
<div id="content">
...
</div>
<div id="footer">
...
</div>
</div>
</body>
Then, in my css, I tried using:
#footer {
height: 30px;
width:100%;
background-color: #2D2D2D;
position: absolute;
left: 0;
bottom: 0;
}
#wrapper {
background-color: purple;
position: absolute;
top: 0px;
bottom: 0px;
width: 100%;
}
but no luck :/
Here I created it in bootply. Here, I added bunch of <br> tags to lengthen the content and added some text underneath. What I want is instead if content is short, stick the footer to the bottom of the page (not where content ends in the middle of the screen); and if content is long, where the content ends just below content.
What am I doing wrong/missing out?
Well, if you want it to always stay at the bottom, you can use this code. Remove the <p> tags and run again to test without text
html,body {
height: 100%;
margin: 0;
padding: 0;
}
#wrapper {
min-height: 100%;
position: relative;
padding-bottom: 5em;
box-sizing: border-box;
}
#content {
background: red;
}
footer {
height: 4em;
background: blue;
position: absolute;
bottom: 0;
left: 0;
right: 0;
}
<body>
<div id="wrapper">
<div id="content">
<p> Lorem ipsum dolor sit amet, adipiscing odio, vitae nulla luctus consectetuer, cras odio turpis adipiscing lobortis, tempor luctus morbi. Sed vitae id in, vel tempor mattis rutrum, eu non mauris in erat lectus enim, eget morbi quo imperdiet, mi lorem aliquam sed accumsan orci. Rhoncus nonummy turpis ipsum tempus tempor elementum, vestibulum sint tempor, accumsan mauris scelerisque rutrum. Eget rhoncus hendrerit, ipsum ipsum nunc sit ut arcu aenean, urna in justo reprehenderit mollis, suscipit erat, consequat suspendisse turpis duis nec pellentesque tristique. Lectus velit, vestibulum lorem enim turpis a eu mauris, mauris bibendum sociis lobortis sodales sed, eget rhoncus quisque consequat curabitur sit. Sodales velit et convallis interdum quis rutrum, dolor lobortis neque mi eget lorem, sed tincidunt dis convallis. Feugiat in conubia nec ipsum, nec rutrum nisl, vitae id vestibulum sollicitudin fringilla ac ligula, eget rutrum in. Tortor mollis amet, nulla pharetra nec in, vel vulputate nec eu diam, cras massa adipiscing pulvinar, id pulvinar massa dignissim. Quisque lorem enim vel orci vestibulum, consectetuer tincidunt et egestas.</p>
<p>
Donec nunc nec in, ut non lorem eget tortor facilisi sed, eget tempor a duis urna, pellentesque proin blandit et, mollis dictum dictum. Aliquet massa praesent vitae lorem at posuere, id lobortis nec id dignissim lorem nisi, at amet occaecati, duis enim quisque quam est, ultrices nunc semper vivamus praesent aenean nam. Natoque neque adipiscing, ipsum magna libero. Pellentesque mattis, fusce maecenas sit vel, accumsan eleifend et justo cras dui, wisi quisque interdum amet arcu bibendum, ante eget non mattis non. Iaculis congue cras feugiat. Platea aliquet suspendisse, orci nulla aliquam adipiscing in. Nullam libero velit in pellentesque diam est, urna phasellus, pellentesque porta eu. Ante lacus duis amet libero odio, accumsan neque tincidunt imperdiet, wisi praesent diam arcu et, erat aliquam feugiat ultricies tortor ullamcorper. Vestibulum sapien velit, ante fusce cursus volutpat tellus, eros officiis, ridiculus cum eu suscipit, felis dui sed nulla hac neque fermentum. Vivamus sagittis, malesuada nullam, dolor sit sed sollicitudin et maecenas fermentum, non nunc dapibus purus. Aliquam rhoncus aliquam sit fermentum, curabitur nulla accumsan.</p>
<p>
Nec consequat. Purus neque inceptos suscipit dictum, dolor massa ut egestas proin sed ultrices, eleifend at sed sit mi adipiscing sociis. Nostra laoreet metus nulla in. Urna eget, accumsan id mattis morbi, etiam a consequat curabitur, in felis vel. Aliquam feugiat sed, sit ligula sit praesent lobortis orci metus, nulla cursus mi velit vitae, a erat elit, velit ultrices consectetur libero perferendis libero. Risus sed, suspendisse urna in eget voluptas tristique, aliquam justo lectus, rutrum scelerisque, sem nibh qui dictum aliquet lacinia ut. Urna sagittis ac tristique gravida risus aliquam, dictum ipsum ac sodales, felis mauris repellendus porttitor aenean, orci vel feugiat nunc hendrerit. Porta eu, etiam pellentesque mauris et aliquam consectetuer donec, molestie dui magna enim, ac eu erat ut, lectus ligula feugiat urna per. Ornare aliquet ligula, ultricies sint arcu ipsum nulla. Vel ut vitae dui adipiscing.</p>
</div>
<footer>This is a footer</footer>
</div>
</body>
The trick is to use position: relative on the footer's container element and position: absolute on the footer to actually push it to the end of the container. Position: fixed isn't necessary.
https://codepen.io/cbracco/pen/zekgx
html {
height: 100%;
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
body {
position: relative;
margin: 0;
padding-bottom: 6rem;
min-height: 100%;
font-family: "Helvetica Neue", Arial, sans-serif;
}
.footer {
position: absolute;
right: 0;
bottom: 0;
left: 0;
padding: 1rem;
background-color: #efefef;
text-align: center;
}
This example does the same thing with a container element over the entire page, instead of operating on the html and body tags.
http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page
This sends the footer to bottom of the bage no matter how much text you have:
.footer { background-color: #2D2D2D;
position:absolute;
bottom:0px;
width: 100%;
margin: 0;
background-color: #000;
height: 30px;/* or however high you would like */ }
html, body {
height: 100%; }
.wrapper { background-color: purple;
position: absolute;
width: 100%;
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -30px; }
.footer, .push {
30px; }
.navbar {
background-color: red }
Ok, sorry for the misunderstanding, now it's fixed: http://www.bootply.com/N3XiwwGr9q#
I am fairly new to web design and i'm trying to test out page layouts. I have a layout with a header, left floating div, right floating div, body, and footer. What i'm trying to do is to get the "body" div to fill the vertical space between the floating divs. And also, if possible, how could I get the entire layout to fill the vertical space of the screen? I included an image at the bottom of the page, i'm trying to fill in all the scribbled space.
Here is my html code,
div.container {
width: 100%;
border: solid 1px;
}
header,
footer {
background-color: rgb(000, 000, 000);
color: rgb(255, 255, 255);
padding: 10px;
text-align: center;
clear: left;
}
#nav {
background-color: rgba(50, 50, 50, 0.8);
float: left;
width: 150px;
padding: 10px;
}
#body {
background-color: rgba(100, 100, 100, 0.8);
overflow: hidden;
padding: 10px;
text-align: center;
}
#right {
background-color: rgba(50, 50, 50, 0.8);
float: right;
max-width: 150px;
padding: 10px;
}
<body>
<div class="container">
<header>
<h1>Title</h1>
</header>
<div id="nav">
<p>Lorem ipsum dolor sit amet, integer velit senectus sit, proin ut id nec eu vel aliquet, pellentesque et venenatis lacinia aliquet wisi, bibendum mauris, fames turpis. Lectus nibh gravida wisi pede vel. Eu feugiat ligula aliquam mi, dolor quis, sollicitudin
ut, quis mauris magna lectus. Velit a dignissim et, phasellus convallis sed condimentum, cum vitae consequat laoreet vestibulum. Rhoncus felis porttitor vitae, est mi ac etiam et ligula est. Rhoncus egestas erat fringilla, praesent et augue ultricies
aliquam. Nascetur imperdiet nisl porttitor aenean, ante ipsum ornare magni, arcu consectetur, a pulvinar.</p>
</div>
<div id="right">
<p>Lorem ipsum dolor sit amet, integer velit senectus sit, proin ut id nec eu vel aliquet, pellentesque et venenatis lacinia aliquet wisi, bibendum mauris, fames turpis. Lectus nibh gravida wisi pede vel. Eu feugiat ligula aliquam mi, dolor quis, sollicitudin
ut, quis mauris magna lectus. Velit a dignissim et, phasellus convallis sed condimentum, cum vitae consequat laoreet vestibulum. Rhoncus felis porttitor vitae, est mi ac etiam et ligula est. Rhoncus egestas erat fringilla, praesent et augue ultricies
aliquam. Nascetur imperdiet nisl porttitor aenean, ante ipsum ornare magni, arcu consectetur, a pulvinar.</p>
</div>
<div id="body">
<p>Lorem ipsum dolor sit amet, integer velit senectus sit, proin ut id nec eu vel aliquet, pellentesque et venenatis lacinia aliquet wisi, bibendum mauris, fames turpis. Lectus nibh gravida wisi pede vel. Eu feugiat ligula aliquam mi, dolor quis, sollicitudin
ut, quis mauris magna lectus. Velit a dignissim et, phasellus convallis sed condimentum, cum vitae consequat laoreet vestibulum. Rhoncus felis porttitor vitae, est mi ac etiam et ligula est. Rhoncus egestas erat fringilla, praesent et augue ultricies
aliquam. Nascetur imperdiet nisl porttitor aenean, ante ipsum ornare magni, arcu consectetur, a pulvinar.</p>
</div>
<footer>Bottom</footer>
</div>
</body>
</html>
What i'm trying to figure out.
Try this CSS:
div.container {
width:100%;
border:solid 1px;
}
header, footer {
background-color:rgb(000,000,000);
color:rgb(255,255,255);
padding:10px;
text-align:center;
clear:left;
}
#nav {
background-color:rgba(50,50,50,0.8);
float:left;
width:150px;
padding:10px;
}
#body {
background-color:rgba(100,100,100,0.8);
overflow:hidden;
padding:10px;
text-align:center;
}
#right {
background-color:rgba(50,50,50,0.8);
float:right;
max-width:150px;
padding:10px;
}
https://jsfiddle.net/xwsxupv0/1/
I have a paragraph inside of a div but the text is too long and the text-overflow does not work, and I have read that nowrap fixes my problem but in this case it doesn't as the paragraph needs to be a certain height and not all on 1 line (needs to be multiple lines).
This image shows what I have and what I want it to look like (The image on the left is what I have now and the image on the right is how I want it to look):
http://i.imgur.com/5l5SSmh.jpg
It maybe worth mentioning that I will be adding JavaScript to change the red background containers height and I was hoping the text would change with it while still having the text-overflow applied to it.
This is my code:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#expPanel {
background-image: url('http://i.imgur.com/76BdtTw.jpg');
background-repeat: no-repeat;
background-size: 100% 100%;
position: absolute;
}
#expContainer {
display:block;
overflow: hidden;
text-overflow: ellipsis;
background: red;
height: 100%;
}
#content {
margin-top: 80px;
padding: 10px 20px;
color: blue;
font-family: Arial, "Times New Roman", Times, serif;
}
</style>
</head>
<body>
<div style="position: relative;">
<div id="expPanel" style="width: 600px; height: 280px;">
<div id="expContainer">
<p id="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi non rutrum libero. Integer imperdiet tellus at ipsum dictum, ut dapibus nulla egestas. Ut tristique cursus finibus. Nunc et sapien a nisl cursus ultrices. Ut aliquam, urna et aliquam faucibus, sem velit iaculis orci, sit amet venenatis leo quam a nibh. Nunc commodo eu lectus vel tempor. Curabitur sed velit euismod, sagittis quam a, cursus ipsum. Maecenas in dui maximus mauris bibendum tincidunt a at turpis. Curabitur efficitur metus vitae augue tristique dapibus. Vestibulum porta laoreet aliquet. Phasellus aliquam, lacus eu pharetra lobortis, quam quam sollicitudin turpis, ultrices convallis libero risus sed nunc. Maecenas eget ornare orci. Suspendisse commodo tellus et arcu sodales ultrices. In lobortis ullamcorper justo consectetur facilisis. Cras at urna auctor, pulvinar nisi porta, pellentesque sapien. Etiam sapien quam, pulvinar eget lacus ac, tempor lobortis ante.
</p>
</div>
</div>
</div>
</body>
</html>
Solution that works responsively: line-height
The only way to do this is by adjusting the line height so it doesn't cut off the middle of the text, here is an example:
var btn = document.querySelector('button');
btn.onclick = function() {
var container = document.querySelector('.container');
container.style.height = 'auto';
btn.style.display = 'none';
return false;
};
.container {
background: #ddd;
height: 70px;
padding: 10px;
overflow: hidden;
}
.container p {
line-height: 1.6;
margin: 0;
}
button {
display: inline-block;
margin: 10px 0;
}
<div class="container">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem officiis eius enim consectetur saepe nisi voluptatem ut possimus. Ab aliquid blanditiis temporibus! Optio iusto odit illo inventore aspernatur. Expedita pariatur. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem officiis eius enim consectetur saepe nisi voluptatem ut possimus. Ab aliquid blanditiis temporibus! Optio iusto odit illo inventore aspernatur. Expedita pariatur.</p>
</div>
<button>Read more</button>
You can set overflow css property of container to scroll.
#expContainer {
display:block;
overflow:scroll;
text-overflow: ellipsis;
background: red;
height: 100%;
}
As you have fixed height of #expPanel , setting overflow of #expContainer will solve the problem.
You can set overflow CSS property of container to scroll/auto.
If you want your div must grow and show all content without scrollbar then remove overflow:hidden
#expPanel {
background-image: url('http://i.imgur.com/76BdtTw.jpg');
background-repeat: no-repeat;
background-size: 100% 100%;
position: absolute;
}
#expContainer {
display:block;
overflow: auto; /*scroll*/
text-overflow: ellipsis;
background: red;
height: 100%;
}
#content {
margin-top: 80px;
padding: 10px 20px;
color: blue;
font-family: Arial, "Times New Roman", Times, serif;
}
<div style="position: relative;">
<div id="expPanel" style="width: 600px; height: 280px;">
<div id="expContainer">
<p id="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi non rutrum libero. Integer imperdiet tellus at ipsum dictum, ut dapibus nulla egestas. Ut tristique cursus finibus. Nunc et sapien a nisl cursus ultrices. Ut aliquam, urna et aliquam faucibus, sem velit iaculis orci, sit amet venenatis leo quam a nibh. Nunc commodo eu lectus vel tempor. Curabitur sed velit euismod, sagittis quam a, cursus ipsum. Maecenas in dui maximus mauris bibendum tincidunt a at turpis. Curabitur efficitur metus vitae augue tristique dapibus. Vestibulum porta laoreet aliquet. Phasellus aliquam, lacus eu pharetra lobortis, quam quam sollicitudin turpis, ultrices convallis libero risus sed nunc. Maecenas eget ornare orci. Suspendisse commodo tellus et arcu sodales ultrices. In lobortis ullamcorper justo consectetur facilisis. Cras at urna auctor, pulvinar nisi porta, pellentesque sapien. Etiam sapien quam, pulvinar eget lacus ac, tempor lobortis ante.
</p>
</div>
</div>
</div>