Related
I want to build the following UI behavior:
I have a responsive content followed by a new section, and that new section should have a background image than scrolls with the page, until reaching the top, and then freezes at the top.
I made a research and have found a few similar answers, but can't find anything specific for what I want.
I don't want to use a fixed background image resting at TOP LEFT, as I don't want the image to start at the top of the page.
This question has me off to a good start:
How can I make a div stick to the top of the screen once it's been scrolled to?
This fiddle also has parts of what I'm trying to do, but it's not there yet, and I'm stumped. (I've broken this code somehow, while trying to stumble along on my own. Pretend the big red box is the background image div.
http://fiddle.jshell.net/5y2b4xoL/
Essentially, the background image should not be fixed until it is scrolled to the top of the page, at which point it should become fixed.
Any help is appreciated.
you could use jQuery scroll() so when the scroll comes to your element it will make it stick by changing position,
see the following snippet:
$(window).scroll(function() {
var y_scroll_pos = window.pageYOffset;
var scroll_pos_test = 155;
// set to whatever you want it to be
if (y_scroll_pos > scroll_pos_test) {
$("#scroller").css("position", "fixed");
$("#scroller").css("top", "0");
} else {
$("#scroller").css("position", "relative");
$("#scroller").css("top", "auto");
}
});
body {
min-height: 1400px;
background:yellow;
margin: 0;
}
h1 {
margin-bottom: 100px;
}
#scroller {
background: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>Scroller demo</h1>
<div id="scroller-anchor"></div>
<div id="scroller">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam non tortor eros, nec rhoncus nulla. In fringilla, dui vel vehicula luctus,
nunc arcu ultricies nisi, eu adipiscing sapien orci nec justo. Nulla facilisis gravida tempus. Nunc interdum, dolor sed euismod rutrum, odio
turpis rutrum odio, iaculis venenatis nunc sem eu dui. Nulla venenatis, leo quis porta luctus, ipsum ipsum tempus nunc, in fermentum arcu odio
non ipsum. Vivamus bibendum pulvinar sapien a cursus. Nullam lobortis nibh eget odio placerat hendrerit. In non leo turpis, quis posuere augue
</div>
. Mauris auctor commodo quam, quis vulputate orci tincidunt et. Nulla tellus lectus, rhoncus ut malesuada eget, auctor ac ligula. Suspendisse mollis
tempus interdum. Proin non velit in lectus elementum interdum eu eget velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
inceptos himenaeos. Nam lobortis, est ac elementum tincidunt, lacus dolor lacinia erat, eget ullamcorper augue justo in lectus. Aliquam eros felis,
fringilla sed cursus sit amet, consectetur nec tellus. Vestibulum ultricies auctor erat, ac facilisis felis fermentum id. Quisque sed rhoncus dolor.
Nullam hendrerit justo non lacus rutrum vitae pellentesque velit adipiscing. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere
cubilia Curae; Phasellus pulvinar ultricies sapien, sed consectetur purus condimentum et. Nulla viverra accumsan condimentum. Ut sodales, lacus sed varius
porttitor, odio ipsum tristique odio, ac sollicitudin est urna at sem. Aliquam suscipit porta felis, sit amet aliquet justo ultricies ac. Proin a orci
et eros interdum dignissim. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean vehicula malesuada pretium.
Suspendisse potenti. Nullam at felis quam. Donec gravida mi et purus pretium vitae placerat lacus porttitor. Donec scelerisque pellentesque sollicitudin.
Nullam et lacinia urna. In velit magna, malesuada quis iaculis a, auctor at felis. Quisque hendrerit aliquam diam vel luctus. Vestibulum venenatis
sapien at libero mattis mattis. Etiam eu aliquet tellus. Cras malesuada ligula non urna auctor a pretium lorem placerat. Quisque pulvinar turpis
non nisi laoreet fringilla. Proin mollis enim id nisi egestas eget varius metus mattis. Nulla viverra dui quis velit gravida sodales. Nulla nec
nisi et ligula viverra eleifend. Aliquam ac lectus at nunc mattis volutpat. Suspendisse elit lorem, gravida nec lobortis non, venenatis nec odio.
Vestibulum et luctus sapien. Donec faucibus blandit urna, nec convallis metus aliquam suscipit. Curabitur fermentum purus ornare mauris auctor tristique.
Cras vel magna sit amet felis tempor dapibus nec id turpis. Duis eu tortor lorem. Nulla dapibus pellentesque enim lobortis feugiat. Vestibulum ante ipsum
primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi iaculis sem ut erat sodales non elementum elit bibendum. Duis ut mi tellus.
Integer consequat ligula mattis tortor aliquam ut hendrerit lacus tempus. Quisque suscipit magna nec nulla accumsan sit amet tempor nisi gravida. Mauris
pulvinar tortor id justo feugiat ultrices. Vestibulum vel ante orci, a venenatis tortor. Duis urna erat, imperdiet iaculis facilisis eu, convallis
et dolor. Suspendisse mauris ligula, luctus a pellentesque vitae, rhoncus eu lectus. Morbi eget leo sed magna varius pretium quis sit amet lectus
. Nunc sagittis molestie congue. Donec aliquet vestibulum dui, non placerat massa pharetra at. Maecenas ac massa elit, eget venenatis elit. Nullam
elementum aliquet nisi, eu luctus libero fringilla sed. Maecenas vitae mauris nisi, a egestas lectus. Pellentesque habitant morbi tristique senectus
et netus et malesuada fames ac turpis egestas. Donec lobortis malesuada libero, a tempus tortor auctor et. Vestibulum iaculis eleifend neque, et
consequat augue adipiscing sit amet. Integer sodales dictum nibh et suscipit. In congue sollicitudin erat et imperdiet. Proin tellus enim, bibendum
a sollicitudin non, accumsan at nisl. Phasellus vulputate elementum ligula a volutpat. Etiam scelerisque sollicitudin massa id convallis. Duis bibendum
molestie tempus. Vivamus lacinia accumsan quam, at aliquam mauris ultrices at. Sed malesuada faucibus massa, lobortis pharetra diam accumsan a.
Curabitur dignissim nunc vitae erat laoreet a laoreet sem bibendum. Etiam eu varius erat. Integer porttitor porta tincidunt. Nam dictum tellus
bibendum tellus interdum ullamcorper. Phasellus justo lorem, semper in vehicula interdum, vestibulum ac purus. Integer hendrerit lectus at nisi luctus aliquet.
Donec consectetur nisi vel metus viverra porttitor vel non lectus. Proin eget enim sagittis ligula mattis posuere ut varius ligula. Mauris euismod
tempus sem nec pretium. Donec congue suscipit libero, id pretium dolor luctus sed. Donec sed metus id nulla tempor vulputate non vel nisl.
Vestibulum a turpis vitae leo commodo pulvinar eu vitae enim. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
I'm using bootstrap but I need a very specific div that lets users exit the site quickly. I have it fixed and styled fine but the problem is it over-laps the content. I really need it to behave like a navbar in that the content scrolls under it and I cant figure out why it won't because I'm dumb.
<html>
<head>
<style>
.closefast{
flex: auto;
position:fixed;
text-align: center;
background:#f1f1f1;
overflow: hidden;
font-size: 3em;
height:auto;
width:auto;
margin-bottom: .5rem;
}
</style>
</head>
<body>
<div class="closefast"><a href="https://www.google.co.uk" alt="google">
<strong>CLOSE FAST</strong> <span class="glyphicon glyphicon-eye-close">
</span></a></div>
<div class="container">All the main part of my site </div>
</body></html>
relavant code pen: http://codepen.io/Spectral/pen/eBMjdK
It works as you intended to. You just have to add content to your container. Now, with regards to the content being positioned on top of the content you have a couple of options 1) add padding to the container (padding-top: 75px) and everything inside will be shifted down by that amount example or set margin to the container (margin-top: 75px)
.container{
padding-top: 75px;
}
OR
.container{
margin-top: 75px;
}
<div style="height:75px;">
<div class="closefast">
<a href="https://www.google.co.uk" alt="google">
<strong>CLOSE FAST</strong>
<span class="glyphicon glyphicon-eye-close"></span>
</a>
</div>
</div>
Here I've enclosed your div with class closefast with another div and put a height in it.
Try this. Set the position of both close fast and container as fixed with positions.
<html>
<head>
<style>
.closefast {
text-align: center;
background: #f1f1f1;
overflow: hidden;
font-size: 3em;
width: 100%;
margin-bottom: .5rem;
position: fixed;
top: 0;
height: 75px;
}
.container {
position: fixed;
top: 75px;
height: 93%;
width: 100%;
overflow: auto;
}
</style>
</head>
<body>
<div class="closefast">
<strong>CLOSE FAST</strong> <span class="glyphicon glyphicon-eye-close"></span>
</div>
<div class="container">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. </p>
<p>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim lacinia nunc. Curabitur tortor. Pellentesque nibh. Aenean quam. In scelerisque sem at dolor. Maecenas mattis. Sed convallis tristique sem. Proin ut ligula vel nunc egestas porttitor. Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis quis ligula lacinia aliquet. Mauris ipsum. Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh. </p>
<p>Quisque volutpat condimentum velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam nec ante. Sed lacinia, urna non tincidunt mattis, tortor neque adipiscing diam, a cursus ipsum ante quis turpis. Nulla facilisi. Ut fringilla. Suspendisse potenti. Nunc feugiat mi a tellus consequat imperdiet. Vestibulum sapien. Proin quam. Etiam ultrices. </p>
<p>Suspendisse in justo eu magna luctus suscipit. Sed lectus. Integer euismod lacus luctus magna. Quisque cursus, metus vitae pharetra auctor, sem massa mattis sem, at interdum magna augue eget diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi lacinia molestie dui. Praesent blandit dolor. Sed non quam. In vel mi sit amet augue congue elementum. Morbi in ipsum sit amet pede facilisis laoreet. Donec lacus nunc, viverra nec, blandit vel, egestas et, augue. Vestibulum tincidunt malesuada tellus. Ut ultrices ultrices enim. </p>
<p>Curabitur sit amet mauris. Morbi in dui quis est pulvinar ullamcorper. Nulla facilisi. Integer lacinia sollicitudin massa. Cras metus. Sed aliquet risus a tortor. Integer id quam. Morbi mi. Quisque nisl felis, venenatis tristique, dignissim in, ultrices sit amet, augue. Proin sodales libero eget ante. Nulla quam. Aenean laoreet. Vestibulum nisi lectus, commodo ac, facilisis ac, ultricies eu, pede. </p>
<p>Ut orci risus, accumsan porttitor, cursus quis, aliquet eget, justo. Sed pretium blandit orci. Ut eu diam at pede suscipit sodales. Aenean lectus elit, fermentum non, convallis id, sagittis at, neque. Nullam mauris orci, aliquet et, iaculis et, viverra vitae, ligula. Nulla ut felis in purus aliquam imperdiet. Maecenas aliquet mollis lectus. Vivamus consectetuer risus et tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. </p>
<p>Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim lacinia nunc. Curabitur tortor. Pellentesque nibh. Aenean quam. </p>
<p>In scelerisque sem at dolor. Maecenas mattis. Sed convallis tristique sem. Proin ut ligula vel nunc egestas porttitor. Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis quis ligula lacinia aliquet. Mauris ipsum. Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh. Quisque volutpat condimentum velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam nec ante. </p>
<p>Sed lacinia, urna non tincidunt mattis, tortor neque adipiscing diam, a cursus ipsum ante quis turpis. Nulla facilisi. Ut fringilla. Suspendisse potenti. Nunc feugiat mi a tellus consequat imperdiet. Vestibulum sapien. Proin quam. Etiam ultrices. Suspendisse in justo eu magna luctus suscipit. Sed lectus. Integer euismod lacus luctus magna. Quisque cursus, metus vitae pharetra auctor, sem massa mattis sem, at interdum magna augue eget diam. </p>
<p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi lacinia molestie dui. Praesent blandit dolor. Sed non quam. In vel mi sit amet augue congue elementum. Morbi in ipsum sit amet pede facilisis laoreet. Donec lacus nunc, viverra nec, blandit vel, egestas et, augue. Vestibulum tincidunt malesuada tellus. Ut ultrices ultrices enim. Curabitur sit amet mauris. Morbi in dui quis est pulvinar ullamcorper. Nulla facilisi. </p>
<p>Integer lacinia sollicitudin massa. Cras metus. Sed aliquet risus a tortor. Integer id quam. Morbi mi. Quisque nisl felis, venenatis tristique, dignissim in, ultrices sit amet, augue. Proin sodales libero eget ante. Nulla quam. Aenean laoreet. Vestibulum nisi lectus, commodo ac, facilisis ac, ultricies eu, pede. Ut orci risus, accumsan porttitor, cursus quis, aliquet eget, justo. Sed pretium blandit orci. </p>
<p>Ut eu diam at pede suscipit sodales. Aenean lectus elit, fermentum non, convallis id, sagittis at, neque. Nullam mauris orci, aliquet et, iaculis et, viverra vitae, ligula. Nulla ut felis in purus aliquam imperdiet. Maecenas aliquet mollis lectus. Vivamus consectetuer risus et tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. </p>
</div>
</body>
</html>
Hey i have wrapper and container which i divide on 2 sides, left and right. I can't add any colors, backgrounds, fonts or anything to right side. Is this good way to solve this problem or should i be doing something else? And if you know how to fix let me know, i tried using !important but it's not working. Adding jsfiddle and code:
home {} #wrapper {
background-color: #FFFFFF;
padding: 15px;
overflow: auto;
}
#wrapper .leftbox {
float: left;
width: 63%;
padding: 12px;
}
#wrapper .rightbox {
float: right;
padding: 12px;
padding-right: 120px;
}
.rightbox.color-box {
height: 200px;
background-color: #2C2C2C;
font-size: 30px!important;
}
<home>
<div class="container">
<!-- wrapper-->
<div id="wrapper">
<div class="leftbox">
<h3>Welcome page</h3>
<p style="padding-top: 30px">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam hendrerit posuere lobortis. Ut placerat vitae dolor vitae ultrices. Fusce tristique enim at lacus porta, sed dictum massa fermentum. Etiam a ullamcorper mi, vitae tristique lectus.
Sed ut finibus lectus, vel rutrum dui. Nullam vestibulum non tellus sit amet interdum. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec aliquet, ex ut faucibus tempor, nulla tortor sollicitudin nunc, at feugiat nulla erat
nec magna. Nullam venenatis maximus nulla, eget blandit libero dignissim a. Maecenas et lorem sagittis, hendrerit metus ut, aliquet purus. Nunc tempor ultrices velit sit amet feugiat. Curabitur velit eros, bibendum in fermentum sed, mattis sit
amet sem. Maecenas sodales vehicula egestas.</p>
<p>Donec placerat molestie nunc quis malesuada. Vivamus sed ligula at dui blandit hendrerit et non sem. Ut mollis varius nisi, et pellentesque massa condimentum quis. Nulla at facilisis sem. Etiam mauris lorem, suscipit eget vulputate eu, cursus
ornare eros. Donec sit amet nibh id lectus feugiat egestas sed ut ligula. Fusce cursus ligula lectus, nec eleifend augue egestas sit amet.</p>
<p>
Proin arcu mauris, cursus vel est nec, condimentum mattis nunc. Curabitur in massa a dui vestibulum imperdiet non eu justo. Suspendisse porta, lectus ut porta vulputate, libero massa euismod massa, quis scelerisque dolor massa ut eros. In id dolor vitae
felis gravida lacinia. Cras vulputate turpis at elit placerat, ut aliquam elit mattis. Fusce ante est, volutpat sollicitudin eleifend ac, lobortis eu mi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
Cras sed maximus orci. Etiam pulvinar est metus, eget dapibus justo vehicula nec. Phasellus lectus magna, eleifend finibus nisi a, faucibus accumsan arcu. Nam sed ante pellentesque, sollicitudin quam eu, aliquet eros. Ut vehicula vestibulum
dui id sagittis. Suspendisse pharetra id dui nec egestas. Aliquam scelerisque pulvinar metus. In sagittis ornare commodo.
</p>
<p>
Curabitur in ipsum congue, ultricies nunc id, euismod eros. Vestibulum hendrerit augue libero, quis fermentum dui blandit vestibulum. Nulla pharetra volutpat dapibus. Ut tincidunt quam vel nunc iaculis rhoncus. Ut et egestas enim. Etiam a hendrerit neque.
Donec iaculis et sapien nec placerat. Phasellus lobortis, justo ac tempus posuere, nulla libero condimentum odio, fringilla vehicula metus ligula vel metus. Nunc vel quam quis turpis ultricies tempor. Nulla ac nibh massa. Aenean porta auctor
metus, vitae rhoncus mi iaculis sed. Vivamus pulvinar finibus urna, semper bibendum sem accumsan a. Etiam ac auctor elit, sit amet hendrerit velit. Sed volutpat ante neque, quis molestie purus pellentesque ut.</p>
<p>Integer ornare convallis nisl viverra mollis. Nullam ac massa a quam blandit ullamcorper. Nunc venenatis in dui eget faucibus. Fusce dapibus mauris sit amet magna gravida maximus. Duis condimentum, arcu non blandit placerat, nibh lorem fermentum
dui, et maximus enim enim at sem. Donec tempor lobortis justo vel sagittis. Donec auctor bibendum dignissim. Aenean id fringilla lorem. Etiam varius felis sed ligula tempus, vel sodales quam dignissim. Sed et posuere quam. Sed id libero et tellus
ultrices congue. Aenean commodo commodo consectetur. Curabitur ultricies non sem vitae hendrerit.</p>
<p>Aliquam erat volutpat. Sed tristique, est eget interdum scelerisque, tortor nibh vulputate lacus, in vehicula felis felis ut ligula. Phasellus sit amet finibus mauris. Cras gravida tincidunt finibus. Vivamus venenatis eros non felis rhoncus, vel
tempus nisl faucibus. Integer ac vulputate risus. Maecenas eget imperdiet lacus. Suspendisse bibendum, justo vel elementum accumsan, lorem magna tincidunt lorem, sit amet rutrum neque eros at nunc. Pellentesque habitant morbi tristique senectus
et netus et malesuada fames ac turpis egestas. Aliquam condimentum congue ante non commodo. Morbi a urna vitae magna sodales scelerisque. Fusce quam arcu, bibendum in erat vitae, pretium lacinia magna. Aliquam iaculis fermentum ultricies.</p>
<p>
Praesent sed felis at ligula euismod elementum sed a lectus. Curabitur scelerisque augue est. Suspendisse suscipit non turpis ut venenatis. Aliquam id interdum risus. Sed laoreet lorem tincidunt, sollicitudin elit elementum, fringilla leo. Fusce volutpat
nulla sed mauris interdum, eget lobortis magna congue. Vivamus condimentum neque quis commodo laoreet.</p>
</div>
<div class="rightbox">
<div class="color-box">
lol
</div>
</div>
</div>
</div>
</home>
Change your selector from .rightbox.color-box to .rightbox .color-box
CSS Selectors
You need to follow css standards. If you write .rightbox.color-box this means both the classes are there in same div but here you are trying to target .color-box which is children of .rightbox so you need to give space between both classes
home {} #wrapper {
background-color: #FFFFFF;
padding: 15px;
overflow: auto;
}
#wrapper .leftbox {
float: left;
width: 63%;
padding: 12px;
}
#wrapper .rightbox {
float: right;
padding: 12px;
padding-right: 120px;
background: #ccc;
color: red;
}
.rightbox .color-box {
height: 200px;
background-color: #2C2C2C;
font-size: 30px!important;
}
<home>
<div class="container">
<!-- wrapper-->
<div id="wrapper">
<div class="leftbox">
<h3>Welcome page</h3>
<p style="padding-top: 30px">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam hendrerit posuere lobortis. Ut placerat vitae dolor vitae ultrices. Fusce tristique enim at lacus porta, sed dictum massa fermentum. Etiam a ullamcorper mi, vitae tristique lectus.
Sed ut finibus lectus, vel rutrum dui. Nullam vestibulum non tellus sit amet interdum. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec aliquet, ex ut faucibus tempor, nulla tortor sollicitudin nunc, at feugiat nulla erat
nec magna. Nullam venenatis maximus nulla, eget blandit libero dignissim a. Maecenas et lorem sagittis, hendrerit metus ut, aliquet purus. Nunc tempor ultrices velit sit amet feugiat. Curabitur velit eros, bibendum in fermentum sed, mattis sit
amet sem. Maecenas sodales vehicula egestas.</p>
<p>Donec placerat molestie nunc quis malesuada. Vivamus sed ligula at dui blandit hendrerit et non sem. Ut mollis varius nisi, et pellentesque massa condimentum quis. Nulla at facilisis sem. Etiam mauris lorem, suscipit eget vulputate eu, cursus
ornare eros. Donec sit amet nibh id lectus feugiat egestas sed ut ligula. Fusce cursus ligula lectus, nec eleifend augue egestas sit amet.</p>
<p>
Proin arcu mauris, cursus vel est nec, condimentum mattis nunc. Curabitur in massa a dui vestibulum imperdiet non eu justo. Suspendisse porta, lectus ut porta vulputate, libero massa euismod massa, quis scelerisque dolor massa ut eros. In id dolor vitae
felis gravida lacinia. Cras vulputate turpis at elit placerat, ut aliquam elit mattis. Fusce ante est, volutpat sollicitudin eleifend ac, lobortis eu mi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
Cras sed maximus orci. Etiam pulvinar est metus, eget dapibus justo vehicula nec. Phasellus lectus magna, eleifend finibus nisi a, faucibus accumsan arcu. Nam sed ante pellentesque, sollicitudin quam eu, aliquet eros. Ut vehicula vestibulum
dui id sagittis. Suspendisse pharetra id dui nec egestas. Aliquam scelerisque pulvinar metus. In sagittis ornare commodo.
</p>
<p>
Curabitur in ipsum congue, ultricies nunc id, euismod eros. Vestibulum hendrerit augue libero, quis fermentum dui blandit vestibulum. Nulla pharetra volutpat dapibus. Ut tincidunt quam vel nunc iaculis rhoncus. Ut et egestas enim. Etiam a hendrerit neque.
Donec iaculis et sapien nec placerat. Phasellus lobortis, justo ac tempus posuere, nulla libero condimentum odio, fringilla vehicula metus ligula vel metus. Nunc vel quam quis turpis ultricies tempor. Nulla ac nibh massa. Aenean porta auctor
metus, vitae rhoncus mi iaculis sed. Vivamus pulvinar finibus urna, semper bibendum sem accumsan a. Etiam ac auctor elit, sit amet hendrerit velit. Sed volutpat ante neque, quis molestie purus pellentesque ut.</p>
<p>Integer ornare convallis nisl viverra mollis. Nullam ac massa a quam blandit ullamcorper. Nunc venenatis in dui eget faucibus. Fusce dapibus mauris sit amet magna gravida maximus. Duis condimentum, arcu non blandit placerat, nibh lorem fermentum
dui, et maximus enim enim at sem. Donec tempor lobortis justo vel sagittis. Donec auctor bibendum dignissim. Aenean id fringilla lorem. Etiam varius felis sed ligula tempus, vel sodales quam dignissim. Sed et posuere quam. Sed id libero et tellus
ultrices congue. Aenean commodo commodo consectetur. Curabitur ultricies non sem vitae hendrerit.</p>
<p>Aliquam erat volutpat. Sed tristique, est eget interdum scelerisque, tortor nibh vulputate lacus, in vehicula felis felis ut ligula. Phasellus sit amet finibus mauris. Cras gravida tincidunt finibus. Vivamus venenatis eros non felis rhoncus, vel
tempus nisl faucibus. Integer ac vulputate risus. Maecenas eget imperdiet lacus. Suspendisse bibendum, justo vel elementum accumsan, lorem magna tincidunt lorem, sit amet rutrum neque eros at nunc. Pellentesque habitant morbi tristique senectus
et netus et malesuada fames ac turpis egestas. Aliquam condimentum congue ante non commodo. Morbi a urna vitae magna sodales scelerisque. Fusce quam arcu, bibendum in erat vitae, pretium lacinia magna. Aliquam iaculis fermentum ultricies.</p>
<p>
Praesent sed felis at ligula euismod elementum sed a lectus. Curabitur scelerisque augue est. Suspendisse suscipit non turpis ut venenatis. Aliquam id interdum risus. Sed laoreet lorem tincidunt, sollicitudin elit elementum, fringilla leo. Fusce volutpat
nulla sed mauris interdum, eget lobortis magna congue. Vivamus condimentum neque quis commodo laoreet.</p>
</div>
<div class="rightbox">
<div class="color-box">
lol
</div>
</div>
</div>
</div>
</home>
Read brief about css selectors here
Please add this code
#wrapper .leftbox {
float: left;
width: 50%;
padding: 0;
}
#wrapper .rightbox {
float: left;
padding: 0;
padding-right: 0;
background: #000;
width: 50%;
}
I have two <div> elements that I want to position side by side like the following:
+------------+---------+
| navigation | content |
+------------+---------+
I want the navigation <div> to be as large as required, but not larger (shrink-to-fit behaviour). The content <div> then should fill the remaining space.
How do I achieve this positioning with CSS without specifying percentage ratios such as 20% / 80%?
The Code:
<!DOCTYPE html>
<html>
<head>
<title>Testing</title>
<style type="text/css">
#nav { float: left; }
#content { overflow: hidden; }
</style>
</head>
<body>
<div id="nav">
<ul>
<li>Navigation Item 1</li>
<li>Navigation Item 2</li>
<li>Navigation Item 3</li>
<li>Navigation Item Long One 4</li>
</ul>
</div>
<div id="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vulputate scelerisque pharetra. Cras vitae dolor felis. In hac habitasse platea dictumst. Donec aliquam eros nec massa facilisis rhoncus. Praesent hendrerit metus id quam sodales mattis. Vestibulum odio velit, ornare tempus ultrices et, egestas congue sem. Sed nec felis ut quam volutpat vestibulum eget vel tellus. Aenean mattis, justo in ultrices dictum, enim felis sollicitudin dui, et ornare sem tellus quis ligula. Nam viverra imperdiet lacus et luctus. Curabitur id nunc a risus rhoncus tempor. Proin eu tortor est, vel tempus orci. Donec mattis neque id felis aliquam ac convallis turpis lobortis. Suspendisse potenti.</p>
<p>Vestibulum hendrerit tincidunt elit at congue. Fusce ut nisi sapien, eu adipiscing eros. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Ut eget diam nibh. Vestibulum tortor nisl, iaculis ultricies imperdiet et, porta nec eros. Proin convallis venenatis felis eget sodales. Integer tincidunt auctor tortor, in vestibulum nunc iaculis suscipit. Nam vitae mi id libero sollicitudin vestibulum. Vestibulum id dui eget nibh hendrerit tempus. Aliquam eu turpis at enim euismod sodales. Vestibulum suscipit purus felis. Donec non metus sem, ac sollicitudin urna. Aenean sed odio nunc, et tristique mi. Cras sodales bibendum sodales. Nunc in risus leo, sed scelerisque lacus. Praesent vel metus velit. Integer commodo nisl eu erat laoreet hendrerit.</p>
<p>Etiam vel sem ut magna commodo facilisis non ut magna. Praesent metus urna, sollicitudin vitae cursus a, imperdiet non libero. Vestibulum at cursus augue. Vivamus fringilla odio in mauris sagittis ultricies. Phasellus quis tincidunt tellus. Curabitur ac pellentesque odio. Morbi enim dui, sollicitudin eu imperdiet at, ultricies vel elit. Ut et tortor tellus, euismod molestie justo. Donec gravida fermentum blandit. Curabitur tincidunt est eget nibh mollis dignissim. Nunc sit amet arcu sapien. Nullam et nulla massa, id dapibus lorem. Nunc luctus sagittis tellus, nec suscipit lacus mollis eget. Nam placerat laoreet tempus. Curabitur lectus leo, ultrices a hendrerit a, pharetra quis neque. Nullam vel fringilla metus. Nunc nisi nunc, laoreet a tempor eget, condimentum ac ante. Duis bibendum orci at massa scelerisque in lobortis tortor fermentum. Cras in mi a dui tristique vulputate vitae ac arcu. Aliquam non odio non purus feugiat luctus.</p>
<p>Maecenas et accumsan odio. Duis lobortis urna sed neque pulvinar condimentum. Curabitur ac nibh ante, eget tincidunt massa. Quisque bibendum, nunc eget ultrices interdum, purus est sodales nulla, in vehicula nisi sem nec nunc. Etiam venenatis, felis vitae sodales condimentum, est erat placerat mi, ut tempus lectus augue id nulla. Duis justo mauris, condimentum ut sodales ac, semper et dolor. Quisque ac nisi velit, non viverra lectus. Sed auctor condimentum est, sit amet semper nibh aliquam sed. Curabitur nisl nisi, egestas quis tempus nec, euismod sit amet diam. Sed pretium lacinia tristique. Aenean congue bibendum velit. Pellentesque leo velit, hendrerit ut pellentesque at, scelerisque in augue. Donec id orci est. Suspendisse tempor, velit ut tempus vestibulum, mauris metus viverra velit, in ornare elit orci et lorem. Maecenas feugiat dictum ipsum at iaculis. Pellentesque auctor neque ut tellus viverra vulputate. Vestibulum eu tellus metus. Praesent accumsan molestie ipsum, tempor vehicula metus cursus ac. Integer aliquet pharetra sodales. Proin adipiscing, odio eget tristique placerat, sem nunc aliquet mauris, vel gravida ligula augue id nunc.</p>
<p>Sed placerat, dui ac accumsan porta, lacus massa molestie nibh, in lacinia enim nisl venenatis erat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed sit amet nulla a lacus accumsan gravida sed a libero. Pellentesque tincidunt metus non libero porta lacinia. Ut non neque in tortor cursus tempor. Duis massa urna, hendrerit eget eleifend at, dapibus quis libero. Nunc accumsan felis ac purus suscipit pretium. Duis rhoncus ultrices tempus. In quis tellus mi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam facilisis, enim non consequat faucibus, massa ipsum pellentesque ligula, vel rhoncus lacus lacus a justo. Nullam at ultricies metus. Mauris fermentum mollis ipsum at iaculis. Integer porttitor, nisl in interdum auctor, odio augue vehicula nunc, ac gravida lectus nibh id erat. Fusce interdum hendrerit quam ac aliquet. Fusce venenatis risus ac neque porta egestas dictum eleifend mi. Nunc scelerisque interdum molestie. Proin suscipit sem sed libero posuere malesuada.</p>
</div>
</body>
</html>
The Explanation:
Really, this is easy enough to understand. You simply have two divs. The navigation has float: left - this allows the rest of the content to float around it. The content then has overflow: hidden to force it into one column. IE6 will not honor the overflow: hidden, though the float will still work.
Check it out at jsFiddle
Give the navigation <div> a float:left; CSS property.
Or target both with a display:inline; property.
If you make the navigation div and the content div float: left it will not be larger as required; or you can also additionally specify a width! Be aware that the width of both divs together must not become bigger than the amount of space that is available, otherwise the layout will break and they will be under each other!
<style>
#page_wrap { width:996px; margin: 0 auto; }
#nav { float:left; }
</style>
<div id="page_wrap">
<div id="nav">
#nav
</div>
#contents
</div>
I'm looking for a footer like facebook has but only use CSS to style it no js.
As you can see here http://dl.getdropbox.com/u/5910/Jing/2009-02-03_1256.png it always stays at the bottom even if I scroll down. http://dl.getdropbox.com/u/5910/Jing/2009-02-03_1258.png
For all browsers, save for IE6, do this:
div#footer {
bottom: 0;
width: 100%;
height: 25px;
position: fixed;
}
I know you mentioned not wanting to use JavaScript, but as for IE6, it's been my experience that you may have to resort to some sort of JavaScript expression in the CSS to get it to work as smoothly as this CSS does in other browsers.
This might do it:
http://ryanfait.com/sticky-footer/
I've used this in the past:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Fixed CSS layer sample</title>
<style type="text/css">
body
{
margin:0;
padding:0 10px 0 10px;
border:0;
height:100%;
overflow-y:auto;
}
#fixed
{
display:block;
bottom:0px;
left:0px;
right:0px;
position:fixed;
border:1px solid #888;
padding:0px;
text-align:center;
font-weight:bold;
color:#000;
background: #ccc;
width: 100%;
height: 100px;
}
* html #fixed
{
position:absolute;
}
</style>
<!--[if lte IE 6]>
<style type="text/css">
/*<![CDATA[*/
html {overflow-x:auto; overflow-y:hidden;}
/*]]>*/
</style>
<![endif]-->
</head>
<body>
<div id="page">
<p><h3>Some latin text here to make the page scroll</h3></p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin pharetra pharetra tortor. Nunc in pede. Cras dapibus. Phasellus pede tortor, facilisis id, rutrum non, eleifend non, sem. Phasellus ut metus eu pede mollis sagittis. Cras ut justo ut metus rutrum auctor. Sed gravida consectetuer quam. Ut ligula. Suspendisse potenti. Ut et ante. Aenean mauris.</p>
<p>Praesent lorem. Praesent suscipit convallis orci. Morbi nec felis vitae est vehicula ornare. Quisque nisi neque, pretium ac, eleifend nonummy, cursus sit amet, purus. Nullam venenatis suscipit arcu. Aenean mattis enim vitae nisl. Maecenas diam pede, vehicula in, vehicula in, auctor ac, urna. Phasellus vel nibh scelerisque ante varius feugiat. Phasellus vehicula malesuada lorem. Donec elementum, elit vel cursus rhoncus, purus est nonummy leo, fermentum lacinia ante libero quis libero. Vivamus tincidunt, nulla et dapibus interdum, risus magna pharetra purus, eu adipiscing mi nisl eu massa. Donec elit arcu, scelerisque eu, suscipit quis, tincidunt ut, enim. Suspendisse eget justo vitae lectus euismod facilisis. Donec at ipsum nec mi sollicitudin viverra. Fusce accumsan, ante non dictum viverra, libero pede condimentum dolor, non congue nisl enim sit amet nulla. Aenean mollis, metus sed molestie bibendum, nulla erat tincidunt velit, non feugiat lorem mauris id mi. Mauris eleifend. Vivamus viverra. Fusce dapibus libero feugiat lorem.</p>
<p>Donec a nisl nec neque dictum varius. Aliquam consequat ipsum in dui placerat feugiat. Nam fringilla, libero ut consectetuer aliquet, lorem nisi pharetra est, eu sagittis lorem purus ac dolor. Donec aliquet mi nec augue. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas pretium, est sed feugiat bibendum, odio ligula convallis pede, id aliquet erat turpis sit amet ipsum. Phasellus pulvinar laoreet arcu. Curabitur nunc. Ut id purus vitae lacus convallis consectetuer. Duis in quam. Praesent pharetra. In quis est a massa pretium auctor. Nam metus mi, pulvinar ac, blandit nec, suscipit semper, quam. Integer eget felis id enim sodales dictum. Phasellus quis neque. Duis cursus imperdiet lorem. Etiam eget risus et erat dapibus feugiat. Aenean gravida justo vitae lectus. Nullam aliquet. Integer et augue porttitor urna varius porta.</p>
<p>Suspendisse ultricies mauris eget velit dictum tincidunt. Maecenas id pede quis massa ornare congue. Fusce placerat odio non erat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque dignissim nunc ac ipsum. Integer ac libero et risus luctus ultrices. Phasellus urna. Nunc a lorem eu diam mollis rhoncus. Curabitur velit mi, mollis sit amet, vulputate ut, varius lobortis, turpis. Nulla scelerisque euismod lacus. Phasellus vehicula justo sed diam. Sed non nisi sit amet sem posuere fermentum. Donec faucibus pede. Donec pharetra tristique lacus.</p>
<p>Maecenas luctus, nisl molestie gravida sagittis, quam augue elementum mi, vitae scelerisque lacus eros id mi. Pellentesque purus erat, hendrerit eu, suscipit eu, elementum quis, quam. Sed faucibus lorem lobortis ipsum. Nulla facilisi. In et leo et erat ullamcorper iaculis. Duis aliquet ipsum quis ligula. Sed condimentum, ipsum semper tincidunt tempus, nisi nulla congue ante, ut placerat ligula est eget risus. Nam nonummy molestie tortor. Nunc dapibus, metus id adipiscing mattis, felis enim pretium risus, ac elementum nibh massa at nulla. Duis eu dui nec lacus aliquet iaculis. Fusce et odio eu pede ultricies fermentum. Morbi pulvinar vulputate odio. Vestibulum dui ante, feugiat a, sodales at, tristique eu, dolor. Phasellus est. In in neque at lectus tristique pulvinar. Pellentesque sed nulla. Aliquam fermentum, diam eu auctor eleifend, velit elit scelerisque nulla, at dignissim odio justo id metus. Duis mattis rutrum mauris. Nullam quis nulla.</p>
<p>In justo tellus, elementum ac, aliquet egestas, luctus ac, pede. Nulla facilisi. Sed et dui. Suspendisse pede. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Cras erat lectus, fermentum at, iaculis quis, blandit non, eros. Donec libero turpis, laoreet vitae, volutpat in, molestie ac, nulla. Donec tempus. Aenean eleifend cursus velit. Duis dolor ipsum, commodo a, commodo ac, faucibus vitae, quam. Integer dignissim. Curabitur non elit. Ut aliquet eros sit amet nisi.</p>
<p>Sed consequat est vitae tellus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Donec convallis, ligula sed rhoncus viverra, augue orci commodo massa, quis laoreet nulla lacus quis velit. Suspendisse a eros in massa sodales fermentum. Aliquam a augue. Sed nonummy eros eget magna dictum venenatis. Vestibulum molestie pede sit amet neque. Duis et ante ac eros mattis ultrices. Praesent placerat felis non nisl. Curabitur eleifend, purus non rhoncus lobortis, erat felis vestibulum est, at sagittis est orci ut orci. Aliquam pretium. Pellentesque eget neque. Nam sit amet tellus.</p>
<p>Integer ultricies. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin nulla metus, auctor sit amet, semper ut, ullamcorper sit amet, eros. Maecenas aliquam metus ut metus. Suspendisse sed neque vel odio dapibus iaculis. Sed semper. Nulla et pede vel sapien laoreet interdum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Vivamus neque dolor, ultrices quis, molestie commodo, tempus vel, massa. Cras nec diam eleifend libero adipiscing aliquet. Duis malesuada. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum volutpat metus ac elit imperdiet tincidunt. Mauris pellentesque nunc eget lectus.</p>
<p>Proin id nunc sit amet mi lobortis aliquet. Ut eget felis sit amet nunc viverra lacinia. Maecenas ut nulla sed metus bibendum mattis. In hac habitasse platea dictumst. Aliquam consectetuer nunc vel neque. Nullam quam nisi, semper eget, faucibus nec, vehicula quis, mi. Nunc nisi. Donec massa metus, pharetra vitae, vehicula non, eleifend at, libero. Ut ac est a nunc rutrum vestibulum. Nulla gravida. Sed suscipit luctus augue. Aliquam posuere felis. Nunc interdum, nisi a blandit scelerisque, mi nibh blandit justo, et malesuada nibh ligula id ipsum. Donec a ipsum sed nunc placerat interdum. Curabitur blandit. Suspendisse varius faucibus dolor. Cras a urna. Mauris leo. Nunc pretium, pede ut posuere cursus, sapien tellus blandit massa, id vestibulum metus est vitae tellus. Maecenas urna.</p>
<p>Pellentesque tortor. Pellentesque faucibus dui vitae mauris. Pellentesque bibendum iaculis tortor. In sem purus, eleifend in, laoreet ut, tincidunt nec, magna. Mauris gravida, diam eu tincidunt fringilla, est nisi pharetra ante, non luctus justo odio a ipsum. Maecenas eu augue. Ut iaculis. Nunc arcu nunc, elementum sed, aliquam non, laoreet sed, nisl. Pellentesque felis. Suspendisse auctor tortor ut turpis. Vestibulum tincidunt laoreet neque. Phasellus odio enim, mollis vel, varius sed, imperdiet ut, tortor. Phasellus eleifend dolor ut metus. Proin est. Phasellus placerat pede rutrum libero. Suspendisse varius erat a urna convallis porta. Integer hendrerit odio id leo. Sed porta sapien suscipit sem.</p>
<p>Quisque a lorem. Duis quis tortor. Suspendisse mattis porttitor augue. Aliquam facilisis porttitor quam. In vel metus ut quam commodo viverra. Pellentesque et mauris sit amet eros adipiscing commodo. Maecenas vitae pede vitae diam viverra vestibulum. Integer suscipit, quam sit amet hendrerit porta, velit tellus rhoncus pede, eget sollicitudin arcu felis quis leo. Sed auctor blandit ligula. Fusce accumsan viverra nibh. Aliquam erat volutpat. Quisque velit velit, sagittis et, congue at, auctor eu, quam. Sed dui ipsum, rhoncus eget, commodo at, vulputate a, metus. Donec eu mi. Sed laoreet faucibus ipsum. Donec cursus egestas turpis. Nulla facilisi. Nam et tellus.</p>
<p>Praesent sagittis ligula eget lacus dictum blandit. Nam libero pede, faucibus non, vestibulum tempus, tincidunt quis, est. Vestibulum accumsan risus. Nulla facilisi. Praesent nisi turpis, pulvinar vitae, blandit vitae, hendrerit vel, ante. Morbi viverra purus dapibus quam. Donec ligula. Cras pretium metus. Nunc ac erat. Sed elit quam, cursus sit amet, egestas eget, cursus sit amet, orci. Praesent non purus non orci sodales interdum. Fusce lobortis risus eu est.</p>
<p>Quisque arcu nisl, fringilla vel, vehicula in, bibendum nec, arcu. Nullam sit amet mi nec velit cursus rhoncus. In sed ante. Aenean nec augue. Curabitur et sem laoreet dolor blandit aliquam. Mauris sollicitudin orci nec leo. Proin magna. Suspendisse eleifend, diam vitae mattis suscipit, felis risus varius massa, ut ornare eros pede nec ligula. Proin commodo, justo et egestas ultrices, tellus elit aliquam ante, a rhoncus felis risus elementum arcu. Quisque placerat mattis arcu. Etiam auctor auctor nisl. Ut sed purus. Donec semper iaculis arcu. Maecenas nulla. Sed congue euismod nulla. Vestibulum ligula justo, venenatis at, rhoncus ac, iaculis id, nunc. Morbi sit amet augue eu ipsum fermentum facilisis.</p>
<p>Nam magna. Fusce sed ante in mauris consectetuer mattis. Mauris imperdiet nibh tincidunt elit. Praesent eget lectus quis sem egestas molestie. Suspendisse potenti. Nunc mauris quam, pharetra id, gravida vitae, sodales id, lacus. Fusce lectus. Integer mollis justo. Duis vel mi et massa porttitor dictum. Donec scelerisque leo quis nulla. Sed ante ante, feugiat eget, vulputate a, dignissim quis, elit. Nam in turpis. Morbi lacus libero, varius at, dignissim id, auctor eget, urna. Cras in mauris. Vivamus felis purus, tempus at, volutpat eget, fermentum sagittis, lacus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla facilisi.</p>
<p>Mauris mattis tincidunt erat. Maecenas aliquam mauris vel nulla. Morbi volutpat. Sed lorem mauris, interdum id, accumsan sit amet, consequat interdum, velit. Pellentesque ac est non sem posuere accumsan. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Ut vitae augue non lorem rhoncus malesuada. Phasellus viverra, leo non commodo ullamcorper, leo nibh accumsan mi, a tempus lectus lectus ac erat. Morbi ultrices mauris sit amet nunc. Donec porta nisl. Aenean tempor.</p>
</div>
<div id="fixed">[fixed footer]</div>
</body>
</html>
Might need some modification, especially to work in IE6. If I recall correctly, I had to add in some page breaks under the page content to stop the footer overlapping the content, but that aside, I think it worked fine.