Trying to make a kind of 'master-detail' layout with angular material in an electron app.
kinda like this:
I have a toolbar that i want always pinned to the top, and 2 'columns' that should scroll independently, and are full height (minus the height of the toolbar...)
But despite tries putting md-content tags in different places, and messing with css display and positioning... i havent been able to nail this!
what is the 'right' (read: angular material) way to do this? it's gotta have something to do with flexbox css somewhere?
Here you go - CodePen
The main things to point out are
layout-fill and layout="column" in the top div
overflow: auto for the content
Markup
<div ng-controller="AppCtrl" ng-cloak="" ng-app="MyApp" layout-fill layout="column">
<md-toolbar class="md-hue-2">
<div class="md-toolbar-tools">
<md-button class="md-icon-button" aria-label="Settings" ng-disabled="true">
<md-icon md-svg-icon="img/icons/menu.svg"></md-icon>
</md-button>
<h2>
<span>Toolbar with Disabled/Enabled Icon Buttons</span>
</h2>
<span flex></span>
<md-button class="md-icon-button" aria-label="Favorite">
<md-icon md-svg-icon="img/icons/favorite.svg" style="color: greenyellow;"></md-icon>
</md-button>
<md-button class="md-icon-button" aria-label="More">
<md-icon md-svg-icon="img/icons/more_vert.svg"></md-icon>
</md-button>
</div>
</md-toolbar>
<md-content layout="row" flex>
<md-list id="list" flex="20">
<md-list-item
class="md-3-line"
ng-repeat="item in [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10]"
ng-click="null">
<div class="md-list-item-text" layout="column">
<h3>Hello world</h3>
<h4>Blah blah</h4>
<p>123456789</p>
</div>
</md-list-item>
</md-list>
<md-tabs md-border-bottom flex="80">
<md-tab label="one">
<md-content class="tabContent" class="md-padding">
<h1 class="md-display-2">Tab One</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla venenatis ante augue. Phasellus volutpat neque ac dui mattis vulputate. Etiam consequat aliquam cursus. In sodales pretium ultrices. Maecenas lectus est, sollicitudin consectetur felis nec, feugiat ultricies mi.</p>
</md-content>
</md-tab>
<md-tab label="two">
<md-content class="tabContent" class="md-padding">
<h1 class="md-display-2">Tab Two</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla venenatis ante augue. Phasellus volutpat neque ac dui mattis vulputate. Etiam consequat aliquam cursus. In sodales pretium ultrices. Maecenas lectus est, sollicitudin consectetur felis nec, feugiat ultricies mi. Aliquam erat volutpat. Nam placerat, tortor in ultrices porttitor, orci enim rutrum enim, vel tempor sapien arcu a tellus. Vivamus convallis sodales ante varius gravida. Curabitur a purus vel augue ultrices ultricies id a nisl. Nullam malesuada consequat diam, a facilisis tortor volutpat et. Sed urna dolor, aliquet vitae posuere vulputate, euismod ac lorem. Sed felis risus, pulvinar at interdum quis, vehicula sed odio. Phasellus in enim venenatis, iaculis tortor eu, bibendum ante. Donec ac tellus dictum neque volutpat blandit. Praesent efficitur faucibus risus, ac auctor purus porttitor vitae. Phasellus ornare dui nec orci posuere, nec luctus mauris semper.</p>
<p>Morbi viverra, ante vel aliquet tincidunt, leo dolor pharetra quam, at semper massa orci nec magna. Donec posuere nec sapien sed laoreet. Etiam cursus nunc in condimentum facilisis. Etiam in tempor tortor. Vivamus faucibus egestas enim, at convallis diam pulvinar vel. Cras ac orci eget nisi maximus cursus. Nunc urna libero, viverra sit amet nisl at, hendrerit tempor turpis. Maecenas facilisis convallis mi vel tempor. Nullam vitae nunc leo. Cras sed nisl consectetur, rhoncus sapien sit amet, tempus sapien.</p>
<p>Integer turpis erat, porttitor vitae mi faucibus, laoreet interdum tellus. Curabitur posuere molestie dictum. Morbi eget congue risus, quis rhoncus quam. Suspendisse vitae hendrerit erat, at posuere mi. Cras eu fermentum nunc. Sed id ante eu orci commodo volutpat non ac est. Praesent ligula diam, congue eu enim scelerisque, finibus commodo lectus.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla venenatis ante augue. Phasellus volutpat neque ac dui mattis vulputate. Etiam consequat aliquam cursus. In sodales pretium ultrices. Maecenas lectus est, sollicitudin consectetur felis nec, feugiat ultricies mi. Aliquam erat volutpat. Nam placerat, tortor in ultrices porttitor, orci enim rutrum enim, vel tempor sapien arcu a tellus. Vivamus convallis sodales ante varius gravida. Curabitur a purus vel augue ultrices ultricies id a nisl. Nullam malesuada consequat diam, a facilisis tortor volutpat et. Sed urna dolor, aliquet vitae posuere vulputate, euismod ac lorem. Sed felis risus, pulvinar at interdum quis, vehicula sed odio. Phasellus in enim venenatis, iaculis tortor eu, bibendum ante. Donec ac tellus dictum neque volutpat blandit. Praesent efficitur faucibus risus, ac auctor purus porttitor vitae. Phasellus ornare dui nec orci posuere, nec luctus mauris semper.</p>
<p>Morbi viverra, ante vel aliquet tincidunt, leo dolor pharetra quam, at semper massa orci nec magna. Donec posuere nec sapien sed laoreet. Etiam cursus nunc in condimentum facilisis. Etiam in tempor tortor. Vivamus faucibus egestas enim, at convallis diam pulvinar vel. Cras ac orci eget nisi maximus cursus. Nunc urna libero, viverra sit amet nisl at, hendrerit tempor turpis. Maecenas facilisis convallis mi vel tempor. Nullam vitae nunc leo. Cras sed nisl consectetur, rhoncus sapien sit amet, tempus sapien.</p>
<p>Integer turpis erat, porttitor vitae mi faucibus, laoreet interdum tellus. Curabitur posuere molestie dictum. Morbi eget congue risus, quis rhoncus quam. Suspendisse vitae hendrerit erat, at posuere mi. Cras eu fermentum nunc. Sed id ante eu orci commodo volutpat non ac est. Praesent ligula diam, congue eu enim scelerisque, finibus commodo lectus.</p>
</md-content>
</md-tab>
<md-tab label="three">
<md-content class="tabContent" class="md-padding">
<h1 class="md-display-2">Tab Three</h1>
<p>Integer turpis erat, porttitor vitae mi faucibus, laoreet interdum tellus. Curabitur posuere molestie dictum. Morbi eget congue risus, quis rhoncus quam. Suspendisse vitae hendrerit erat, at posuere mi. Cras eu fermentum nunc. Sed id ante eu orci commodo volutpat non ac est. Praesent ligula diam, congue eu enim scelerisque, finibus commodo lectus.</p>
</md-content>
</md-tab>
</md-tabs>
</md-content>
</div>
CSS
#list {
border-right: 1px solid #DDD;
overflow: auto;
}
.tabContent {
overflow: auto;
}
Related
I am currently trying to make a clean messaging system, and I have an issue with my interface. Note that I am making it with Materialize, but I can tweak it with custom CSS. I have a list of message on the left side, and the remaining space on the right displays the selected message. Those two items are side by side. Pretty classic.
But I have an issue when there are too many messages on the list, or when the text is too long to fit in the view height, I can't scroll.
I need the page to be non-scrollable, but I also need to be able to scroll the list and the message view.
To so, I tried to do something like that:
.message-view {
height: 40vh;
overflow-y: scroll;
}
It works, but it is not what I want. I want the .message-view div to take the entire remaining height. I could make tricky calculation based on previous elements heights, but I find it pretty annoying, and I am not sure I could get the exact height right on every device that way.
TLDR: I want a div that would be taking the remaining height dynamically to be scrollable using CSS or Materialize. Any idea?
Here is an example of my issue (on the left, the list is scrollable but height is garbage,
arbitrarily set to 80vh because it is approximately the height), and the message-view is not scrollable):
html, body {
width: 100%;
height: 100vh;
overflow: hidden;
}
.content {
width: 100%;
height: 100vh;
display: flex;
justify-content: space-between;
}
.message-list-scroller {
width: 30%;
height: 80vh;
overflow-y: scroll;
}
.message-list {
width: 98%;
height: 100%;
border: 1px solid gray;
}
.message-list-item {
width: 100%;
border-bottom: 1px solid gray;
}
.message-view {
width: 70%;
height: 100%;
padding: 10px;
}
<html>
<body>
<h1>Message page</h1>
<div class="content">
<div class="message-list-scroller">
<div class="message-list">
<div class="message-list-item">
<h3>Title 1</h3>
<p>Preview of the message</p>
</div>
<div class="message-list-item">
<h3>Title 1</h3>
<p>Preview of the message</p>
</div>
<div class="message-list-item">
<h3>Title 1</h3>
<p>Preview of the message</p>
</div>
<div class="message-list-item">
<h3>Title 1</h3>
<p>Preview of the message</p>
</div>
<div class="message-list-item">
<h3>Title 1</h3>
<p>Preview of the message</p>
</div>
</div>
</div>
<div class="message-view">
<h2>Title</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque a metus vitae risus eleifend vulputate. Etiam porttitor turpis nec massa porta interdum. Maecenas euismod, quam euismod interdum venenatis, metus ex placerat mi, vitae mattis elit tellus id libero. Mauris molestie ac mauris sit amet vulputate. Aenean et dui in turpis facilisis faucibus vitae quis neque. Fusce faucibus scelerisque nunc. In efficitur odio nulla, eu mollis ligula pulvinar non. Phasellus imperdiet nunc velit, eget posuere dui tempus vel. Nullam semper, metus id luctus sollicitudin, nibh tellus volutpat urna, et aliquam tortor velit a arcu. Maecenas mauris dolor, vehicula non tellus eu, luctus molestie libero. Aenean vestibulum et ipsum in ultrices. Pellentesque nec vulputate nisi.
Pellentesque luctus justo erat, pulvinar placerat sapien malesuada sed. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In malesuada dui in quam sagittis varius. Aenean commodo dictum erat sed tincidunt. Nunc hendrerit dapibus neque vitae dictum. Aenean lacinia dolor nec ante imperdiet condimentum. Vestibulum bibendum cursus nibh, elementum tempor magna congue nec. In sed justo vel nulla rhoncus ultrices. Ut porta congue sem semper rutrum. Aenean dapibus massa metus, eu pellentesque nibh congue eu. Morbi efficitur sit amet massa a tincidunt. Praesent maximus quam sit amet nulla mattis, a sagittis velit efficitur.
Aliquam sed lectus accumsan, feugiat nisl nec, vestibulum orci. Maecenas aliquet at dui sed consectetur. Sed ornare et ligula a posuere. Integer elementum quis libero non rutrum. Vestibulum maximus eros in enim ullamcorper, sed maximus libero consectetur. Fusce ut nulla ultrices, malesuada risus eu, fermentum est. Praesent lectus quam, cursus vel lacus vitae, luctus malesuada mauris.
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Cras lacinia fringilla risus, sit amet gravida urna maximus gravida. Etiam tincidunt auctor fermentum. In non vehicula urna. Mauris turpis diam, facilisis vitae congue at, malesuada ac augue. Praesent augue nibh, ullamcorper id ultrices commodo, ornare in nisi. Pellentesque nunc mauris, fringilla eget accumsan sed, congue nec diam. Curabitur viverra erat ipsum, ut cursus dui fermentum vel. Nam luctus tellus non elit tristique vehicula. Sed mattis eu justo a varius. Integer metus lacus, mattis quis elit id, euismod tincidunt est. Mauris porttitor eros nec risus facilisis posuere. Sed pharetra, felis in commodo tincidunt, nisi purus lobortis elit, rutrum varius nisi mauris ac arcu. Mauris nec odio sed mauris condimentum ultrices sit amet quis purus. Mauris dictum metus sit amet ante gravida aliquet eu sit amet mi.
Aliquam erat volutpat. Nullam at arcu sit amet nunc feugiat fermentum. Duis id mi dui. Cras molestie nec quam sit amet convallis. Sed et mauris augue. Curabitur sodales ipsum lacinia convallis vestibulum. Nullam commodo urna eget nibh consequat auctor.
Nulla facilisi. Quisque ultrices rutrum erat, nec pretium nulla. Aliquam vulputate molestie scelerisque. Suspendisse eu interdum erat, quis dapibus neque. Donec ac pellentesque libero. Nulla erat odio, mattis non dolor ac, pellentesque sollicitudin nunc. Nulla ultrices ac ligula a feugiat. Morbi euismod mauris dolor, eu finibus orci condimentum et. Integer ac dui vel mauris ultrices mattis sit amet a magna. Mauris urna neque, faucibus non erat a, mattis molestie odio. Cras in elit tellus. Donec cursus ultricies sollicitudin. Nullam sed mi tincidunt, dignissim dolor at, suscipit tortor. Donec tortor neque, auctor a tincidunt eget, consequat sit amet eros. Nulla interdum, justo in blandit rutrum, urna nisl molestie urna, in lacinia nisi massa in odio. Pellentesque sodales massa nec pulvinar mattis.
Fusce a consectetur mi, nec egestas nibh. Etiam purus nisi, scelerisque sit amet tempus vitae, blandit at risus. Fusce posuere imperdiet viverra. Quisque vel suscipit turpis. Fusce dapibus non sem eget mollis. Morbi tincidunt lorem a mattis pretium. Duis nunc eros, malesuada id mi non, euismod bibendum tortor. Nulla augue lectus, porttitor ac lectus a, placerat congue sem. Vestibulum blandit lectus at urna vestibulum sodales. Curabitur malesuada tempor justo id varius. Pellentesque posuere sed erat ac iaculis.
Sed ac imperdiet mi, sit amet sodales sapien. Morbi enim neque, aliquet eget venenatis vitae, tincidunt vitae lectus. Cras pellentesque condimentum eros vel euismod. Nunc posuere magna augue, sit amet pulvinar orci auctor vitae. In hac habitasse platea dictumst. Pellentesque id auctor enim, nec sollicitudin lectus. In in pharetra odio, nec blandit diam. Integer vulputate lectus id lectus ultricies pellentesque. Donec a ornare leo, vel egestas lacus. Sed in libero laoreet, posuere sapien ac, ornare felis. Curabitur vel facilisis nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum purus sem, bibendum id urna sit amet, iaculis vehicula elit. Cras porttitor urna in diam accumsan eleifend.
Vestibulum magna lectus, venenatis sed venenatis dictum, hendrerit eu arcu. Praesent sed orci id sapien scelerisque ultrices vitae non ante. Donec dignissim magna et rhoncus suscipit. Donec ut hendrerit risus, eget luctus mi. Maecenas vulputate aliquet efficitur. Donec consectetur fermentum magna, a viverra sapien semper ac. Curabitur in lacus eu sapien porta placerat non quis metus. Aenean viverra velit id erat iaculis fringilla. Duis ultrices sollicitudin venenatis. Aliquam id cursus diam.
Curabitur neque lacus, lobortis non massa sed, facilisis luctus ipsum. Nullam eget semper turpis. Sed a lorem vel arcu tempor bibendum. Praesent sem tellus, placerat sit amet est vel, ultrices porttitor sem. Cras egestas pharetra metus, nec aliquam diam consequat vitae. Ut nec ullamcorper tortor. Vestibulum dignissim nisi sit amet interdum rutrum. Integer aliquet lectus id lacus vehicula, sit amet blandit arcu fringilla. Etiam mattis bibendum tristique. Aenean sit amet ultricies odio, eu gravida ante. In vel leo id lacus volutpat accumsan vitae non nulla. Quisque eu rhoncus magna, nec molestie nibh. Nam viverra posuere est ut egestas. Nunc mauris nibh, vulputate sed viverra tincidunt, faucibus condimentum mauris. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Quisque diam velit, suscipit ac nisi sit amet, convallis egestas metus.
</p>
</div>
</div>
</body>
</html>
Sorry for the crass example here - but:
1) create a page container, set to 100vh and overflow:hidden.
2) Use the grid system to make your two columns. Set these also to height:100vh.
3) Inside these cols, place a .scrollable div with a max-height of 100vh.
<div class="messages">
<div class="row">
<div class="col m4">
<ul class="scrollable">...</ul>
</div>
<div class="col m8">
<div class="scrollable">...</div>
</div>
</div>
</div>
.messages {
height:100vh;
background-color: silver;
overflow: hidden;
}
.col.m4 {
background-color: white;
}
.col.m8, col.m4 {
height:100vh;
}
.scrollable {
max-height:100vh;
overflow:hidden;
overflow-y:scroll;
padding-bottom:20px;
}
Codepen.
I want to make a sidebar navigation which behave a kind like position: sticky and position: fixed together.
I am unable to make a sticky element that has a dynamic height. Ideally I want to do it with CSS only.
The sidebar is after a header (which is not fixed), and I want the sidebar to stick at the top of the browser when you scroll past the header (so position: sticky is great for that).
But I want the bottom of my sidebar to be always at the bottom of the browser view. Like position: fixed.
My result so far is the following snippet:
When you are at the top of the snippet, and you scroll at the bottom of the sidebar, Item 18 remains hidden because the sidebar go beyond the view.
If you scroll past the header in the main container, the sidebar is fine, because it has a100vh size.
I would love to set bottom: 0; to the sticky element, to be fixed at the bottom, but it only works if I set the sticky element to be position: fixed; and then of course it does not stick anymore at the top.
.header {
background-color: grey;
height: 30px;
}
.container {
display: flex;
}
.nav {
color: white;
background-color: black;
width: 7rem;
}
.sticky-nav {
position: sticky;
top: 0;
height: 100vh;
overflow-y: scroll;
}
.content {
background-color: #ccc;
width: 100%;
}
<div class="header">Header</div>
<div class="container">
<div class="nav">
<div class="sticky-nav">
<p>Item 1</p>
<p>Item 2</p>
<p>Item 3</p>
<p>Item 4</p>
<p>Item 5</p>
<p>Item 6</p>
<p>Item 7</p>
<p>Item 8</p>
<p>Item 9</p>
<p>Item 10</p>
<p>Item 11</p>
<p>Item 12</p>
<p>Item 13</p>
<p>Item 14</p>
<p>Item 15</p>
<p>Item 16</p>
<p>Item 17</p>
<p>Item 18</p>
</div>
</div>
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce vel nisl iaculis sem ullamcorper laoreet vel posuere urna. Sed venenatis sem quis mattis auctor. Proin a urna risus. Maecenas eu purus semper, semper nibh a, pharetra est. Nunc ultrices elit convallis tristique consequat. Phasellus placerat velit sapien, vitae rhoncus arcu ultrices at. In sodales sodales lorem, vitae efficitur arcu pulvinar ac. Nam finibus luctus luctus. Ut aliquet ullamcorper tempor. Nullam a malesuada est, rhoncus elementum nibh. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam lobortis pulvinar est eu dignissim.
Aenean pretium enim et libero vehicula, a scelerisque enim viverra. Phasellus ullamcorper tortor ac nisl ornare, eu volutpat libero efficitur. Vivamus vitae nisi viverra, ullamcorper diam vitae, consequat ipsum. Sed maximus congue ipsum, id euismod arcu porttitor eget. Nam quis egestas risus. Sed quam augue, vestibulum ut lectus in, posuere interdum turpis. Cras ac egestas sem. Aliquam vitae sem ut tortor auctor aliquet a eu orci. Vivamus eu maximus lorem, placerat feugiat nisl. Suspendisse venenatis interdum tortor, non pellentesque dui suscipit nec. In imperdiet tincidunt convallis. In fringilla nisl id dolor aliquam, ut posuere felis efficitur. Aliquam id blandit elit, in euismod ante. Sed malesuada nisl ornare elementum ullamcorper. In vestibulum gravida libero, a finibus mi gravida eu.
Aenean ullamcorper arcu sed leo sodales commodo. Aenean in ex vitae lacus vulputate blandit sed eu sem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer at orci vel arcu volutpat eleifend. Quisque eu erat at lacus fringilla tincidunt. Nunc enim purus, posuere quis est a, pretium tincidunt est. Vivamus suscipit, neque quis aliquet dignissim, nisi lectus varius nisl, vel eleifend justo leo vel augue. Phasellus feugiat volutpat turpis. In eros mi, pulvinar vitae massa vel, vulputate varius nunc. Aliquam consectetur tortor vehicula, finibus felis tempor, hendrerit risus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam pretium porttitor ante ac convallis. Nunc sollicitudin sed nunc congue dictum. Morbi pellentesque turpis bibendum turpis consectetur molestie. Integer luctus non libero vitae congue. Aliquam ex odio, vulputate interdum sagittis et, lobortis interdum eros.
Aliquam tincidunt rhoncus turpis et sagittis. Etiam ullamcorper augue id interdum fermentum. Morbi vitae nisi lorem. Proin a cursus nibh, at facilisis dolor. Nulla eu urna viverra dolor sodales mattis non et est. Quisque sagittis arcu tempor, aliquam mauris ut, porttitor velit. Phasellus nec tempus urna, eu aliquet ante. Vestibulum ultricies metus eu arcu pellentesque gravida. Curabitur ac mollis lorem. Donec ullamcorper viverra dolor, id ultrices urna fringilla at. Nulla placerat leo sed vulputate feugiat. Maecenas at consectetur massa, eget mollis enim. Quisque felis nisl, blandit sit amet ultrices vel, ultrices at justo. In hac habitasse platea dictumst.
Curabitur commodo tellus vitae ex egestas, in maximus ligula pellentesque. Vestibulum dictum metus non magna sollicitudin ornare. Etiam consequat placerat eros, nec lobortis massa gravida id. Suspendisse elementum risus ac semper faucibus. Suspendisse ut interdum tortor. Aliquam ornare imperdiet dapibus. Ut lacinia consequat metus, at accumsan mauris pretium sed. In nec congue ante. Nam nec arcu vitae eros iaculis molestie. Phasellus vitae eleifend nunc, tincidunt suscipit eros. Suspendisse leo ligula, tempor in sagittis ut, commodo id purus. Mauris nec lectus augue. Phasellus in tellus erat.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce vel nisl iaculis sem ullamcorper laoreet vel posuere urna. Sed venenatis sem quis mattis auctor. Proin a urna risus. Maecenas eu purus semper, semper nibh a, pharetra est. Nunc ultrices elit convallis tristique consequat. Phasellus placerat velit sapien, vitae rhoncus arcu ultrices at. In sodales sodales lorem, vitae efficitur arcu pulvinar ac. Nam finibus luctus luctus. Ut aliquet ullamcorper tempor. Nullam a malesuada est, rhoncus elementum nibh. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam lobortis pulvinar est eu dignissim.
Aenean pretium enim et libero vehicula, a scelerisque enim viverra. Phasellus ullamcorper tortor ac nisl ornare, eu volutpat libero efficitur. Vivamus vitae nisi viverra, ullamcorper diam vitae, consequat ipsum. Sed maximus congue ipsum, id euismod arcu porttitor eget. Nam quis egestas risus. Sed quam augue, vestibulum ut lectus in, posuere interdum turpis. Cras ac egestas sem. Aliquam vitae sem ut tortor auctor aliquet a eu orci. Vivamus eu maximus lorem, placerat feugiat nisl. Suspendisse venenatis interdum tortor, non pellentesque dui suscipit nec. In imperdiet tincidunt convallis. In fringilla nisl id dolor aliquam, ut posuere felis efficitur. Aliquam id blandit elit, in euismod ante. Sed malesuada nisl ornare elementum ullamcorper. In vestibulum gravida libero, a finibus mi gravida eu.
Aenean ullamcorper arcu sed leo sodales commodo. Aenean in ex vitae lacus vulputate blandit sed eu sem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer at orci vel arcu volutpat eleifend. Quisque eu erat at lacus fringilla tincidunt. Nunc enim purus, posuere quis est a, pretium tincidunt est. Vivamus suscipit, neque quis aliquet dignissim, nisi lectus varius nisl, vel eleifend justo leo vel augue. Phasellus feugiat volutpat turpis. In eros mi, pulvinar vitae massa vel, vulputate varius nunc. Aliquam consectetur tortor vehicula, finibus felis tempor, hendrerit risus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam pretium porttitor ante ac convallis. Nunc sollicitudin sed nunc congue dictum. Morbi pellentesque turpis bibendum turpis consectetur molestie. Integer luctus non libero vitae congue. Aliquam ex odio, vulputate interdum sagittis et, lobortis interdum eros.
Aliquam tincidunt rhoncus turpis et sagittis. Etiam ullamcorper augue id interdum fermentum. Morbi vitae nisi lorem. Proin a cursus nibh, at facilisis dolor. Nulla eu urna viverra dolor sodales mattis non et est. Quisque sagittis arcu tempor, aliquam mauris ut, porttitor velit. Phasellus nec tempus urna, eu aliquet ante. Vestibulum ultricies metus eu arcu pellentesque gravida. Curabitur ac mollis lorem. Donec ullamcorper viverra dolor, id ultrices urna fringilla at. Nulla placerat leo sed vulputate feugiat. Maecenas at consectetur massa, eget mollis enim. Quisque felis nisl, blandit sit amet ultrices vel, ultrices at justo. In hac habitasse platea dictumst.
Curabitur commodo tellus vitae ex egestas, in maximus ligula pellentesque. Vestibulum dictum metus non magna sollicitudin ornare. Etiam consequat placerat eros, nec lobortis massa gravida id. Suspendisse elementum risus ac semper faucibus. Suspendisse ut interdum tortor. Aliquam ornare imperdiet dapibus. Ut lacinia consequat metus, at accumsan mauris pretium sed. In nec congue ante. Nam nec arcu vitae eros iaculis molestie. Phasellus vitae eleifend nunc, tincidunt suscipit eros. Suspendisse leo ligula, tempor in sagittis ut, commodo id purus. Mauris nec lectus augue. Phasellus in tellus erat.
</div>
</div>
Here is an answer purely made out of css.
Using calc property of css you can achieve this thing easily using CSS.
*{
box-sizing:border-box;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
}
body,html{margin:0px; padding:0px;}
.header {
background-color: grey;
height: 30px;
position:fixed; /* setting to be at top always */
width:100%; /* fix pposition will require a width to occupy space */
}
.container {
display: flex;
}
.nav {
color: white;
background-color: black;
width: 7rem;
position:fixed; /* position fix to keep it on position */
top: 30px; /* equal to height of header */
}
.sticky-nav {
height: calc(100vh - 30px); /* calculating height according to browser height subtracting the top height of header*/
overflow-y: scroll;
}
.content {
background-color: #ccc;
width: 100%;
padding:5px;
padding-left:7rem; /* padding left = width of 7rem*/
margin-top:30px;
}
<div class="header">Header</div>
<div class="container">
<div class="nav">
<div class="sticky-nav">
<p>Item 1</p>
<p>Item 2</p>
<p>Item 3</p>
<p>Item 4</p>
<p>Item 5</p>
<p>Item 6</p>
<p>Item 7</p>
<p>Item 8</p>
<p>Item 9</p>
<p>Item 10</p>
<p>Item 11</p>
<p>Item 12</p>
<p>Item 13</p>
<p>Item 14</p>
<p>Item 15</p>
<p>Item 16</p>
<p>Item 17</p>
<p>Item 18</p>
</div>
</div>
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce vel nisl iaculis sem ullamcorper laoreet vel posuere urna. Sed venenatis sem quis mattis auctor. Proin a urna risus. Maecenas eu purus semper, semper nibh a, pharetra est. Nunc ultrices elit convallis tristique consequat. Phasellus placerat velit sapien, vitae rhoncus arcu ultrices at. In sodales sodales lorem, vitae efficitur arcu pulvinar ac. Nam finibus luctus luctus. Ut aliquet ullamcorper tempor. Nullam a malesuada est, rhoncus elementum nibh. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam lobortis pulvinar est eu dignissim.
Aenean pretium enim et libero vehicula, a scelerisque enim viverra. Phasellus ullamcorper tortor ac nisl ornare, eu volutpat libero efficitur. Vivamus vitae nisi viverra, ullamcorper diam vitae, consequat ipsum. Sed maximus congue ipsum, id euismod arcu porttitor eget. Nam quis egestas risus. Sed quam augue, vestibulum ut lectus in, posuere interdum turpis. Cras ac egestas sem. Aliquam vitae sem ut tortor auctor aliquet a eu orci. Vivamus eu maximus lorem, placerat feugiat nisl. Suspendisse venenatis interdum tortor, non pellentesque dui suscipit nec. In imperdiet tincidunt convallis. In fringilla nisl id dolor aliquam, ut posuere felis efficitur. Aliquam id blandit elit, in euismod ante. Sed malesuada nisl ornare elementum ullamcorper. In vestibulum gravida libero, a finibus mi gravida eu.
Aenean ullamcorper arcu sed leo sodales commodo. Aenean in ex vitae lacus vulputate blandit sed eu sem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer at orci vel arcu volutpat eleifend. Quisque eu erat at lacus fringilla tincidunt. Nunc enim purus, posuere quis est a, pretium tincidunt est. Vivamus suscipit, neque quis aliquet dignissim, nisi lectus varius nisl, vel eleifend justo leo vel augue. Phasellus feugiat volutpat turpis. In eros mi, pulvinar vitae massa vel, vulputate varius nunc. Aliquam consectetur tortor vehicula, finibus felis tempor, hendrerit risus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam pretium porttitor ante ac convallis. Nunc sollicitudin sed nunc congue dictum. Morbi pellentesque turpis bibendum turpis consectetur molestie. Integer luctus non libero vitae congue. Aliquam ex odio, vulputate interdum sagittis et, lobortis interdum eros.
Aliquam tincidunt rhoncus turpis et sagittis. Etiam ullamcorper augue id interdum fermentum. Morbi vitae nisi lorem. Proin a cursus nibh, at facilisis dolor. Nulla eu urna viverra dolor sodales mattis non et est. Quisque sagittis arcu tempor, aliquam mauris ut, porttitor velit. Phasellus nec tempus urna, eu aliquet ante. Vestibulum ultricies metus eu arcu pellentesque gravida. Curabitur ac mollis lorem. Donec ullamcorper viverra dolor, id ultrices urna fringilla at. Nulla placerat leo sed vulputate feugiat. Maecenas at consectetur massa, eget mollis enim. Quisque felis nisl, blandit sit amet ultrices vel, ultrices at justo. In hac habitasse platea dictumst.
Curabitur commodo tellus vitae ex egestas, in maximus ligula pellentesque. Vestibulum dictum metus non magna sollicitudin ornare. Etiam consequat placerat eros, nec lobortis massa gravida id. Suspendisse elementum risus ac semper faucibus. Suspendisse ut interdum tortor. Aliquam ornare imperdiet dapibus. Ut lacinia consequat metus, at accumsan mauris pretium sed. In nec congue ante. Nam nec arcu vitae eros iaculis molestie. Phasellus vitae eleifend nunc, tincidunt suscipit eros. Suspendisse leo ligula, tempor in sagittis ut, commodo id purus. Mauris nec lectus augue. Phasellus in tellus erat.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce vel nisl iaculis sem ullamcorper laoreet vel posuere urna. Sed venenatis sem quis mattis auctor. Proin a urna risus. Maecenas eu purus semper, semper nibh a, pharetra est. Nunc ultrices elit convallis tristique consequat. Phasellus placerat velit sapien, vitae rhoncus arcu ultrices at. In sodales sodales lorem, vitae efficitur arcu pulvinar ac. Nam finibus luctus luctus. Ut aliquet ullamcorper tempor. Nullam a malesuada est, rhoncus elementum nibh. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam lobortis pulvinar est eu dignissim.
Aenean pretium enim et libero vehicula, a scelerisque enim viverra. Phasellus ullamcorper tortor ac nisl ornare, eu volutpat libero efficitur. Vivamus vitae nisi viverra, ullamcorper diam vitae, consequat ipsum. Sed maximus congue ipsum, id euismod arcu porttitor eget. Nam quis egestas risus. Sed quam augue, vestibulum ut lectus in, posuere interdum turpis. Cras ac egestas sem. Aliquam vitae sem ut tortor auctor aliquet a eu orci. Vivamus eu maximus lorem, placerat feugiat nisl. Suspendisse venenatis interdum tortor, non pellentesque dui suscipit nec. In imperdiet tincidunt convallis. In fringilla nisl id dolor aliquam, ut posuere felis efficitur. Aliquam id blandit elit, in euismod ante. Sed malesuada nisl ornare elementum ullamcorper. In vestibulum gravida libero, a finibus mi gravida eu.
Aenean ullamcorper arcu sed leo sodales commodo. Aenean in ex vitae lacus vulputate blandit sed eu sem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer at orci vel arcu volutpat eleifend. Quisque eu erat at lacus fringilla tincidunt. Nunc enim purus, posuere quis est a, pretium tincidunt est. Vivamus suscipit, neque quis aliquet dignissim, nisi lectus varius nisl, vel eleifend justo leo vel augue. Phasellus feugiat volutpat turpis. In eros mi, pulvinar vitae massa vel, vulputate varius nunc. Aliquam consectetur tortor vehicula, finibus felis tempor, hendrerit risus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam pretium porttitor ante ac convallis. Nunc sollicitudin sed nunc congue dictum. Morbi pellentesque turpis bibendum turpis consectetur molestie. Integer luctus non libero vitae congue. Aliquam ex odio, vulputate interdum sagittis et, lobortis interdum eros.
Aliquam tincidunt rhoncus turpis et sagittis. Etiam ullamcorper augue id interdum fermentum. Morbi vitae nisi lorem. Proin a cursus nibh, at facilisis dolor. Nulla eu urna viverra dolor sodales mattis non et est. Quisque sagittis arcu tempor, aliquam mauris ut, porttitor velit. Phasellus nec tempus urna, eu aliquet ante. Vestibulum ultricies metus eu arcu pellentesque gravida. Curabitur ac mollis lorem. Donec ullamcorper viverra dolor, id ultrices urna fringilla at. Nulla placerat leo sed vulputate feugiat. Maecenas at consectetur massa, eget mollis enim. Quisque felis nisl, blandit sit amet ultrices vel, ultrices at justo. In hac habitasse platea dictumst.
Curabitur commodo tellus vitae ex egestas, in maximus ligula pellentesque. Vestibulum dictum metus non magna sollicitudin ornare. Etiam consequat placerat eros, nec lobortis massa gravida id. Suspendisse elementum risus ac semper faucibus. Suspendisse ut interdum tortor. Aliquam ornare imperdiet dapibus. Ut lacinia consequat metus, at accumsan mauris pretium sed. In nec congue ante. Nam nec arcu vitae eros iaculis molestie. Phasellus vitae eleifend nunc, tincidunt suscipit eros. Suspendisse leo ligula, tempor in sagittis ut, commodo id purus. Mauris nec lectus augue. Phasellus in tellus erat.
</div>
</div>
How would I go about a three column layout to keep the background image from collapsing and get everything aligned to the top. I've got it almost right, but my ads keep falling below everything else. Could it be because I've got the #content as an inline block? I need testimonials on the left, content in the center, and ads to the right. Plus have the background image still visible.
<div id="wrapper">
<div id="inner-wrapper">
<div id="content">
<h1>Heading</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eleifend mi eu tellus vulputate hendrerit. Suspendisse potenti. Maecenas viverra, turpis sit amet semper mattis, lectus arcu viverra enim, et euismod sapien augue eu risus. Cras feugiat dapibus viverra. Aliquam erat volutpat. Vestibulum sodales tincidunt neque, eu gravida nibh feugiat sed. Ut lorem mauris, aliquam eu quam at, congue ultrices leo. Vivamus at aliquam magna, vitae malesuada enim. Donec semper justo magna, adipiscing rutrum magna pellentesque non. Sed condimentum ultricies suscipit. Vestibulum auctor accumsan risus, nec commodo nulla ultricies ac. Vestibulum pharetra consectetur nunc id ultricies. Suspendisse fermentum tincidunt vulputate. Praesent ultrices nunc est, vitae facilisis erat posuere eu.</p>
</div>
<div id="testimonials">
<h2>What My Clients Say</h2>
<p>Sed sit amet nibh iaculis, lacinia diam nec, mollis tellus. Nunc fringilla est nec tellus porttitor ornare. Donec venenatis justo eu lacus interdum interdum a quis justo. Integer et diam vitae neque consectetur bibendum eu non dui. Etiam eu aliquet justo, sed mattis nibh. Mauris fringilla accumsan urna, at pulvinar ligula dignissim vel. Aenean posuere mi sit amet convallis pellentesque.</p>
</div>
</div><!-- end #inner-wrapper -->
<div id="ads">
<h2>Ads</h2>
<p>Fusce faucibus facilisis est. Praesent a purus adipiscing, varius turpis in, malesuada risus. Vivamus ornare diam odio, ut elementum magna pretium a. Etiam porta diam elit, egestas pharetra erat mollis vel. Donec ut mauris sit amet tortor porta sollicitudin. Sed ultricies mattis semper. In nec quam eget nibh pellentesque bibendum a ut libero. Nulla id risus viverra, varius felis eget, interdum odio. Phasellus venenatis blandit sem, hendrerit vehicula sem luctus quis.</p>
</div>
</div><!-- end #wrapper -->
</body>
CSS: (thus far)
#wrapper{background-image: url(images/columns-195-570-195.png);
width: 960px;
align-content: center;}
#testimonials{
float: left;
width: 195px;
}
#content{
display: inline-block;
width:570px;
}
#ads{
float: right;
width: 195px;}
Thanks!
OK here you can find both solutions. A solution with floating (you need it) and a solution with flexbox.
Solution only with floating
#wrapper{
align-content:center;
background-image: url(images/columns-195-570-195.png);
width: 960px;
}
#testimonials{
float:left;
width:195px;
}
#inner-wrapper {
float:left;
}
#content {
display:inline-block;
width:570px;
}
#ads {
float:left;
width:195px;
}
<div id="wrapper">
<div id="inner-wrapper">
<div id="content">
<h1>Heading</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eleifend mi eu tellus vulputate hendrerit. Suspendisse potenti. Maecenas viverra, turpis sit amet semper mattis, lectus arcu viverra enim, et euismod sapien augue eu risus. Cras feugiat dapibus viverra. Aliquam erat volutpat. Vestibulum sodales tincidunt neque, eu gravida nibh feugiat sed. Ut lorem mauris, aliquam eu quam at, congue ultrices leo. Vivamus at aliquam magna, vitae malesuada enim. Donec semper justo magna, adipiscing rutrum magna pellentesque non. Sed condimentum ultricies suscipit. Vestibulum auctor accumsan risus, nec commodo nulla ultricies ac. Vestibulum pharetra consectetur nunc id ultricies. Suspendisse fermentum tincidunt vulputate. Praesent ultrices nunc est, vitae facilisis erat posuere eu.</p>
</div>
<div id="testimonials">
<h2>What My Clients Say</h2>
<p>Sed sit amet nibh iaculis, lacinia diam nec, mollis tellus. Nunc fringilla est nec tellus porttitor ornare. Donec venenatis justo eu lacus interdum interdum a quis justo. Integer et diam vitae neque consectetur bibendum eu non dui. Etiam eu aliquet justo, sed mattis nibh. Mauris fringilla accumsan urna, at pulvinar ligula dignissim vel. Aenean posuere mi sit amet convallis pellentesque.</p>
</div>
</div><!-- end #inner-wrapper -->
<div id="ads">
<h2>Ads</h2>
<p>Fusce faucibus facilisis est. Praesent a purus adipiscing, varius turpis in, malesuada risus. Vivamus ornare diam odio, ut elementum magna pretium a. Etiam porta diam elit, egestas pharetra erat mollis vel. Donec ut mauris sit amet tortor porta sollicitudin. Sed ultricies mattis semper. In nec quam eget nibh pellentesque bibendum a ut libero. Nulla id risus viverra, varius felis eget, interdum odio. Phasellus venenatis blandit sem, hendrerit vehicula sem luctus quis.</p>
</div>
</div><!-- end #wrapper -->
Solution with flexbox
#wrapper{
align-content:center;
background-image:url(images/columns-195-570-195.png);
display:flex;
width:960px;
}
#testimonials{
width:195px;
}
#content{
width:570px;
}
#ads {
width:195px;
}
<div id="wrapper">
<div id="testimonials">
<h2>What My Clients Say</h2>
<p>Sed sit amet nibh iaculis, lacinia diam nec, mollis tellus. Nunc fringilla est nec tellus porttitor ornare. Donec venenatis justo eu lacus interdum interdum a quis justo. Integer et diam vitae neque consectetur bibendum eu non dui. Etiam eu aliquet justo, sed mattis nibh. Mauris fringilla accumsan urna, at pulvinar ligula dignissim vel. Aenean posuere mi sit amet convallis pellentesque.</p>
</div>
<div id="content">
<h1>Heading</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eleifend mi eu tellus vulputate hendrerit. Suspendisse potenti. Maecenas viverra, turpis sit amet semper mattis, lectus arcu viverra enim, et euismod sapien augue eu risus. Cras feugiat dapibus viverra. Aliquam erat volutpat. Vestibulum sodales tincidunt neque, eu gravida nibh feugiat sed. Ut lorem mauris, aliquam eu quam at, congue ultrices leo. Vivamus at aliquam magna, vitae malesuada enim. Donec semper justo magna, adipiscing rutrum magna pellentesque non. Sed condimentum ultricies suscipit. Vestibulum auctor accumsan risus, nec commodo nulla ultricies ac. Vestibulum pharetra consectetur nunc id ultricies. Suspendisse fermentum tincidunt vulputate. Praesent ultrices nunc est, vitae facilisis erat posuere eu.</p>
</div>
<div id="ads">
<h2>Ads</h2>
<p>Fusce faucibus facilisis est. Praesent a purus adipiscing, varius turpis in, malesuada risus. Vivamus ornare diam odio, ut elementum magna pretium a. Etiam porta diam elit, egestas pharetra erat mollis vel. Donec ut mauris sit amet tortor porta sollicitudin. Sed ultricies mattis semper. In nec quam eget nibh pellentesque bibendum a ut libero. Nulla id risus viverra, varius felis eget, interdum odio. Phasellus venenatis blandit sem, hendrerit vehicula sem luctus quis.</p>
</div>
</div>
You don't need the wrappers or floats to get a working three-column-layout.
If you change the order of testimonials and content div's in HTML, it will work fine. Demo
#testimonials {
float: left;
width: 195px;
}
#content {
display: inline-block;
width:570px;
}
#ads {
float: right;
width: 195px;
}
HTML:
<div id="testimonials">.. </div>
<div id="content">..</div>
Inner-wrapper is creating a div displaying testimonials and content as block that is pushing the ads to a new line. Either move the end div to contain all three sections, or display the inner-wrapper and ads as inline-block so they line up correctly.
<div id="wrapper">
<div id="inner-wrapper">
<div id="content">
<h1>Heading</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eleifend mi eu tellus vulputate hendrerit. Suspendisse potenti. Maecenas viverra, turpis sit amet semper mattis, lectus arcu viverra enim, et euismod sapien augue eu risus. Cras feugiat dapibus viverra. Aliquam erat volutpat. Vestibulum sodales tincidunt neque, eu gravida nibh feugiat sed. Ut lorem mauris, aliquam eu quam at, congue ultrices leo. Vivamus at aliquam magna, vitae malesuada enim. Donec semper justo magna, adipiscing rutrum magna pellentesque non. Sed condimentum ultricies suscipit. Vestibulum auctor accumsan risus, nec commodo nulla ultricies ac. Vestibulum pharetra consectetur nunc id ultricies. Suspendisse fermentum tincidunt vulputate. Praesent ultrices nunc est, vitae facilisis erat posuere eu.</p>
</div>
<div id="testimonials">
<h2>What My Clients Say</h2>
<p>Sed sit amet nibh iaculis, lacinia diam nec, mollis tellus. Nunc fringilla est nec tellus porttitor ornare. Donec venenatis justo eu lacus interdum interdum a quis justo. Integer et diam vitae neque consectetur bibendum eu non dui. Etiam eu aliquet justo, sed mattis nibh. Mauris fringilla accumsan urna, at pulvinar ligula dignissim vel. Aenean posuere mi sit amet convallis pellentesque.</p>
</div>
<div id="ads">
<h2>Ads</h2>
<p>Fusce faucibus facilisis est. Praesent a purus adipiscing, varius turpis in, malesuada risus. Vivamus ornare diam odio, ut elementum magna pretium a. Etiam porta diam elit, egestas pharetra erat mollis vel. Donec ut mauris sit amet tortor porta sollicitudin. Sed ultricies mattis semper. In nec quam eget nibh pellentesque bibendum a ut libero. Nulla id risus viverra, varius felis eget, interdum odio. Phasellus venenatis blandit sem, hendrerit vehicula sem luctus quis.</p>
</div>
</div>
<!-- end #inner-wrapper -->
</div>
<!-- end #wrapper -->
To center content add:
#wrapper {
background-image: url(images/columns-195-570-195.png);
width: 960px;
margin: 0 auto;
}
Try to use float: left; on each column, you can add (if necessary) a float: clear; on your latest column.
Regarding your issue with the image, you need to set the size and position for the wrapper div.
Example also visible here: https://jsfiddle.net/er4h0e95/6/
#wrapper {
position:absolute;
background-image: url(http://www.gettyimages.co.uk/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg);
width: 960px;
height:100%;
align-content: center;
}
#testimonials {
float: left;
width: 195px;
}
#content {
float: left;
width:570px;
}
#ads {
position:absolute;
float: left;
width: 195px;
right:0;
}
<div id="wrapper">
<div id="inner-wrapper">
<div id="content">
<div id="testimonials">
<h2>What My Clients Say</h2>
<p>Sed sit amet nibh iaculis, lacinia diam nec, mollis tellus. Nunc fringilla est nec tellus porttitor ornare. Donec venenatis justo eu lacus interdum interdum a quis justo. Integer et diam vitae neque consectetur bibendum eu non dui. Etiam eu aliquet justo, sed mattis nibh. Mauris fringilla accumsan urna, at pulvinar ligula dignissim vel. Aenean posuere mi sit amet convallis pellentesque.</p>
</div>
<h1>Heading</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eleifend mi eu tellus vulputate hendrerit. Suspendisse potenti. Maecenas viverra, turpis sit amet semper mattis, lectus arcu viverra enim, et euismod sapien augue eu risus. Cras feugiat dapibus viverra. Aliquam erat volutpat. Vestibulum sodales tincidunt neque, eu gravida nibh feugiat sed. Ut lorem mauris, aliquam eu quam at, congue ultrices leo. Vivamus at aliquam magna, vitae malesuada enim. Donec semper justo magna, adipiscing rutrum magna pellentesque non. Sed condimentum ultricies suscipit. Vestibulum auctor accumsan risus, nec commodo nulla ultricies ac. Vestibulum pharetra consectetur nunc id ultricies. Suspendisse fermentum tincidunt vulputate. Praesent ultrices nunc est, vitae facilisis erat posuere eu.</p>
</div>
</div>
<!-- end #inner-wrapper -->
<div id="ads">
<h2>Ads</h2>
<p>Fusce faucibus facilisis est. Praesent a purus adipiscing, varius turpis in, malesuada risus. Vivamus ornare diam odio, ut elementum magna pretium a. Etiam porta diam elit, egestas pharetra erat mollis vel. Donec ut mauris sit amet tortor porta sollicitudin. Sed ultricies mattis semper. In nec quam eget nibh pellentesque bibendum a ut libero. Nulla id risus viverra, varius felis eget, interdum odio. Phasellus venenatis blandit sem, hendrerit vehicula sem luctus quis.</p>
</div>
</div>
<!-- end #wrapper -->
When we add an element with position: fixed to the Tab Content, it is positioning the element with respect the Tab Content instead of the Body, any fixes for this? Code Pen attached.
.fixed-element {
position: fixed;
top: 10px;
left: 10px;
background: #aaa;
}
Code Pen
postion: fixed; under transform: translate is not working for the time being, please refer the below link for more info: https://code.google.com/p/chromium/issues/detail?id=20574
Can you take a look at this codepen here
I took the content out and then I am displaying the content based on which tab user select. (see ng-switch). Hope this helps you. Thank you.
Since I am new too. Let me know If I did some mistake.
My code :HTML
<div class="tabsdemoDynamicHeight" ng-app="MyApp">
<md-content class="md-padding">
<md-tabs md-dynamic-height="" md-border-bottom=""md-selected="tabs.selectedIndex">
<md-tab id="tab1" aria-controls="Tab 1" label="one">
</md-tab>
<md-tab id="tab2" aria-controls="Tab 2" label="two">
</md-tab>
<md-tab id="tab3" aria-controls="Tab 3" label="three">
</md-tab>
</md-tabs>
<md-content class="md-padding">
<ng-switch on="tabs.selectedIndex">
<div ng-switch-when="0">
<!-- put the content of tab 1 here-->
<h1 class="md-display-2">Tab One</h1>
<div class="fixed-element"> Fixed Element</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla venenatis ante augue. Phasellus volutpat neque ac dui mattis vulputate. Etiam consequat aliquam cursus. In sodales pretium ultrices. Maecenas lectus est, sollicitudin consectetur felis nec, feugiat ultricies mi.</p>
</div>
<div ng-switch-when="1">
<h1 class="md-display-2">Tab Two</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla venenatis ante augue. Phasellus volutpat neque ac dui mattis vulputate. Etiam consequat aliquam cursus. In sodales pretium ultrices. Maecenas lectus est, sollicitudin consectetur felis nec, feugiat ultricies mi. Aliquam erat volutpat. Nam placerat, tortor in ultrices porttitor, orci enim rutrum enim, vel tempor sapien arcu a tellus. Vivamus convallis sodales ante varius gravida. Curabitur a purus vel augue ultrices ultricies id a nisl. Nullam malesuada consequat diam, a facilisis tortor volutpat et. Sed urna dolor, aliquet vitae posuere vulputate, euismod ac lorem. Sed felis risus, pulvinar at interdum quis, vehicula sed odio. Phasellus in enim venenatis, iaculis tortor eu, bibendum ante. Donec ac tellus dictum neque volutpat blandit. Praesent efficitur faucibus risus, ac auctor purus porttitor vitae. Phasellus ornare dui nec orci posuere, nec luctus mauris semper.</p>
<p>Morbi viverra, ante vel aliquet tincidunt, leo dolor pharetra quam, at semper massa orci nec magna. Donec posuere nec sapien sed laoreet. Etiam cursus nunc in condimentum facilisis. Etiam in tempor tortor. Vivamus faucibus egestas enim, at convallis diam pulvinar vel. Cras ac orci eget nisi maximus cursus. Nunc urna libero, viverra sit amet nisl at, hendrerit tempor turpis. Maecenas facilisis convallis mi vel tempor. Nullam vitae nunc leo. Cras sed nisl consectetur, rhoncus sapien sit amet, tempus sapien.</p>
<p>Integer turpis erat, porttitor vitae mi faucibus, laoreet interdum tellus. Curabitur posuere molestie dictum. Morbi eget congue risus, quis rhoncus quam. Suspendisse vitae hendrerit erat, at posuere mi. Cras eu fermentum nunc. Sed id ante eu orci commodo volutpat non ac est. Praesent ligula diam, congue eu enim scelerisque, finibus commodo lectus.</p>
</div>
<div ng-switch-when="2">
<h1 class="md-display-2">Tab Three</h1>
<p>Integer turpis erat, porttitor vitae mi faucibus, laoreet interdum tellus. Curabitur posuere molestie dictum. Morbi eget congue risus, quis rhoncus quam. Suspendisse vitae hendrerit erat, at posuere mi. Cras eu fermentum nunc. Sed id ante eu orci commodo volutpat non ac est. Praesent ligula diam, congue eu enim scelerisque, finibus commodo lectus.</p>
</div>
</ng-switch>
</md-cotent>
</md-content>
</div>
CSS:
.fixed-element {
position: fixed;
top: 10px;
left: 10px;
background: #aaa;
}
I'm attempting to get a two column layout, where the left column has a button (vertically centered) and the right column is simply text.
I have been able to get the two column layout working, but I cannot get the button centered (the biggest text is dynamic. it can grow and shrink, so the left column needs to be height: 100%).
This what what I have come up with so far:
<body>
<div>
<div style="float: left; width: 10px; height: 100%; vertical-align: middle; display: table-cell;">
<button type="button" style="display: block; vertical-align: middle;">Abc</button>
</div>
<div style="margin-left: 50px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris nulla magna, auctor a varius quis, convallis id est. Vestibulum rhoncus, diam ac malesuada commodo, ipsum justo blandit nulla, eu pretium felis metus vel erat. Donec lobortis arcu ac mauris aliquam ultrices. Nunc feugiat, nisl non pharetra tempus, nunc est cursus nibh, quis hendrerit nibh mauris et massa. Nunc justo quam, feugiat ac mattis ac, placerat sed sem. Sed ultrices orci at erat sodales malesuada. Aenean blandit blandit tellus sit amet imperdiet. Duis pellentesque augue quis lacus cursus at convallis dolor volutpat. Donec orci quam, rhoncus in tincidunt ornare, fringilla eget magna.
Nulla facilisi. Cras consectetur turpis id odio mattis sagittis. Aenean bibendum, ligula tempor luctus fringilla, magna neque malesuada ipsum, non tincidunt ipsum libero non ante. Mauris posuere ullamcorper lorem, et vulputate nibh mattis a. Mauris pretium ullamcorper convallis. Mauris quam est, sollicitudin ut pretium eu, mollis ut elit. Nulla vulputate sodales sagittis.
Suspendisse a porta orci. Sed velit purus, auctor quis tincidunt sed, tristique sed libero. Sed et est eget neque mattis lobortis. Mauris suscipit vestibulum gravida. Etiam lorem ligula, viverra eu iaculis vel, varius at libero. Nullam ante ligula, porta vel euismod ac, gravida ac massa. Pellentesque semper eros vitae sapien aliquam laoreet quis ut neque. Phasellus ac ullamcorper nibh. Praesent vitae tellus libero. Sed aliquet consectetur tempor. Nam porta ornare quam, sed viverra arcu congue eget. Nulla pharetra mi ac enim convallis vel mollis nunc iaculis.
Aenean cursus sodales nunc eu euismod. Mauris eget justo est, eget varius libero. Integer pretium ultricies tortor, ut pellentesque dolor bibendum sed. Praesent ullamcorper, est facilisis molestie ultricies, erat metus tristique enim, nec luctus quam felis et lacus. Donec ullamcorper nulla ac purus consequat aliquet. Praesent nec arcu eu orci feugiat ullamcorper sit amet ac augue. Nullam porta adipiscing felis, vel suscipit tortor bibendum vel. Cras tincidunt erat quis mi ornare ultricies.
Maecenas non ante elit, vel ullamcorper sem. Donec a lectus sit amet lectus lacinia fermentum. Quisque at feugiat lorem. Donec in ipsum lectus, in aliquet enim. Duis purus nisi, tempor vehicula faucibus eu, dapibus id nisl. Phasellus dignissim sodales ornare. Fusce vel libero non ipsum sagittis convallis. In hac habitasse platea dictumst. Fusce ultrices, lectus nec eleifend porttitor, risus sem tincidunt elit, eu hendrerit nibh tortor a dolor.</div>
</div>
</body>
and to my understanding should be working, but does not seem to be. Any suggestions on how I could get this to work?
I came up with solution to put your content into div with position: relative and making button position: absolute with top: 50%. Is that what you want to achieve?
FIDDLE EXAMPLE
You should make the container display: table and remove the float from the button:
<div style="display: table;">
<div style="width: 10px; height: 100%; vertical-align: middle; display: table-cell;">
<button type="button" style="display: block; vertical-align: middle;">Abc</button>
</div>
<div style="margin-left: 50px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris nulla magna, auctor a varius quis, convallis id est. Vestibulum rhoncus, diam ac malesuada commodo, ipsum justo blandit nulla, eu pretium felis metus vel erat. Donec lobortis arcu ac mauris aliquam ultrices. Nunc feugiat, nisl non pharetra tempus, nunc est cursus nibh, quis hendrerit nibh mauris et massa. Nunc justo quam, feugiat ac mattis ac, placerat sed sem. Sed ultrices orci at erat sodales malesuada. Aenean blandit blandit tellus sit amet imperdiet. Duis pellentesque augue quis lacus cursus at convallis dolor volutpat. Donec orci quam, rhoncus in tincidunt ornare, fringilla eget magna.
Nulla facilisi. Cras consectetur turpis id odio mattis sagittis. Aenean bibendum, ligula tempor luctus fringilla, magna neque malesuada ipsum, non tincidunt ipsum libero non ante. Mauris posuere ullamcorper lorem, et vulputate nibh mattis a. Mauris pretium ullamcorper convallis. Mauris quam est, sollicitudin ut pretium eu, mollis ut elit. Nulla vulputate sodales sagittis.
Suspendisse a porta orci. Sed velit purus, auctor quis tincidunt sed, tristique sed libero. Sed et est eget neque mattis lobortis. Mauris suscipit vestibulum gravida. Etiam lorem ligula, viverra eu iaculis vel, varius at libero. Nullam ante ligula, porta vel euismod ac, gravida ac massa. Pellentesque semper eros vitae sapien aliquam laoreet quis ut neque. Phasellus ac ullamcorper nibh. Praesent vitae tellus libero. Sed aliquet consectetur tempor. Nam porta ornare quam, sed viverra arcu congue eget. Nulla pharetra mi ac enim convallis vel mollis nunc iaculis.
Aenean cursus sodales nunc eu euismod. Mauris eget justo est, eget varius libero. Integer pretium ultricies tortor, ut pellentesque dolor bibendum sed. Praesent ullamcorper, est facilisis molestie ultricies, erat metus tristique enim, nec luctus quam felis et lacus. Donec ullamcorper nulla ac purus consequat aliquet. Praesent nec arcu eu orci feugiat ullamcorper sit amet ac augue. Nullam porta adipiscing felis, vel suscipit tortor bibendum vel. Cras tincidunt erat quis mi ornare ultricies.
Maecenas non ante elit, vel ullamcorper sem. Donec a lectus sit amet lectus lacinia fermentum. Quisque at feugiat lorem. Donec in ipsum lectus, in aliquet enim. Duis purus nisi, tempor vehicula faucibus eu, dapibus id nisl. Phasellus dignissim sodales ornare. Fusce vel libero non ipsum sagittis convallis. In hac habitasse platea dictumst. Fusce ultrices, lectus nec eleifend porttitor, risus sem tincidunt elit, eu hendrerit nibh tortor a dolor.
</div>
<div style="display:table; width:100%; height:100%">
<div style="display:table-cell; width:20%; height:100%; background:#ddd; vertical-align:middle; text-align:center">
<button type="button">Abc</button>
</div>
<div style="display:table-cell; height:100%; padding-left:20px">
Your content
</div>
</div>
You need just look at this - http://jsfiddle.net/qN53h/
This will resolved your issue. There is height 100% issue for display table-cell. For that fix you may try height:auto or make a fix height for parent display table div or child display table cell div, like this - http://jsfiddle.net/CjT2G/