I'm creating a webpage where the content div should fill all of the screen. At the moment it shrinks to the amount of content.
The footer should be 'sticky' and sit at the bottom of the screen (imagine there's hardly any content).
I've got the footer bit sorted, I'm just struggling with the height of the content div. How do I go about making the content div fill up the entire screen?
<html>
<head>
<style>
html, body {height:100%;margin:0;padding:0;}
#wrap {min-height:100%;}
header {
height:100px;
background:green;
}
#main {
background:yellow;
overflow:auto;
padding-bottom:50px;
}
#main {
font-size:28px;
overflow:none;
}
footer {
position:relative;
margin-top:-50px;
clear:both;
height:50px;
background:red;
}
body:before {
content:"";
height:100%;
float:left;
width:0;
margin-top:-32767px;
}
</style>
<!--[if !IE 7]>
<style type="text/css">
#wrap {display:table;height:100%}
</style>
<![endif]-->
</head>
<body>
<div id="wrap">
<header>
This is the header
</header>
<div id="main">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed a viverra mauris. Aenean eu facilisis enim. Cras laoreet diam at lorem euismod condimentum. Morbi diam nisi, eleifend id varius vitae, ultrices sed nunc. Aenean facilisis, arcu sed congue tempor, leo nisi convallis dolor, et malesuada velit tortor id neque. Nullam nec eros est, at hendrerit risus. Vivamus in sollicitudin elit. Vivamus id odio justo, eget condimentum elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Duis mauris massa, iaculis eu laoreet sit amet, suscipit nec dolor. Ut rutrum porttitor viverra. Proin convallis, turpis id varius varius, nisi nulla vulputate dolor, vitae mattis neque quam ac nulla. Fusce accumsan, urna nec vulputate imperdiet, tortor erat fringilla massa, nec convallis ligula risus vitae mauris. Vivamus sagittis pulvinar ipsum, bibendum congue purus gravida posuere.</p>
<!--
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non lorem id ante scelerisque malesuada id ut nibh. Duis massa erat, dictum hendrerit interdum ut, faucibus non lorem. Sed velit leo, pellentesque sit amet dapibus vel, vestibulum ac sem. Nulla a hendrerit risus. In sodales ultricies lorem at tempus. Fusce sed velit urna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ut mi nunc, et tristique ipsum. Cras lobortis augue eget enim sodales et sollicitudin turpis feugiat. Morbi a interdum felis. Donec porttitor nibh ut metus commodo et pulvinar dui pretium. Fusce pellentesque felis in metus vehicula feugiat.</p>
<p>
Duis suscipit nibh non leo venenatis tempor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce tincidunt sapien id purus tempus ac viverra sapien vulputate. Fusce eu tortor purus. Mauris sit amet diam a arcu hendrerit auctor. Mauris vel nunc nec leo gravida ullamcorper. Donec eu arcu nibh, eu feugiat lorem. Nunc euismod ligula nec est lobortis vehicula. Etiam feugiat lacus in nulla porttitor eu iaculis dui dictum. Nullam gravida enim in leo tempor euismod. Cras porttitor, neque at molestie egestas, metus nisl tincidunt lacus, non vestibulum metus sapien eu est. Mauris tempus mattis quam eu elementum. Curabitur tempor feugiat massa, sit amet tempor mauris fermentum ut. Nullam faucibus lobortis lectus, ac fermentum sapien venenatis eget.</p>
<p>
Nulla facilisi. Proin a lorem non justo gravida pharetra a at dolor. Phasellus vitae viverra purus. Nullam at tellus id orci ornare cursus. Maecenas velit ante, egestas eu auctor at, lacinia in massa. Morbi sit amet turpis a neque vestibulum pulvinar. Aliquam erat volutpat. Ut accumsan aliquet sodales. Praesent tortor turpis, vulputate quis bibendum eu, pharetra vestibulum nunc. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum convallis, lorem ac consectetur volutpat, diam sem bibendum lectus, vitae sagittis eros odio eget urna. Sed ipsum nulla, interdum nec accumsan at, faucibus at est. Vivamus faucibus condimentum erat, id varius metus cursus non. Vestibulum ut justo fringilla enim pellentesque auctor pretium eget quam.</p>
<p>
Ut in urna quis turpis placerat volutpat. Integer vel tincidunt sem. Pellentesque semper venenatis vestibulum. Pellentesque pretium volutpat neque eu dignissim. Aenean consectetur, magna in hendrerit sodales, mauris libero ullamcorper lectus, in imperdiet enim odio quis sem. Donec sed tellus urna, non sodales massa. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Phasellus rutrum dolor nec sem gravida dignissim. Curabitur in ante leo. </p>
-->
</div>
</div>
<footer>
This is the footer
</footer>
</body>
</html>
Try to set the footer to
position: fixed
bottom: 0
left:0
This should do the trick positioning the footer sticky to the bottom. But if the body expands beyond the footer it could pose an issue.
It seems like you might already know this, but in order to make an element fit the height of the viewport, it, as well as every other ancestor element, needs to be 100% height.
You've already done this for body and html (which is good), but you need to do this for #wrap too. Min-height won't work for that. Then, you'll want to set your header to a percentage height too so that you can have the #main div fill up the rest of the viewport. Something like:
#wrap { height: 100%; }
header { height: 10%; }
#main { height: 90%; }
This should take care of filling up the viewport, since your html and body are already set to height: 100%;
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 read most of the questions that came up for this, but they do not seem to work. These two in particular seemed to be what I was after, but I don't want the footer fixed to the bottom of the viewport.
How to keep footer always at the bottom of a page?
How to keep always at the bottom of page,( not screen) in html5
Here is my HTML. I am building in Laravel 5.3's Blade templating engine, but using Bootstrap:
.footer {
position: absolute;
bottom: 0;
width: 100%;
background-color: #fff;
border-top: 1px solid #d3e0e9;
overflow: auto;
padding: 5px 0 5px 0;
p {
margin: 0px;
}
}
<footer class="footer">
<div class="container">
<p>Stuff</p>
</div>
</footer>
EDIT: Attempting to clarify what I am asking here and also removed references above to changing the viewport size. That is cause for confusion and ultimately isn't relevant to what I am asking.
Can take fixed off the table for the time being as that won't be a solution: I don't always want the the footer at the bottom of the view port regardless of content.
Assume the viewport is and will always be full screen on a desktop.
Assume first page one has very little content and a footer below the content.
Relative leaves an ugly gap between the bottom of the footer and bottom edge of the viewport.
Absolute puts it up against the bottom border. This appears to be the correct option for a page with very little content.
Now assume a new page with the same footer, but there is a ton of content with several pages of scrolling in the browser.
Absolute (at least when I am using it) tends to stay at the bottom of the viewport and not below the content.
Relative will put it below the content and will be the solution for this problem.
But now it won't work with the page with very little content.
It seems like I need a mix of these two, but the only thing that comes to mind is using JQuery, testing if the content goes passed the bottom edge of the viewport. If it does, change the CSS to relative from the default absolute.
Seems like there would be an easier way to accomplish this with just CSS.
https://jsfiddle.net/jxg3c6ue/
If you use relative-absolute position relationship. But I would not advice this way of programming. Media query is the most suitable for your project. However, I just answer on how can it be done in other ways.
* {
margin: 0;
padding: 0;
}
body, html {
position: relative;
min-height: 100vh;
padding-bottom: 18px;
box-sizing: border-box;
}
footer {
position: absolute;
bottom: 0;
background: red;
}
<div class="body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus lectus justo, consequat non accumsan a, condimentum vel ipsum. Fusce ac leo tristique, fermentum orci a, suscipit massa. Curabitur dignissim metus ligula, sit amet convallis risus elementum quis. Donec in nunc vitae quam vestibulum malesuada nec vitae ipsum. Ut quis nulla elit. Duis luctus dictum aliquet. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Phasellus mollis, tellus quis interdum facilisis, enim ligula pulvinar sem, id congue sapien dui at sapien. Fusce aliquam neque ac justo blandit volutpat. Curabitur et hendrerit tellus. Duis risus massa, commodo id consectetur dapibus, laoreet id ligula.</p>
<p>Aliquam cursus turpis in quam aliquam pretium. Pellentesque urna est, pulvinar non ultrices a, tincidunt at dolor. Quisque a libero ut nunc commodo pulvinar a ac tortor. Nulla quis faucibus mi. Vivamus tempor mauris id justo bibendum interdum. Ut condimentum tempus ipsum quis finibus. Vivamus ut scelerisque purus, sed condimentum turpis. Nam fermentum sit amet erat ac bibendum.</p>
<p>Integer quis euismod massa. Morbi ornare ante a risus pharetra tincidunt. Phasellus tincidunt molestie eros, id tristique leo pharetra at. Curabitur pharetra maximus rutrum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla volutpat eget lorem non sollicitudin. Morbi fringilla eget quam nec tempus. Cras id porttitor tortor. Mauris rhoncus rhoncus tincidunt. Nulla facilisi. Mauris tempus dolor ac libero consequat, at commodo ipsum pulvinar. Maecenas ullamcorper lacinia nisi, nec consectetur libero auctor nec. Suspendisse consectetur ex non justo sollicitudin tempor. Curabitur semper, diam et hendrerit molestie, libero quam porta ligula, et viverra velit magna nec lectus. Aliquam nec sem ultrices, gravida lacus eget, scelerisque mauris.</p>
<p>Sed vitae est eu leo aliquam aliquet id vitae tellus. Donec efficitur, dui vitae mollis interdum, dui purus lobortis nulla, sed egestas enim nulla eu neque. Fusce placerat nisi quis nisi dictum egestas. Pellentesque vel convallis nulla. Donec ac nisi at nibh aliquam congue finibus id mi. Morbi pulvinar laoreet massa sed aliquet. Cras efficitur, sapien vel gravida ultricies, nisi tellus mollis est, sed faucibus quam justo vehicula metus. Nunc vulputate nulla quis lectus fermentum egestas. Nunc fermentum sapien ut ex fringilla imperdiet. Vestibulum quis mi vel tellus pretium commodo. Praesent nulla elit, viverra ac efficitur at, euismod sed dui. Ut a leo nec arcu tempus ultricies eu ac ipsum. Nunc vulputate eu nulla quis pharetra. Nunc iaculis, nibh congue vulputate tincidunt, arcu nisl vestibulum mi, at rutrum ipsum neque non augue. In augue dolor, imperdiet eu faucibus non, mattis at ipsum. Nulla facilisi.</p>
<p>Quisque fringilla non sem eget faucibus. Cras nec nulla sit amet est cursus efficitur. Proin euismod nibh ut arcu maximus maximus. Nunc consectetur libero ac enim imperdiet, luctus tincidunt magna aliquam. Donec eleifend porttitor pretium. Nullam urna nisl, facilisis id pretium et, commodo ut neque. In id elit urna. Vivamus tincidunt est sed ligula condimentum sagittis. In vel lobortis diam. In nulla sem, dictum a nisl vitae, pretium malesuada felis.</p><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus lectus justo, consequat non accumsan a, condimentum vel ipsum. Fusce ac leo tristique, fermentum orci a, suscipit massa. Curabitur dignissim metus ligula, sit amet convallis risus elementum quis. Donec in nunc vitae quam vestibulum malesuada nec vitae ipsum. Ut quis nulla elit. Duis luctus dictum aliquet. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Phasellus mollis, tellus quis interdum facilisis, enim ligula pulvinar sem, id congue sapien dui at sapien. Fusce aliquam neque ac justo blandit volutpat. Curabitur et hendrerit tellus. Duis risus massa, commodo id consectetur dapibus, laoreet id ligula.</p>
<p>Aliquam cursus turpis in quam aliquam pretium. Pellentesque urna est, pulvinar non ultrices a, tincidunt at dolor. Quisque a libero ut nunc commodo pulvinar a ac tortor. Nulla quis faucibus mi. Vivamus tempor mauris id justo bibendum interdum. Ut condimentum tempus ipsum quis finibus. Vivamus ut scelerisque purus, sed condimentum turpis. Nam fermentum sit amet erat ac bibendum.</p>
<p>Integer quis euismod massa. Morbi ornare ante a risus pharetra tincidunt. Phasellus tincidunt molestie eros, id tristique leo pharetra at. Curabitur pharetra maximus rutrum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla volutpat eget lorem non sollicitudin. Morbi fringilla eget quam nec tempus. Cras id porttitor tortor. Mauris rhoncus rhoncus tincidunt. Nulla facilisi. Mauris tempus dolor ac libero consequat, at commodo ipsum pulvinar. Maecenas ullamcorper lacinia nisi, nec consectetur libero auctor nec. Suspendisse consectetur ex non justo sollicitudin tempor. Curabitur semper, diam et hendrerit molestie, libero quam porta ligula, et viverra velit magna nec lectus. Aliquam nec sem ultrices, gravida lacus eget, scelerisque mauris.</p>
<p>Sed vitae est eu leo aliquam aliquet id vitae tellus. Donec efficitur, dui vitae mollis interdum, dui purus lobortis nulla, sed egestas enim nulla eu neque. Fusce placerat nisi quis nisi dictum egestas. Pellentesque vel convallis nulla. Donec ac nisi at nibh aliquam congue finibus id mi. Morbi pulvinar laoreet massa sed aliquet. Cras efficitur, sapien vel gravida ultricies, nisi tellus mollis est, sed faucibus quam justo vehicula metus. Nunc vulputate nulla quis lectus fermentum egestas. Nunc fermentum sapien ut ex fringilla imperdiet. Vestibulum quis mi vel tellus pretium commodo. Praesent nulla elit, viverra ac efficitur at, euismod sed dui. Ut a leo nec arcu tempus ultricies eu ac ipsum. Nunc vulputate eu nulla quis pharetra. Nunc iaculis, nibh congue vulputate tincidunt, arcu nisl vestibulum mi, at rutrum ipsum neque non augue. In augue dolor, imperdiet eu faucibus non, mattis at ipsum. Nulla facilisi.</p>
<p>Quisque fringilla non sem eget faucibus. Cras nec nulla sit amet est cursus efficitur. Proin euismod nibh ut arcu maximus maximus. Nunc consectetur libero ac enim imperdiet, luctus tincidunt magna aliquam. Donec eleifend porttitor pretium. Nullam urna nisl, facilisis id pretium et, commodo ut neque. In id elit urna. Vivamus tincidunt est sed ligula condimentum sagittis. In vel lobortis diam. In nulla sem, dictum a nisl vitae, pretium malesuada felis.</p><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus lectus justo, consequat non accumsan a, condimentum vel ipsum. Fusce ac leo tristique, fermentum orci a, suscipit massa. Curabitur dignissim metus ligula, sit amet convallis risus elementum quis. Donec in nunc vitae quam vestibulum malesuada nec vitae ipsum. Ut quis nulla elit. Duis luctus dictum aliquet. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Phasellus mollis, tellus quis interdum facilisis, enim ligula pulvinar sem, id congue sapien dui at sapien. Fusce aliquam neque ac justo blandit volutpat. Curabitur et hendrerit tellus. Duis risus massa, commodo id consectetur dapibus, laoreet id ligula.</p>
<p>Aliquam cursus turpis in quam aliquam pretium. Pellentesque urna est, pulvinar non ultrices a, tincidunt at dolor. Quisque a libero ut nunc commodo pulvinar a ac tortor. Nulla quis faucibus mi. Vivamus tempor mauris id justo bibendum interdum. Ut condimentum tempus ipsum quis finibus. Vivamus ut scelerisque purus, sed condimentum turpis. Nam fermentum sit amet erat ac bibendum.</p>
<p>Integer quis euismod massa. Morbi ornare ante a risus pharetra tincidunt. Phasellus tincidunt molestie eros, id tristique leo pharetra at. Curabitur pharetra maximus rutrum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla volutpat eget lorem non sollicitudin. Morbi fringilla eget quam nec tempus. Cras id porttitor tortor. Mauris rhoncus rhoncus tincidunt. Nulla facilisi. Mauris tempus dolor ac libero consequat, at commodo ipsum pulvinar. Maecenas ullamcorper lacinia nisi, nec consectetur libero auctor nec. Suspendisse consectetur ex non justo sollicitudin tempor. Curabitur semper, diam et hendrerit molestie, libero quam porta ligula, et viverra velit magna nec lectus. Aliquam nec sem ultrices, gravida lacus eget, scelerisque mauris.</p>
<p>Sed vitae est eu leo aliquam aliquet id vitae tellus. Donec efficitur, dui vitae mollis interdum, dui purus lobortis nulla, sed egestas enim nulla eu neque. Fusce placerat nisi quis nisi dictum egestas. Pellentesque vel convallis nulla. Donec ac nisi at nibh aliquam congue finibus id mi. Morbi pulvinar laoreet massa sed aliquet. Cras efficitur, sapien vel gravida ultricies, nisi tellus mollis est, sed faucibus quam justo vehicula metus. Nunc vulputate nulla quis lectus fermentum egestas. Nunc fermentum sapien ut ex fringilla imperdiet. Vestibulum quis mi vel tellus pretium commodo. Praesent nulla elit, viverra ac efficitur at, euismod sed dui. Ut a leo nec arcu tempus ultricies eu ac ipsum. Nunc vulputate eu nulla quis pharetra. Nunc iaculis, nibh congue vulputate tincidunt, arcu nisl vestibulum mi, at rutrum ipsum neque non augue. In augue dolor, imperdiet eu faucibus non, mattis at ipsum. Nulla facilisi.</p>
<p>Quisque fringilla non sem eget faucibus. Cras nec nulla sit amet est cursus efficitur. Proin euismod nibh ut arcu maximus maximus. Nunc consectetur libero ac enim imperdiet, luctus tincidunt magna aliquam. Donec eleifend porttitor pretium. Nullam urna nisl, facilisis id pretium et, commodo ut neque. In id elit urna. Vivamus tincidunt est sed ligula condimentum sagittis. In vel lobortis diam. In nulla sem, dictum a nisl vitae, pretium malesuada felis.</p>
</div>
<footer>
this is a footer
</footer>
Without content
* {
margin: 0;
padding: 0;
}
body, html {
position: relative;
min-height: 100vh;
padding-bottom: 18px;
box-sizing: border-box;
}
footer {
position: absolute;
bottom: 0;
background: red;
}
<div class="body">
</div>
<footer>
this is a footer
</footer>
There are some good difference between absolute and fixed positioning. You should definitely google it to understand better. Meanwhile in short absolute positioning is done respective of the parent relative / absolute position.
I'm not clear about question since it's too wage to read. Hoping that you are looking something like. Footer always stay bottom to the viewport.
.viewFooter{
background:#ddd;
color:#3d3d3d;
position:fixed;
bottom:0;
left:0;
right:0;
font-size:16px;
text-align:center;
padding:10px
}
body{
margin:0;
height:calc(1000px - 40px);
position:relative
}
<div class="viewFooter">
This will be positioned at the bottom of the view Port
</div>
Footer staying at the bottom of viewport
.pageFooter{
background:#ddd;
color:#3d3d3d;
position:absolute;
bottom:0;
left:0;
right:0;
font-size:16px;
text-align:center;
padding:10px
}
body{
margin:0;
height:1000px;
position:relative
}
<div class="pageFooter">
This will be positioned at the bottom of the page
</div>
If you want to switch between absolute and fixed position in different viewport. use media queries. The above given will switch to absolute positioning in mobile devices
.viewFooter{
background:#ddd;
color:#3d3d3d;
position:fixed;
bottom:0;
left:0;
right:0;
font-size:16px;
text-align:center;
padding:10px
}
body{
margin:0;
height:1000px;
position:relative
}
#media only screen
and (max-width: 600px) {
.viewFooter{
position:absolute;
}
}
<div class="viewFooter">
This will be positioned at the bottom of the view Port
</div>
Make sure the footer div is directly appended to body tag.
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 -->
I'm having a problem with Firefox (tried with 3.6 and 4).
I need to create a 2 column layout with a static size menu, and a dynamic size content-column (if there is a simpler way than the code below, I'd like to know).
The easiest is probably that I paste the html and style (which is just a simple example of the "bug").
<html>
<head>
<title>Test</title>
<link type="text/css" href="style.css" rel="stylesheet">
</head>
<body>
<div style="padding:0 9%;">
<ol class="container row padd">
<li class="content cell padd">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus id laoreet orci. Aenean congue pharetra enim, et sollicitudin est congue quis. Sed sit amet nibh ut nibh suscipit sagittis. Curabitur eros nisi, pulvinar id placerat blandit, vulputate id eros. Nullam tempor placerat ultrices. Sed ut dui ligula. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Ut tempor felis non felis commodo in volutpat sapien malesuada. Nunc congue bibendum leo, sed rutrum sem imperdiet vel. Cras gravida leo id odio scelerisque ut pharetra turpis sollicitudin. Morbi urna lorem, laoreet a lacinia ac, convallis sed urna. Morbi ut diam magna, a elementum erat. Nulla viverra molestie vestibulum. Ut nec ante in urna egestas tincidunt.</p>
<p>Nullam malesuada, urna ac pretium suscipit, purus est viverra nulla, semper placerat lacus urna in mauris. Integer egestas venenatis commodo. Mauris sagittis rutrum erat, quis tincidunt erat bibendum non. Etiam quis erat diam, at ullamcorper nisl. Suspendisse non convallis ante. Fusce eget augue nunc. Praesent pellentesque commodo est, nec vulputate dolor tincidunt vitae. Ut in pretium felis. Sed rutrum, nisi vel commodo accumsan, ante neque mattis neque, quis convallis magna metus molestie erat. Duis aliquet tempus neque ac vestibulum. Morbi nec lectus in lectus blandit blandit sit amet blandit justo. </p>
<p>Sed lorem ligula, rhoncus ac ornare vel, vulputate nec dui. Suspendisse id lectus in est aliquam tristique nec et augue. Morbi non quam id lorem sollicitudin gravida ut ut sem. Aenean nec nunc ac enim sodales laoreet sed quis neque. Maecenas auctor feugiat risus, eget porttitor lorem laoreet porttitor. Ut in ipsum non felis bibendum scelerisque convallis ac nibh. Vivamus nec viverra quam. Nam urna justo, eleifend eget semper ut, tristique non nisl. Duis posuere malesuada metus sed aliquam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum nulla tellus, condimentum vitae tincidunt gravida, tristique vel odio. Praesent sed nulla quam, fringilla convallis tellus. Suspendisse potenti. Morbi accumsan elementum placerat. Duis tellus nunc, lacinia non mattis et, varius a magna. Donec consequat viverra massa. Morbi sit amet metus lacus. Curabitur mattis lacinia eros, ac semper nisi dapibus nec. </p>
<p>Duis et diam sit amet metus aliquet cursus. Vivamus lobortis purus id ante accumsan tincidunt. Ut auctor sodales velit, imperdiet aliquet dui facilisis eu. Mauris porta pulvinar tortor ut mattis. Nullam congue sapien ut est luctus egestas. Curabitur eget neque augue. Donec a lacus sed purus consectetur euismod. Vivamus ut odio magna. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec sagittis dui ac odio convallis vel iaculis nibh rutrum. Donec porttitor sapien vel ipsum lacinia ut tristique ante consequat. In sodales malesuada odio, vitae iaculis dui molestie quis. Mauris eu magna at eros viverra pretium. Fusce placerat dolor turpis, id imperdiet orci. Proin sed magna aliquet sem accumsan rutrum. Etiam id sagittis purus. </p>
</li>
<li class="menu cell padd">
<div id="menu1" class="cell padd">
Column 1
</div>
<div id="menu2" class="cell padd">
Column 2
</div>
<!--<ul>
<li>Punkt 1</li>
<li>Punkt 2</li>
<li>Punkt 3</li>
</ul>-->
</li>
</ol>
</div>
</body>
</html>
Here is the CSS:
.container { display:table-row; }
.container .content { width:auto; background-color:#B0B0B0; display:table-cell;}
.container .menu { background:none repeat scroll 0 0 #FFFFEC; display:table-cell; width:350px; }
#menu1 { width:200px; float: left; margin-left: 5px; height:200px; }
#menu2 { width:100px; float: left; margin-left: 5px; height:200px; }
/* Misc */
.table { border: 1px solid #7777A0; }
.row { border: 1px solid #777799; background-color: #A000A0; }
.cell { border: 1px solid black; background-color: white; }
.padd { margin:4px; }
The problem should be obvious when opened in Firefox, the menu column on the right pushes the text in the left column down for some reason.
It looks correct in Opera.
The example uses a list, but can be replaced by divs (makes no difference).
Am I doing something illegal in the stylesheet to provoke this behavior?
Ps. it also looks completely rubbish in IE8.
For whatever reason, adding on .cell just vertical-align: top will sort out the vertical alignment problem.
It looks horrendous in IE8 because you forgot to add a doctype - and so IE8 is rendering in Quirks Mode.
You should add a doctype, such as the HTML5 doctype. You should change the top lines to these:
<!DOCTYPE html>
<html>
Both problems should now be fixed.
It's not easy to explain very well what I'm having problem with so I have attached an image:
http://test.richardknop.com/test.gif
Here is my simplified XHTML markup so far:
<div id="page">
<div id="content">
</div>
<div id="sidebar">
</div>
</div>
How to style it?
I'm getting a little bit desperate and I'm not even sure it's possible.
Like this:
#page {
position:relative;
overflow:hidden;
}
#page .images {
position:absolute; bottom:0; left: 0; width: $width-of-sidebar;
}
#sidebar {
padding-bottom: $height-of-the-image;
float:left;
}
To get background in the sidebar you'll need faux columns technique.
Richard, I think your thinking about the problem is wrong. You are thinking about these 2 items as one thing. You need to separate them.
Make footer/border a separate div and make sure it's always at the bottom. I think that's pretty straight forward.
Also make sure that your sidebar is the same size as your content. Put your images in the sidebar - and make them stick to the bottom like your footer. I usually use some sort of framework to make this easier - try out blueprint or elasticss
HTML:
<html>
<head>
<link rel="stylesheet" href="1732288.css" type="text/css" media="screen, projection">
</head>
<body>
<div id="page">
<div id="sidebar">
<div id="sidebar-content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam congue iaculis ultrices. Nam vitae odio ut nisl dignissim pretium. Donec pulvinar gravida felis, sed pretium risus aliquet ornare. Praesent accumsan libero rhoncus tortor semper bibendum. Nunc eleifend ante turpis. Aliquam sit amet ipsum orci, sit amet convallis erat. Morbi arcu dui, ultrices vel dapibus ac, viverra in odio. Proin imperdiet sollicitudin felis vestibulum porta. Aenean ac nisi nunc, et auctor sem. Praesent vitae erat augue. Suspendisse malesuada interdum consequat. Aenean laoreet molestie elit ut placerat.
</div>
<div id="sidebar-bottom">
<div id = "image-1">
image 1
</div>
<div id = "image-2">
image 2
</div>
</div>
</div>
<div id="content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam congue iaculis ultrices. Nam vitae odio ut nisl dignissim pretium. Donec pulvinar gravida felis, sed pretium risus aliquet ornare. Praesent accumsan libero rhoncus tortor semper bibendum. Nunc eleifend ante turpis. Aliquam sit amet ipsum orci, sit amet convallis erat. Morbi arcu dui, ultrices vel dapibus ac, viverra in odio. Proin imperdiet sollicitudin felis vestibulum porta. Aenean ac nisi nunc, et auctor sem. Praesent vitae erat augue. Suspendisse malesuada interdum consequat. Aenean laoreet molestie elit ut placerat.
</p>
<p>
Maecenas pellentesque elementum sapien, eu imperdiet turpis scelerisque pulvinar. Proin elit elit, condimentum non lacinia quis, congue vel justo. Sed rutrum magna quis neque sollicitudin vestibulum. Morbi ut eros vitae metus rhoncus sodales. Donec vel velit sed orci imperdiet tristique vel sed odio. Duis eget tellus purus. Sed blandit, tortor nec luctus tempor, tellus elit rutrum nibh, vel egestas libero velit eu libero. Nullam rhoncus, sem in ornare aliquet, dui purus consectetur felis, vitae porta elit leo et eros. Integer pharetra, mauris in lobortis aliquam, est eros commodo ante, sit amet facilisis mauris ipsum pharetra risus. Etiam vel nulla justo. Curabitur pretium facilisis consectetur. Aenean et mauris eros, nec pulvinar diam. Integer ut diam non leo ullamcorper vehicula a in mi. Curabitur adipiscing, enim feugiat porttitor pretium, lacus justo sodales odio, et congue mi sem sed ligula. Etiam accumsan accumsan tortor id pretium.
</p>
<p>
Curabitur quis nunc turpis, vitae vestibulum magna. Aliquam ultrices mi eget arcu convallis feugiat. Integer lacinia ipsum suscipit justo dapibus ultrices. Ut quis arcu vel nibh tincidunt tempus. Quisque imperdiet fermentum leo a ultrices. Donec arcu odio, congue eget elementum a, dignissim at felis. Donec in nibh dui. Curabitur adipiscing consequat urna, sed vehicula neque molestie at. Sed consequat metus velit. Nunc justo neque, tincidunt et faucibus et, mattis sit amet nulla. Integer elementum, purus in malesuada mollis, orci nisi ullamcorper nisl, quis tempor nunc augue et arcu. Integer massa metus, faucibus et vestibulum at, egestas vel enim. Integer condimentum sollicitudin sollicitudin. Nulla volutpat ultricies mauris, eget hendrerit eros accumsan ac. Suspendisse aliquam, lacus ut fringilla auctor, sem sapien elementum nulla, a hendrerit enim turpis vitae dolor. Pellentesque ac mi quis ipsum commodo venenatis.
</p>
</div>
</div>
<div id = "footer">
footer
</div>
</body>
</html>
CSS:
body{
background: #eee;
}
#page{
background: #cccccc;
width: 800px;
}
#sidebar{
background: #999;
width: 200px;
height: 100%;
margin-right: 10px;
float: left;
}
#sidebar-content{
height: 90%;
}
#sidebar-bottom {
height: 50px;
vertical-align: bottom;
}
#image-1{
width: 100px;
float: left;
}
#content{
height: 100%;
left: 200px;
background: #333;
}
#footer{
background: #3ee;
}
You can play around and make it centered and such - but this is the gist of it without using any frameworks.
Here is the solution online :
http://www.gorbikoff.com/stuff/1732288.htm
Css is at:
http://www.gorbikoff.com/stuff/1732288.css