I found some code I wanted to use to make a static navigation bar that stays at the top of the screen as you scroll down. That part worked out fine.
However, when I resize the browser window, at first it would wrap to the next line. So I added white-space:nowrap so it would stay on one line. But now, if I resize the window, it will just cut off the navbar at the edge of the browser window.
I would like the page to scroll right/left, not just scrollbars under the navbar. How might I do that?
Thank you in advance. This is what I'm working with: http://jsfiddle.net/TYgSx/14/embedded/result/
This is the HTML (edited to add page content):
<html>
<body>
<div id="nav">
<ul id="navigation">
<li>Home</li>
<li>Blog</li>
<li>Products</li>
<li>Downloads</li>
<li>About</li>
</ul>
</div>
<h1>Heading</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non elit turpis. Nulla non dolor non magna pellentesque iaculis a vel dolor. Nunc vel est elementum, faucibus magna ut, iaculis tellus. Praesent euismod pharetra mauris non adipiscing. Proin venenatis nunc id neque tincidunt, sit amet consectetur sapien pellentesque. Morbi sit amet tincidunt odio, eget rhoncus velit. Proin mollis luctus molestie. Suspendisse facilisis ligula sed posuere dapibus. Integer mauris risus, bibendum a lacus vel, sollicitudin varius lacus. Maecenas vitae pharetra quam, quis blandit tortor. Cras adipiscing laoreet pulvinar. Ut lacus erat, lobortis vel auctor id, ullamcorper quis nisi. In tempor lacus non urna mattis, sed suscipit nisi varius. Aliquam at turpis in justo pellentesque lacinia in vitae odio.</p>
<p>Integer fringilla eros quis risus rhoncus tempus. Nunc aliquet magna blandit turpis suscipit lacinia. Aenean laoreet varius velit a aliquam. Proin tincidunt dolor et velit egestas semper. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pretium sodales ornare. Sed at tellus sit amet libero imperdiet dapibus. Fusce ultricies enim sit amet neque sodales porttitor.</p>
<p>Duis dignissim massa id ultrices consequat. Phasellus libero est, posuere quis orci non, lobortis sodales nisl. Maecenas fermentum, nisl at elementum lobortis, nisi dui dictum risus, pharetra aliquet ante elit non justo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec porttitor pellentesque libero id volutpat. Aenean tempus sapien nunc, quis hendrerit lectus gravida volutpat. Suspendisse potenti. Pellentesque posuere diam in pulvinar ultrices.</p>
<p>Donec vitae diam erat. Aenean volutpat fringilla hendrerit. Sed quis ornare erat. Vivamus sit amet augue lacinia, rhoncus erat a, ultrices eros. Proin eget facilisis tellus. Sed eleifend porttitor orci vitae aliquet. Aliquam aliquam tristique nisl vitae laoreet. Morbi ac luctus ipsum, a molestie nulla. Vivamus at erat at dui fermentum vestibulum. Pellentesque vulputate in lacus eget ultrices. In imperdiet nisl non vehicula congue. Maecenas mattis semper enim. Duis consectetur sapien ac enim pellentesque mattis. Phasellus molestie vitae ipsum nec facilisis.</p>
<p>Integer lobortis a felis non pellentesque. In sit amet sagittis lacus, vel aliquam urna. Phasellus sodales erat quis ante aliquam interdum. Ut vitae dolor diam. Nullam nisi felis, euismod ac nunc eget, fringilla pretium nisi. Proin commodo vestibulum elit eget luctus. Pellentesque nisi felis, congue in sem in, elementum ultricies metus. Vivamus mollis nisi non ante imperdiet, nec posuere dui aliquam. Ut rhoncus risus in malesuada accumsan. In vestibulum auctor diam, sit amet vestibulum mauris. Praesent eu nibh lorem. Suspendisse turpis libero, sollicitudin vitae lacinia et, volutpat et tortor. Aliquam vitae ultrices ante. Ut commodo vitae est sit amet bibendum.</p>
</body>
</html>
CSS (added top-margin of 80px to page content):
#nav
{
background-color:#262626;
width:100%;
height:50px;
box-shadow: 0px 1px 50px #5E5E5E;
position:fixed;
top:0px;
left:0px;
white-space:nowrap;
}
#navigation
{
list-style-type:none;
}
li
{
display:inline;
padding:10px;
}
#nav a
{
font-family:verdana;
text-decoration:none;
color:#EDEDED;
}
#nav a:hover
{
color:#BDBDBD;
}
h1
{
margin-top:80px;
}
body
{
min-width:800px
}
You need to add overflow and set it to auto in your css.
#nav {
background-color:#262626;
width:100%;
height:50px;
box-shadow: 0px 1px 50px #5E5E5E;
position:fixed;
**overflow: auto;**
top:0px;
left:0px;
white-space:nowrap;
}
You need to be specific to the overflow that you want to scroll, in this case you want overflow-y:auto;
Related
I am working on styling for a print page. What I would like to do is have a footer on every printed page, with a specified height. I am achieving this by using position:fixed; unfortunately this causes the footer to cover some of the page content. I have tried adding bottom margin/padding for #page but when I use margin, it pushes the footer up and when I use padding it doesn't seem to have any effect.
.container {
font-size:45px;
}
.print-footer {
display:none;
height:60px;
background:#fff;
width:100%;
position:fixed;
bottom:0;
}
#page {
size:8.5in 11in;
margin:0;
/*margin:0 0 60px 0;*/ /* this pushes the print-footer element up */
padding-bottom:60px; /* this doesn't seem to have an effet */
orphans:5;
widows:5;
}
#media print {
.print-footer {
display:block;
}
}
<div class="container">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus lobortis convallis risus vel egestas. Pellentesque augue felis, molestie ac mollis id, aliquam id mi. Mauris bibendum enim elit, eget porttitor dolor pretium vel. Phasellus lorem sapien, sollicitudin a pellentesque vitae, venenatis eu metus. Aliquam porttitor molestie vehicula. In maximus massa tellus, ut pulvinar velit viverra et. Pellentesque ornare lobortis efficitur. Quisque viverra tellus libero. Morbi ullamcorper neque est. Suspendisse consectetur metus consectetur dolor volutpat commodo. Vestibulum tempus nisl eu congue imperdiet. Suspendisse id sapien vitae nibh sodales tristique. Nam porttitor arcu non nisl aliquet, sit amet vulputate diam vehicula. Sed quis arcu vel dolor egestas volutpat laoreet sagittis urna.</p>
<p>Suspendisse quis mi nec diam faucibus feugiat et sed ipsum. Fusce tempus arcu vitae felis tempor porta. Quisque at purus sed lorem lacinia aliquet sed interdum est. Proin a lacus a neque tincidunt auctor. Maecenas interdum tempus lorem nec viverra. Integer sollicitudin diam vel risus feugiat, ac sagittis nisi ullamcorper. Aliquam non fermentum ex. Aliquam suscipit odio dolor, aliquet commodo est rhoncus a. Duis vestibulum lacinia dolor non fermentum. Morbi pulvinar in orci quis mollis.</p>
<p>Maecenas vitae risus diam. Morbi sed arcu bibendum, tempus mi vel, elementum mauris. Mauris ut vestibulum magna. Fusce ultrices erat quis rutrum consequat. Quisque lobortis orci at placerat efficitur. Pellentesque sollicitudin tellus a felis rhoncus porttitor. Maecenas tempor massa vitae dolor tempus ultrices.</p>
<p>Sed euismod facilisis auctor. Phasellus non ligula convallis, ullamcorper purus in, lobortis dolor. Sed quis pulvinar arcu. Nunc eget ultricies tortor. Quisque tincidunt sapien at leo venenatis, et dictum eros condimentum. Praesent in arcu tortor. Integer non nulla id risus rutrum molestie. Sed quam dolor, mollis non consequat vel, elementum a sem. Pellentesque consequat pulvinar tempus. Morbi vel turpis semper, lacinia orci sodales, auctor erat.</p>
<p>Praesent non mauris risus. Nullam vel urna eleifend mi sollicitudin facilisis ut vel sapien. Cras cursus, massa sed feugiat consequat, orci ex feugiat elit, vitae rutrum neque dolor a nibh. Aenean pellentesque tempor nunc in viverra. Curabitur fermentum, ante ut iaculis semper, libero elit vehicula orci, non elementum elit eros nec diam. Nullam vel sodales purus. Donec non ex accumsan, consequat orci ut, ultrices massa. Etiam sagittis porta maximus. Aenean egestas nisl eu ultricies tempor. Pellentesque id dictum elit. Fusce euismod mi non tortor lacinia dapibus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
</div>
<div class="print-footer">Print page footer content goes here </div>
As you can see in the result form the code above, the footer is cutting off content:
i want to create footer like footer on elementaryos.org
i don't know what css code that make the footer below the page container and will be unveiled when we scroll it down.
<!doctype html>
<html lang="en">
<head>
<title>Test page</title>
<style type="text/css">
body{
margin: 0px;
padding: 0px;
}
nav{
background-color: yellow;
width: 100%;
position: fixed;
z-index: 2;
height: 70px;
}
.container{
padding-top: 80px;
width: 100%;
background-color: #dadada;
position: relative;
z-index: 1;
line-height: 3em;
}
footer{
background-color: #bababa;
height: 200px;
width: 100%;
position: relative;
z-index: 0;
}
</style>
</head>
<body>
<nav>
<h1>Navigation</h1>
</nav>
<div class="container">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed elementum enim odio, vel placerat dui aliquam sed. Vivamus rhoncus massa commodo nulla scelerisque accumsan. Nunc ac ligula velit. Mauris eu pharetra turpis, eget fermentum lectus. Maecenas ornare sem vel nisi accumsan, at placerat libero vulputate. Pellentesque sit amet neque ac est dapibus faucibus. Morbi pellentesque, dolor ut elementum mattis, lectus nunc auctor nulla, vel lobortis quam ante eu neque.
Mauris sed ligula in lorem rhoncus volutpat. Ut pulvinar dolor id bibendum mollis. Morbi eu facilisis risus. Nullam quis eros elit. Donec quis facilisis dui. Duis hendrerit, lectus id ultrices tincidunt, urna tellus convallis quam, eget vehicula ipsum arcu vitae nulla. Etiam tristique varius enim nec volutpat. Fusce non odio nec massa placerat aliquam id eu ligula. Nam nulla urna, iaculis sit amet nisi non, auctor congue magna. Suspendisse potenti. Duis vehicula consectetur feugiat.
Quisque ut luctus diam. Aliquam quis blandit eros. Vestibulum dolor velit, egestas non vehicula et, viverra in lacus. Donec luctus id libero at tincidunt. Donec in euismod tortor, id fermentum mi. Phasellus leo dui, placerat sed enim elementum, aliquet convallis mauris. Duis cursus mauris vehicula tortor auctor faucibus. Praesent euismod enim eget luctus facilisis. Donec condimentum, neque id convallis consectetur, lorem ipsum gravida nisl, vel fermentum lectus diam at magna. Aenean in urna sagittis, condimentum magna nec, egestas neque. Nulla gravida neque massa.
Nulla consequat, quam at fringilla mollis, nunc magna dapibus eros, ut ultrices sapien mauris eu libero. Duis sollicitudin orci posuere est vulputate, eu vestibulum mi vestibulum. Etiam eu elementum nisi, consectetur accumsan turpis. Sed dignissim sapien et posuere interdum. In adipiscing gravida enim vestibulum suscipit. Aliquam aliquet sem et dapibus mollis. Praesent quis lorem augue. Donec facilisis justo vel est pharetra, eget rhoncus magna ultricies. Suspendisse ac justo quis dui accumsan dignissim at non sapien. Cras vitae ultrices justo, quis venenatis nibh. Sed vestibulum adipiscing enim non volutpat. Duis ac euismod sapien. Pellentesque sit amet ornare velit. Duis venenatis tempus facilisis.
Sed sem lectus, mattis ut nunc sit amet, dictum sollicitudin sapien. Integer vitae ornare tellus. Vestibulum et cursus urna, vel aliquet mi. Duis lacinia tincidunt lorem. Cras sem felis, bibendum eu lorem luctus, dictum imperdiet augue. Quisque eleifend lectus pellentesque arcu faucibus tempus. Etiam sollicitudin in est eu lacinia. Curabitur faucibus in neque et imperdiet. Mauris libero enim, suscipit sit amet odio eget, molestie ornare ligula. Nam a lorem convallis, ornare nibh id, viverra tellus.
</div>
<footer>
Page footer
</footer>
</body>
</html>
here is the demo. Thanks a lot.
There you go: http://jsfiddle.net/8cxvr/2/
It's pretty simple, just give the footer a fixed position (= relative to window) and the container gets some margin on the bottom.
Relevant changes:
.footer {
position: fixed;
bottom: 0;
}
.container {
margin-bottom: 200px; /* footer-height */
}
To start, that is a horrible effect, please don't do that.
For a complete answer though, what they did is fixed the footer with positioning at the bottom of the page, and then gave it a lower z-index. So it's always at the position. Once you scroll past the content, the it comes into view. You can use a tool like IE Developer tools, or Firebug (for Firefox) to look at how they worked the code.
I'm trying to create a sidebar that rests next to the content div but it sits below the content div, it's at the right x position just not the right y.
HTML:
<body>
<div id="framediv">
<div id="headerdiv">
</div>
<div id="content" class="container">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent fringilla adipiscing velit, a pharetra sem dictum vel. Aliquam varius porta est, vitae pulvinar nunc adipiscing in. Maecenas sem eros, gravida nec blandit vel, aliquam at dui. Aliquam ante est, lacinia id laoreet ac, convallis ac magna. Maecenas rhoncus ligula vitae mauris volutpat sed dapibus lectus fringilla. Nam orci metus, molestie eu placerat sit amet, faucibus in libero. Nunc tristique, elit vitae tincidunt rutrum, odio erat blandit nibh, eu facilisis sapien dolor rhoncus risus. Ut eu velit lectus. Sed vitae nisl orci. Nulla vel nisl ante. Donec sit amet nulla eget massa euismod ultrices vitae at nisi. Donec tempor justo auctor libero dapibus viverra. Cras commodo fermentum nisi. Maecenas porttitor euismod metus lacinia sodales. Aliquam egestas ligula purus, id sollicitudin risus. Nullam vel odio et libero viverra blandit vel et dolor.
Nullam mauris dui, consequat a placerat eu, semper non mi. Nam in leo vel lorem adipiscing commodo. Duis vestibulum erat vel felis tincidunt in congue ipsum rutrum. Sed in ipsum ligula. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris pharetra nisi eget arcu malesuada at dapibus elit varius. Morbi sodales, justo fermentum lobortis elementum, orci turpis vehicula nisl, quis laoreet sapien libero a leo. Aenean ac arcu augue, vitae pellentesque ipsum. Ut nec mauris at nisl luctus tempor a sed turpis. Pellentesque in odio libero, sit amet tincidunt nisl. Duis dictum tortor vitae sem sagittis in molestie nisl interdum. Maecenas mollis adipiscing augue, eget accumsan justo ultrices a. Suspendisse scelerisque justo et nisl consectetur a varius lacus sodales. Duis accumsan iaculis nulla, non pretium metus venenatis et. Sed gravida elementum ipsum sed aliquet.
Vestibulum tincidunt pulvinar aliquet. Nullam bibendum vulputate diam quis mattis. Etiam mollis dui eu quam feugiat pharetra. Donec non tempus eros. Fusce eleifend magna eu lorem imperdiet bibendum rhoncus eget odio. Etiam adipiscing nibh sit amet augue elementum tempus. Etiam hendrerit massa a augue laoreet vitae pretium enim aliquet. Mauris malesuada lorem vitae neque pretium convallis. Sed condimentum semper ipsum, consectetur imperdiet eros interdum eu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec adipiscing nisi in erat feugiat tempor. Nunc tincidunt neque non nisl tristique quis ornare elit ornare.
Praesent nec augue ligula, quis iaculis diam. Nam eget felis est, eget pellentesque lectus. Ut suscipit varius magna, ac vestibulum risus egestas ac. Quisque id sapien sed leo luctus faucibus in non leo. Integer sit amet pellentesque velit. Vivamus convallis, lacus nec tincidunt viverra, nunc velit aliquam nisi, eu pretium tellus nisl eget eros. Etiam dolor leo, feugiat vel faucibus ac, ullamcorper quis turpis. Mauris nec felis elit. Donec dignissim ullamcorper arcu. Proin tempor, dui vel malesuada viverra, lacus mauris ullamcorper lacus, eu convallis dolor justo non massa. Maecenas volutpat, leo gravida eleifend pharetra, dolor mauris tempor odio, quis facilisis tellus nisl quis sapien. Donec quam mauris, malesuada id iaculis ut, pellentesque non mauris. Nullam interdum justo id nunc tempor sed consequat quam venenatis.
Curabitur ipsum augue, posuere at adipiscing nec, rutrum in nisi. Ut mattis placerat est aliquam vulputate. Nullam faucibus, libero in facilisis auctor, lectus metus suscipit ligula, quis sollicitudin ligula erat sit amet nisi. Suspendisse et suscipit lectus. Sed fermentum porta lorem, vel congue tortor sollicitudin molestie. Nulla imperdiet purus non velit ornare vestibulum id at massa. Curabitur lorem urna, fermentum ut suscipit sed, pretium sed ante. Nullam ligula ante, aliquam at blandit ac, aliquam in velit. Cras nisl libero, iaculis at rutrum ac, mollis nec tortor. Aenean dignissim viverra molestie. Vivamus ultricies sem purus, tempor pharetra elit. Sed placerat est at turpis eleifend accumsan. Cras metus ante, imperdiet et suscipit ut, interdum eget est. In rutrum imperdiet mi in consectetur.
</div>
<div id="sidebar" align="center" class="container">
<p>dvsdvs</p>
</div>
</div>
</body>
CSS:
#menudiv{
display:inline-block;
float:none;
padding-bottom:20px;
}
#html, body {
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
width:980px;
height: 100%;
margin: auto;
}
#headerdiv{
width:950px;
-webkit-box-shadow:10px 10px 20px #000;
-moz-box-shadow:10px 10px 20px #000;
}
#content.container{
height:100%;
width: 640px;
padding-top:50;
margin-top:50;
padding-left: 10px;
padding-right: 10px;
padding-left: 10px;
padding-bottom: 10px;
border:thin;
border-color:#CCC;
border-style:solid;
-webkit-box-shadow:10px 10px 20px #000;
-moz-box-shadow:10px 10px 20px #000;
}
#sidebar{
position:absolute
float:left;
float:right;
top:250px;
height:100%;
width: 280px;
border:thin;
border-color:#CCC;
border-style:solid;
-webkit-box-shadow:10px 10px 20px #000;
-moz-box-shadow:10px 10px 20px #000;
}
Here #html, body you don't need the '#' in front of html. On #sidebar you have
float:left;
float:right;
... don't think you any of it since you're positioning it absolute.
JSFiddle would be helpful as well.
Wrap your content with DIV
<div id="content" class="container">
<div id="maincontent">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent fringilla adipiscing
velit, a pharetr
</div>
<div id="sidebar" align="center" class="container">
<p>dvsdvs</p>
</div>
</div>
.container#maincontent {float:left: width:75%} //75% minus paddings minus margins minus borders
.container#sidebar {float:right; width:25%} //25% minus paddings minus margins minus borders
Your question seems a bit contradictory... as does a bit of your code.
If you simply want the sidebar to fall along the right side of the content div, then you could move your sidebar div, in the code, above the content div and assign it a "float: right".
If by "but it sits below the content div" you're referring to the code as opposed to the visual layout, then you can float the content div to the left and remove float on the sidebar (or float: right).
I also noticed that in your #sidebar css you're declaring conflicting floats for both left AND right.
Include float in your container as well.
I asked this question which worked great for making text (top links) forced to the right after scrolling.
The issue is one on the page, when I scroll vertically, the top links stay on the top of the page even when I scroll down so they show above my main content.
What is a way to force text to be forced to the right but don't move when I scroll vertically?
Here is my CSS today:
#toplinks ul
{
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:transparent none repeat scroll 0 0;
border:medium none;
color:#2F6FAB;
cursor:default;
line-height:1.4em;
list-style-image:none;
list-style-position:outside;
list-style-type:none;
margin:0;
padding:0 1em 0 1em;
text-align:right;
z-index:0;
font-size: 85%;
position:fixed;
right:0;
}
I think you want something like this. Correct me if I am wrong. I edited ptriek's code and fixed it so that the sticky thing doesn't move if the page is vertically scrolled but moves with the page keeping its position fixed if the page is horizontally scrolled.
The CSS code is the same:
#sticky
{
background:red;
position: fixed;
top: 0px;
right: 0px;
width: 206px;
padding: 0;
font-size: 0.6875em;
}
p {
width:1000px;
}
But the JavaScript code is slightly modified:
$(window).scroll(function(event) {
$("#sticky").css("margin-top", 0-$(document).scrollTop());
});
Alternately, this can be done without JavaScript as Aaron has suggested. You can see the effect here.
I hope it works.
You can use z-index to make your relatively-positioned content overlay your fixed content when scrolled, as per this example: http://jsfiddle.net/R4jEj/.
You'll need a combination of CSS + jQuery to achieve this. My answer was inspired by this question, which does the exact oposite.
http://jsfiddle.net/hEvSu/
The JS:
$(document).ready(function () {
var o = $("#sticky").offset();
s = o.left;
});
$(window).scroll(function () {
$("#sticky").offset({ left: s - $(window).scrollLeft() });
});
The CSS:
#sticky {
background:red;
position: fixed;
bottom: 35px;
right: 0px;
width: 206px;
}
p {
width:1000px;
}
May be for that page you can define position:absolute instead of position:fixed.
Like this:
#fixed {
position: absolute;
height: 20px;
padding: 5px;
background-color: #333;
color: #fff;
right: 0;
top:0;
}
#container {
margin-top: 30px;
padding: 5px;
}
http://jsfiddle.net/R4jEj/2/
Try this
<div id="header">
<div id="right">
<div class="link">test</div>
</div>
<div id="container">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam erat nulla, rhoncus vel vestibulum a, adipiscing et eros. Curabitur nibh est, mattis ac euismod quis, dapibus vitae mauris. Nam scelerisque augue sit amet justo vulputate laoreet. Nulla eu est metus. Nulla tristique, lorem sit amet lobortis sodales, purus felis congue mi, id auctor ligula urna ac massa. Praesent venenatis vulputate porttitor. Fusce eget justo dolor. Praesent vel ipsum id metus bibendum porta. Nunc gravida, tortor non tincidunt posuere, ante turpis bibendum nulla, sed ultricies sem felis et arcu. Maecenas faucibus lectus sed nibh tincidunt sed vulputate massa tristique. Curabitur pulvinar, ante a luctus ornare, ipsum massa faucibus tellus, et faucibus odio orci sed arcu. Suspendisse tincidunt rutrum lorem malesuada viverra. Duis eleifend lobortis augue, ut gravida odio scelerisque ac. Phasellus bibendum hendrerit eros, nec adipiscing neque dignissim ut.
<br/><br/>
Praesent dictum hendrerit felis quis porttitor. Duis at tortor eu nibh cursus pretium in vitae libero. Maecenas pellentesque orci non urna facilisis id interdum massa aliquet. Etiam dictum, orci non egestas eleifend, nulla tortor tristique turpis, ut porttitor elit ante in est. Ut pretium urna at lacus auctor convallis. Curabitur mi risus, euismod nec pharetra et, viverra dictum justo. Phasellus accumsan luctus libero, nec sollicitudin augue tristique non. Vivamus vulputate metus quis arcu varius ac aliquet libero elementum. Suspendisse consequat feugiat lacus ut pellentesque.
<br/><br/>
Proin lacus lorem, rhoncus sit amet tincidunt semper, convallis eu quam. Sed bibendum rutrum velit, imperdiet ultrices odio condimentum a. Donec ac justo turpis, quis laoreet massa. Phasellus eu massa nisl, et laoreet quam. Suspendisse potenti. Maecenas odio risus, euismod interdum egestas vel, interdum non diam. Nunc luctus adipiscing orci pulvinar gravida. Quisque dapibus enim in mauris imperdiet vel vehicula lorem imperdiet. Aenean vel ligula libero. Maecenas sit amet tortor eu dolor rutrum hendrerit at a orci. Aliquam erat volutpat. Vestibulum eu vehicula est. Vestibulum non metus quam, eu molestie magna. Duis venenatis malesuada tincidunt.
<br/><br/>
Nam sed metus lacus. Sed ac sapien tellus. Maecenas eleifend sodales diam sit amet aliquam. Quisque libero justo, egestas at scelerisque nec, dictum et libero. Quisque sollicitudin, dui sed lobortis viverra, risus ante condimentum urna, hendrerit varius augue tellus non purus. Maecenas id erat lorem, vel mattis mauris. Morbi sed elit ut metus laoreet congue. Phasellus ac urna diam. Duis faucibus varius magna, eu lacinia nisl tempor id. Ut facilisis quam et augue consectetur at vestibulum risus imperdiet. Curabitur sed tellus ante, et ultrices diam. Duis sem leo, venenatis quis ornare in, viverra et enim.
<br/><br/>
Proin mattis molestie molestie. Suspendisse potenti. Nam luctus, urna in laoreet volutpat, nisi orci mattis nisl, sed pretium massa ligula sit amet elit. Nam quis tellus mi. Donec hendrerit justo sit amet est aliquet adipiscing. Fusce et urna eros. Nulla non magna arcu, sed tristique eros. Nunc id velit felis. Praesent nec lorem purus. Cras a sapien ipsum. Sed placerat suscipit leo vitae mollis. Nam sit amet ligula nisl, ac egestas ante. Maecenas libero est, porttitor in molestie vitae, auctor sit amet orci. Maecenas fermentum molestie tellus, quis facilisis est mattis et. Vestibulum ligula metus, iaculis vitae posuere at, mollis a eros.
<br/><br/>
Proin mattis molestie molestie. Suspendisse potenti. Nam luctus, urna in laoreet volutpat, nisi orci mattis nisl, sed pretium massa ligula sit amet elit. Nam quis tellus mi. Donec hendrerit justo sit amet est aliquet adipiscing. Fusce et urna eros. Nulla non magna arcu, sed tristique eros. Nunc id velit felis. Praesent nec lorem purus. Cras a sapien ipsum. Sed placerat suscipit leo vitae mollis. Nam sit amet ligula nisl, ac egestas ante. Maecenas libero est, porttitor in molestie vitae, auctor sit amet orci. Maecenas fermentum molestie tellus, quis facilisis est mattis et. Vestibulum ligula metus, iaculis vitae posuere at, mollis a eros.
<br/><br/>
Proin mattis molestie molestie. Suspendisse potenti. Nam luctus, urna in laoreet volutpat, nisi orci mattis nisl, sed pretium massa ligula sit amet elit. Nam quis tellus mi. Donec hendrerit justo sit amet est aliquet adipiscing. Fusce et urna eros. Nulla non magna arcu, sed tristique eros. Nunc id velit felis. Praesent nec lorem purus. Cras a sapien ipsum. Sed placerat suscipit leo vitae mollis. Nam sit amet ligula nisl, ac egestas ante. Maecenas libero est, porttitor in molestie vitae, auctor sit amet orci. Maecenas fermentum molestie tellus, quis facilisis est mattis et. Vestibulum ligula metus, iaculis vitae posuere at, mollis a eros.
<br/><br/>
Proin mattis molestie molestie. Suspendisse potenti. Nam luctus, urna in laoreet volutpat, nisi orci mattis nisl, sed pretium massa ligula sit amet elit. Nam quis tellus mi. Donec hendrerit justo sit amet est aliquet adipiscing. Fusce et urna eros. Nulla non magna arcu, sed tristique eros. Nunc id velit felis. Praesent nec lorem purus. Cras a sapien ipsum. Sed placerat suscipit leo vitae mollis. Nam sit amet ligula nisl, ac egestas ante. Maecenas libero est, porttitor in molestie vitae, auctor sit amet orci. Maecenas fermentum molestie tellus, quis facilisis est mattis et. Vestibulum ligula metus, iaculis vitae posuere at, mollis a eros.
<br/><br/>
Proin mattis molestie molestie. Suspendisse potenti. Nam luctus, urna in laoreet volutpat, nisi orci mattis nisl, sed pretium massa ligula sit amet elit. Nam quis tellus mi. Donec hendrerit justo sit amet est aliquet adipiscing. Fusce et urna eros. Nulla non magna arcu, sed tristique eros. Nunc id velit felis. Praesent nec lorem purus. Cras a sapien ipsum. Sed placerat suscipit leo vitae mollis. Nam sit amet ligula nisl, ac egestas ante. Maecenas libero est, porttitor in molestie vitae, auctor sit amet orci. Maecenas fermentum molestie tellus, quis facilisis est mattis et. Vestibulum ligula metus, iaculis vitae posuere at, mollis a eros.
<br/><br/>
Proin mattis molestie molestie. Suspendisse potenti. Nam luctus, urna in laoreet volutpat, nisi orci mattis nisl, sed pretium massa ligula sit amet elit. Nam quis tellus mi. Donec hendrerit justo sit amet est aliquet adipiscing. Fusce et urna eros. Nulla non magna arcu, sed tristique eros. Nunc id velit felis. Praesent nec lorem purus. Cras a sapien ipsum. Sed placerat suscipit leo vitae mollis. Nam sit amet ligula nisl, ac egestas ante. Maecenas libero est, porttitor in molestie vitae, auctor sit amet orci. Maecenas fermentum molestie tellus, quis facilisis est mattis et. Vestibulum ligula metus, iaculis vitae posuere at, mollis a eros.
<br/><br/>
Proin mattis molestie molestie. Suspendisse potenti. Nam luctus, urna in laoreet volutpat, nisi orci mattis nisl, sed pretium massa ligula sit amet elit. Nam quis tellus mi. Donec hendrerit justo sit amet est aliquet adipiscing. Fusce et urna eros. Nulla non magna arcu, sed tristique eros. Nunc id velit felis. Praesent nec lorem purus. Cras a sapien ipsum. Sed placerat suscipit leo vitae mollis. Nam sit amet ligula nisl, ac egestas ante. Maecenas libero est, porttitor in molestie vitae, auctor sit amet orci. Maecenas fermentum molestie tellus, quis facilisis est mattis et. Vestibulum ligula metus, iaculis vitae posuere at, mollis a eros.
</div>
CSS
#header{ border: 1px solid black;background-color: #888888;
height: 30px;
position: fixed;
top: 0;
width: 100%;}
#right{position:relative;right:0;}
#container{margin-top:40px; width: 2000px;}
.link{ border: 1px solid red;
color: yellow;
font-weight: bold;
padding: 1px;
position: absolute;
right: 3px;
top: 3px}
check this code at fiddle also
http://jsfiddle.net/2MZwr/14/
Let me know if this is not fix your problem.
I think you should use position: absolute instead of fixed. Note that the positioning will be relative to the first element that you have given a position:relative. So you could write:
body { position: relative; }
ul { position: absolute;
top: 20px;
right: 0px;
/* if you want the content to overlap everything, you should set the z-index */
z-index: 1;
}
The reason that your first try with absolute positioning didn't work out is probably because you didn't set a relative element, in wich case it will be relative to the browser window. So if you scroll, the links will move;)
If you can alter the HTML a bit, you can achieve the desired effect by simply putting the top links in the first root-level div, and everything else in the second root-level div.
<html>
<head>
<style type="text/css">
#foo{position: absolute; height: 20px; border:2px solid red; background: gray; top:0; right: 0;}
#bar{overflow:auto; width:100%; margin-top:24px;}
</style>
</head>
<body>
<div id="foo">Links Links Links Links Links Links Links Links Links Links Links Links</div>
<div id="bar"><img alt="The rest of the page goes here" src="https://www.google.com/images/nav_logo99.png" width="2000"></div>
</body>
</html>
Simple answer: *"To not make it move around when scrolling, you need to define the vertical position. FIXED expects both horizontal as well as vertical positioning. So you have the option to go
position:fixed;
right:0;
top:0;
or
position:fixed;
right:0;
bottom:0;
Then, you'll need z-index to make sure that - when things start overlapping - the correct div/layer/whatever is the topmost and therefore the visible one, hiding the lower z-index underneath it.
An alternative layout option...
... would be to give the parent container/element a
position:relative;
and then position the child elements as you like using
position:absolute;
top:0;
left:0;
or whatever position you want to give them.
I need the red box to expand with the blue box content, so they are always both the same size.
The red box is defined as:
.leftMenu{
float:left;
width:20%;
background-image:url(../images/leftMenuBG.jpg);
background-position:bottom;
background-color:#BFDAE3;
background-repeat:repeat-x;
}
Can't seem to get it to work, whatever I try! Any ideas? Thanks!
Simple solution: Use tables.
Semantic solution: Use faux columns.
You will need to wrap the red div around the blue div, so have the blue divs inside, floated right, and then have a clearing div after the blue divs.
<div style="border:solid red 2px;">
<div style="border:solid blue 2px;float:right;width:200px;">
<p>Content here</p>
</div>
<div style="clear:both;"></div>
</div>
Excuse the use of inline styles, these should be in a style sheet.
If you need each div to sit independently of each other and don't mind using JavaScript (as this is only a presentational layer) try this method.
You can use a jQuery plugin for that too. (for example, http://www.cssnewbie.com/equal-height-columns-with-jquery/)
But the Semantic solution: Use faux columns. from Magnar is nice too and doesn't require Javascript.
An additional 'faux column'-method is to (ab)use positioning.
Place both boxes inside a container that's floated (which makes it expand to accomodate floated children) and positioned relatively (which allows us to position child elements inside it).
Then, position the shortest column absolutely, and float the longest column. The container will take on the height of the floated child, and the div with position:absolute will take that height again.
A short example:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head><title>Columns</title>
<style type="text/css">
html, body {
width: 100%;
}
#container {
width: 100%;
float: left;
position: relative;
border: 2px solid black;
}
#left-box {
position: absolute;
width: 40%;
border: 2px solid red;
background-color: #5555ee;
height: 100%;
}
#right-box {
float: right;
margin-right: 15%;
width: 40%;
border: 2px solid blue;
background-color: #3e3e3e;
}
</style>
</head>
<body>
<div id="container">
<div id="left-box">
- E - x - P - a - N - d - I - n - G -
</div>
<div id="right-box">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed mattis eros ut sem sollicitudin ultricies. Vivamus pharetra, urna sit amet auctor mollis, risus sem ultrices quam, non condimentum enim leo sit amet tellus. Pellentesque id vehicula nisl. Nulla ut commodo ligula. Sed sit amet ligula purus, at suscipit leo. Nulla quis nulla id est aliquet vehicula. Suspendisse consectetur, nunc in hendrerit dignissim, nisl massa viverra quam, et faucibus augue lorem eu mi. Vestibulum commodo luctus ante, vel placerat metus ullamcorper vel. Sed id imperdiet orci. In hac habitasse platea dictumst. Praesent ac dui orci, vitae pharetra dolor.
</p>
<p>
Aenean enim metus, placerat at hendrerit in, hendrerit in velit. Cras tincidunt blandit sapien, a aliquet elit sollicitudin vitae. Quisque at ligula sem. In hac habitasse platea dictumst. Ut eu magna ipsum, id fringilla massa. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vivamus consequat metus sed lectus dignissim posuere quis a felis. Mauris in consectetur arcu. Nullam fermentum adipiscing dignissim. Sed quis orci in magna viverra sollicitudin. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Maecenas condimentum lectus pretium tortor porta a hendrerit dui pharetra. Etiam est justo, bibendum vehicula vestibulum ac, mattis ut risus. Praesent dapibus nibh id enim vestibulum porta. Donec aliquam urna a diam varius blandit. Nulla interdum ante at arcu vehicula sagittis. Curabitur quam sapien, luctus ac sagittis vitae, tristique a odio. Nulla consequat gravida urna, at bibendum nisl ultricies ac.
</p>
<p>
Vivamus quis metus porta purus aliquet aliquet. Morbi sollicitudin orci ut ligula vehicula sollicitudin. Etiam sed lacus eget leo molestie ullamcorper sit amet ac urna. Cras vitae turpis in sapien dignissim molestie. Curabitur tellus purus, dignissim at adipiscing in, faucibus ac tortor. Duis vitae metus ac urna cursus consequat eget vel quam. Integer bibendum mauris enim, sit amet blandit sapien. Nam in lectus ante. Curabitur lacinia erat sit amet lectus malesuada facilisis. Phasellus et pellentesque enim. Fusce eget tristique est. Suspendisse id dui eu lorem congue tincidunt. Cras libero lectus, placerat eget tristique a, gravida vitae lorem. Sed nec venenatis sapien. Suspendisse tempus orci ut odio venenatis et cursus sem faucibus. Mauris commodo ultricies dictum. Curabitur iaculis, ligula sit amet lobortis hendrerit, eros orci elementum nisi, cursus lacinia nunc felis vitae erat. Donec id elementum ipsum.
</p>
<p>
Mauris id mi sed augue egestas vestibulum non a ipsum. Ut arcu purus, consequat in tincidunt in, pretium a dui. Cras in quam tellus, non ultricies nisi. Sed leo orci, gravida et luctus sed, eleifend quis odio. Praesent cursus feugiat neque, tincidunt malesuada libero egestas sit amet. Etiam nisi nisi, faucibus vitae accumsan sed, gravida ut lacus. Suspendisse hendrerit fringilla interdum. Cras fermentum nibh non eros gravida pretium et a sem. Sed non nisl dui, non commodo arcu. Donec nec massa mi, vel auctor odio. Curabitur sagittis velit id felis egestas iaculis. Nunc pharetra magna eu metus malesuada ut porta mi suscipit. Aenean vitae elit sit amet neque pellentesque malesuada. Aliquam eu nulla consectetur est adipiscing vulputate non a odio. Sed consectetur neque eros. Nulla fermentum vehicula vestibulum. Aenean eleifend, nisi eget porta accumsan, tellus orci tincidunt metus, volutpat lobortis quam augue commodo tellus. Aenean consectetur pretium vestibulum. Pellentesque a scelerisque sem. Cras pellentesque tortor euismod magna viverra mollis.
</p>
<p>
Mauris dignissim sodales placerat. Sed id interdum erat. Nunc sagittis, nunc in auctor ullamcorper, nisi dolor commodo sem, sit amet aliquam diam dolor posuere est. Ut vestibulum elit ut urna imperdiet non tincidunt sapien euismod. Fusce ut sem erat, aliquam accumsan metus. Proin sed velit nec velit laoreet dignissim at sit amet ante. Pellentesque ac dolor non nulla dapibus lacinia. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Suspendisse non nisl diam. Sed et ligula sed libero porttitor semper eget eu elit. Phasellus quis massa dolor. Phasellus ac justo ac diam ultrices iaculis quis at odio. Fusce eget nisi nunc. Cras cursus, dui eget mattis rutrum, arcu dolor sollicitudin nibh, eu congue augue quam ut leo. Praesent in est nulla, eu ullamcorper enim. Nullam in adipiscing ligula.
</p>
</div>
</div>
</body>