A slight twist on the common question of sticking a div to the bottom of a parent div. In this case I want the stuck div to STAY stuck even when it's parent is scrolled, and to be on top of the text that scrolls underneath. What's the trick? jsfiddle here: http://jsfiddle.net/forgetcolor/vYjMv/1/. code repeated below:
<!doctype html>
<html>
<head>
<style type="text/css">
#wrapper {
width:300px;
height:300px;
background-color:#eee;
position:relative;
overflow:auto;
}
.bot {
border:1px solid #ddd;
display:inline;
position:absolute;
bottom:0;
right:0;
color:blue;
}
</style>
<title>tst</title>
</head>
<body>
<div id="wrapper">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sed tempor nibh. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec molestie tortor non nisi accumsan placerat. Morbi elit risus, venenatis et sodales congue, tristique vel ligula. Maecenas convallis arcu turpis. Praesent nibh leo, blandit ut posuere et, aliquet at sapien. Ut placerat, libero id faucibus pellentesque, leo nulla consectetur ligula, quis malesuada sapien nulla id diam. Nullam turpis nisl, malesuada non gravida eu, eleifend et quam. Proin sit amet elit euismod odio tincidunt tempor. Sed eleifend tincidunt blandit. Cras eget sapien odio, a sodales dui. Pellentesque tincidunt varius sagittis. Nullam nisl est, volutpat sed fringilla at, faucibus id mi. Phasellus vel lacus nibh, eget consectetur nulla. Quisque vel elementum nibh. Etiam vitae lectus erat, eu euismod est.
</p>
<span class="bot">bottom</span>
</div>
</body>
</html>
you need to put another new div same width & height of warpper and stuck div to it:
check this:
<!doctype html>
<html>
<head>
<style type="text/css">
#fake_wrapper{
width:300px;
height:300px;
position:relative;
overflow:none;
}
#wrapper {
width:300px;
height:300px;
background-color:#eee;
overflow:auto;
}
.bot {
border:1px solid #ddd;
display:block;
position:absolute;
bottom:0px;
right:15px;
color:blue;
}
</style>
<title>tst</title>
</head>
<body>
<div id="fake_wrapper">
<div id="wrapper">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sed tempor nibh. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec molestie tortor non nisi accumsan placerat. Morbi elit risus, venenatis et sodales congue, tristique vel ligula. Maecenas convallis arcu turpis. Praesent nibh leo, blandit ut posuere et, aliquet at sapien. Ut placerat, libero id faucibus pellentesque, leo nulla consectetur ligula, quis malesuada sapien nulla id diam. Nullam turpis nisl, malesuada non gravida eu, eleifend et quam. Proin sit amet elit euismod odio tincidunt tempor. Sed eleifend tincidunt blandit. Cras eget sapien odio, a sodales dui. Pellentesque tincidunt varius sagittis. Nullam nisl est, volutpat sed fringilla at, faucibus id mi. Phasellus vel lacus nibh, eget consectetur nulla. Quisque vel elementum nibh. Etiam vitae lectus erat, eu euismod est.
</p>
</div>
<div class="bot">bottom fixed</div>
</div>
</body>
</html>
Check this one.
Made the position: fixed of .bot and added a top and left.
Related
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%;
I recreated my issue here.
The problem is that the 'left' div should be matching the combined height of 'top' and bottom' right divs. I have been reading articles and tutorials on how to achieve equal height with columns of varying content but none of them seem to apply to the 'stacked' columns.
My current nonworking solution was built on a concept taken from this article:
The only way to make the height of a div equal to the tallest column
is if that div contains all the columns. So to explain this another
way, by placing the columns inside a container we cause the container
to be the height of the tallest column. This is a very useful
structure. For this structure to work correctly in all browsers the
container div must be floated (left or right) plus each of the column
content divs must also be floated, it does not matter which way.
I am aware of the equalHeights jQuery plugin and resize, but I would very much prefer CSS solutions.
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>
<body>
<div id='container'>
<div id='height-container'>
<div id='left'>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque faucibus, nunc non semper fringilla, nibh mauris aliquam diam, sit amet suscipit purus ligula eu odio. Nulla tortor neque, sodales nec placerat vitae, laoreet a mi. In ac ullamcorper dui. Sed enim tellus, volutpat at tristique eu, condimentum volutpat tellus. Integer massa quam, egestas id vulputate id, ultrices ut felis.
</div>
<div id='right'>
<div id='top'>
Proin condimentum purus tortor, eu laoreet velit. Praesent ornare, mauris eu laoreet suscipit, nibh mauris imperdiet dolor, ut molestie erat tellus ac odio. Etiam tempor eros at neque tincidunt a feugiat massa imperdiet. Vestibulum aliquet nibh sit amet urna facilisis condimentum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In ornare dolor quis neque aliquet lacinia et id tortor. Fusce eu sapien non mi aliquet condimentum id vitae ante. Phasellus sit amet eros vitae velit fringilla facilisis non at eros. In non venenatis lectus. Nam tortor tellus, vehicula non vulputate vitae, mollis a velit. Pellentesque gravida pretium ante, eu volutpat risus viverra non. Duis purus quam, venenatis nec consectetur interdum, aliquam rutrum diam. Donec interdum odio eget ante consectetur in sodales mi molestie. Nunc bibendum, turpis vel vulputate accumsan, diam tortor placerat sem, sed posuere risus purus eu massa. Nullam eleifend pulvinar massa, nec cursus velit dictum quis.
</div>
<div id='bottom'>
Praesent vel porttitor dolor. Nulla vel nisl quis nibh bibendum rutrum. In gravida lacus a tellus tempus at pretium quam iaculis. Quisque fringilla feugiat urna, ac tincidunt tellus ornare et. Aenean sit amet turpis at ante molestie accumsan. Duis vestibulum, tortor nec aliquam tincidunt, leo urna tincidunt nunc, et laoreet metus risus quis erat. Proin at sem leo, sit amet bibendum quam. Vivamus quam urna, pulvinar vel tempor eget, facilisis tristique ipsum. Aenean sed ipsum et odio convallis congue a sit amet leo. Morbi luctus odio a felis pellentesque sit amet cursus ante consectetur. <br><br>
Praesent vel porttitor dolor. Nulla vel nisl quis nibh bibendum rutrum. In gravida lacus a tellus tempus at pretium quam iaculis. Quisque fringilla feugiat urna, ac tincidunt tellus ornare et. Aenean sit amet turpis at ante molestie accumsan. Duis vestibulum, tortor nec aliquam tincidunt, leo urna tincidunt nunc, et laoreet metus risus quis erat. Proin at sem leo, sit amet bibendum quam. Vivamus quam urna, pulvinar vel tempor eget, facilisis tristique ipsum. Aenean sed ipsum et odio convallis congue a sit amet leo. Morbi luctus odio a felis pellentesque sit amet cursus ante consectetur.
</div>
</div>
</div>
</div>
</body>
</html>
CSS:
body{
text-align:justify;
}
#container{
width:1000px;
margin:0 auto;
}
#height-container{
background:orange;
float:left;
}
#left{
float:left;
width:200px;
background:#CD5555;
padding:20px;
}
#right{
width:600px;
float:right;
}
#top{
background:yellow;
padding:20px;
}
#bottom{
background:#00FF66;
padding:20px;
}
You can use display:table property for this:
#height-container{
background:orange;
display: table;
vertical-align:top;
}
#left{
display: table-cell;
width:200px;
background:#CD5555;
padding:20px;
}
#right{
width:600px;
display: table-cell;
}
Check this http://jsfiddle.net/6rBAw/2/
But it's work till IE8 & above
UPDATED
CSS
#left{
width:200px;
background:#CD5555;
}
#right{
float:right;
width:600px;
}
.clr{clear:both;}
HTML
<div id='right'></div>
<div id='left'>
<div class="clr"></div>
</div>
Check it http://jsfiddle.net/6rBAw/4/
Here is a solution which works in IE 7 as well http://jsfiddle.net/6rBAw/6/ this solution makes use of negative margin bottom and padding bottom, the only thing is you have to give the margin bottom and padding bottom value the same and a large value and give the container of the column overflow hidden property.
#container{
width:1000px;
margin:0 auto;
**overflow: hidden;**
}
#left{
float:left;
width:200px;
background:#CD5555;
**padding:20px 20px 99999px 20px;
margin-bottom: -99999px;**
}
#right{
width:600px;
float:right;
**padding-bottom: 99999px;
margin-bottom: -99999px;**
background-color: black;
height: 1000px;
}
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
Below is the generated HTML for some pagination links, and also the CSS that is applied to it. For Page 1, the links appear to be 940 px from the top of the screen, which is what I want. However, when I click on a page besides page 1, the links appear to be 1880 px below the top of the screen. I would like the links to always be 940 px from the top of the screen regardless of which pagination link the user is on. What should the CSS be to accomplish this?
Thanks in advance,
John
The generated HTML:
<div class='pages'>[<b>1</b>] </div> <div class='pages'><a href='/booksearch.php?currentpage=2&find=best book ever&searching=yes&search=search' class='linksp'>2</a></div> <div class='pages'><a href='/booksearch.php?currentpage=3&find=best book ever&searching=yes&search=search' class='linksp'>3</a></div> <div class='pages'><a href='/booksearch.php?currentpage=4&find=best book ever&searching=yes&search=search' class='linksp'>4</a></div> <div class='pages'><a href='/booksearch.php?currentpage=2&find=best book ever&searching=yes&search=search' class='linksp'>></a></div> <div class='pages'><a href='/booksearch.php?currentpage=7&find=best book ever&searching=yes&search=search' class='linksp'>>></a></div>
The CSS:
.pages
{
overflow: hidden;
display: block;
float: left;
margin: 4px;
margin-top: 940px;
margin-left: 10px;
font-family: Arial, Helvetica, sans-serif ;
}
a.linksp:link {
color: #000000; text-decoration: none;
text-align:center;
margin-left:10px;
margin-right:10px;
margin-bottom:0px;
padding:2px;
font-family:Arial, Helvetica, sans-serif;
font-size: 16px;
}
a.linksp:visited {
color: #000000; text-decoration: none;
text-align:center;
margin-left:10px;
margin-right:10px;
margin-bottom:0px;
padding:2px;
font-family:Arial, Helvetica, sans-serif;
font-size: 16px;
}
a.linksp:active {
color: #000000; text-decoration: none;
text-align:center;
margin-left:10px;
margin-right:10px;
margin-bottom:0px;
padding:2px;
font-family:Arial, Helvetica, sans-serif;
font-size: 16px;
}
a.linksp:hover {
color: #000000; text-decoration: none;
background-color: #FFFF00;
text-align:center;
margin-left:10px;
margin-right:10px;
margin-bottom:0px;
padding:2px;
font-family:Arial, Helvetica, sans-serif;
font-size: 16px;
}
If this was me and I was able to, I'd rewrite the generated html and arrange them in a list rather than using of div's; it's just more semantic that way. I've heres an example of what I would do based on a news page.
Heres the code:
<html>
<head>
<title></title>
<style type="text/css">
#wrapper{
height:940px;
position:relative;
}
.pages{
overflow:hidden;
display:block;
float:left;
margin:4px;
margin-left:10px;
font-family:Arial, Helvetica, sans-serif;
}
a.linksp:link{
color:#000000;
text-decoration:none;
text-align:center;
margin-left:10px;
margin-right:10px;
margin-bottom:0px;
padding:2px;
font-family:Arial, Helvetica, sans-serif;
font-size:16px;
}
a.linksp:visited{
color:#000000;
text-decoration:none;
text-align:center;
margin-left:10px;
margin-right:10px;
margin-bottom:0px;
padding:2px;
font-family:Arial, Helvetica, sans-serif;
font-size:16px;
}
a.linksp:active{
color:#000000;
text-decoration:none;
text-align:center;
margin-left:10px;
margin-right:10px;
margin-bottom:0px;
padding:2px;
font-family:Arial, Helvetica, sans-serif;
font-size:16px;
}
a.linksp:hover{
color:#000000;
text-decoration:none;
background-color:#FFFF00;
text-align:center;
margin-left:10px;
margin-right:10px;
margin-bottom:0px;
padding:2px;
font-family:Arial, Helvetica, sans-serif;
font-size:16px;
}
.pagination{
bottom:0;
left:0;
position:absolute;
}
</style>
</head>
<body>
<div id="wrapper">
<div class="article">
<h2>News title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris adipiscing venenatis lacus a adipiscing. Sed porta nibh a risus tempor id commodo mauris lobortis. Sed commodo rutrum quam at molestie. Sed dapibus orci non sem lobortis a tincidunt leo vulputate. Duis non risus sit amet erat pulvinar viverra tristique vel mi. In vulputate sapien nec ante faucibus rutrum. Mauris vitae dolor ac lacus suscipit vehicula nec id urna. In interdum, erat eget bibendum venenatis, libero ligula vestibulum enim, et tincidunt lectus tortor vel mauris. Morbi id vestibulum libero. Quisque nisl tellus, congue nec blandit et, feugiat ut metus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Phasellus fermentum dolor nec dolor fermentum luctus. Suspendisse accumsan turpis et nibh faucibus fermentum. Nulla sit amet lorem eu mi tempus condimentum vitae et turpis. Aenean lobortis, sem porttitor euismod consectetur, mi leo eleifend velit, et sagittis tortor mauris lacinia nulla. Maecenas porttitor diam at justo tincidunt ut varius lacus sodales. Suspendisse nec diam nunc.</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis porttitor condimentum dolor nec porttitor. Fusce porttitor urna pharetra ante vehicula vel iaculis sem condimentum. Aliquam et sem lectus, ut semper neque. Vivamus justo magna, porta sed imperdiet in, vestibulum ut mi. Donec ultrices ullamcorper sem, eu mollis tellus vulputate non. Sed sagittis venenatis lacus fringilla varius. Etiam vestibulum dui et lorem egestas gravida. Cras cursus sodales mauris, sed suscipit tortor pharetra quis. Nulla facilisis varius commodo. Curabitur urna sem, vestibulum condimentum tincidunt eget, malesuada eu ipsum. Integer tristique, sapien sit amet sollicitudin volutpat, mauris velit sagittis urna, ut mollis purus urna quis dui. Donec neque arcu, auctor et blandit a, pretium sed leo. Ut ut elit enim. Sed eu lacus justo, nec sollicitudin erat. Nulla congue auctor nisl vel ultricies. Mauris ac luctus nisl. Phasellus sapien lectus, commodo ut interdum nec, sagittis vitae arcu. Praesent nibh eros, molestie ut condimentum eu, tristique vitae eros. </p>
</div>
<div class="article">
<h2>News title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris adipiscing venenatis lacus a adipiscing. Sed porta nibh a risus tempor id commodo mauris lobortis. Sed commodo rutrum quam at molestie. Sed dapibus orci non sem lobortis a tincidunt leo vulputate. Duis non risus sit amet erat pulvinar viverra tristique vel mi. In vulputate sapien nec ante faucibus rutrum. Mauris vitae dolor ac lacus suscipit vehicula nec id urna. In interdum, erat eget bibendum venenatis, libero ligula vestibulum enim, et tincidunt lectus tortor vel mauris. Morbi id vestibulum libero. Quisque nisl tellus, congue nec blandit et, feugiat ut metus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Phasellus fermentum dolor nec dolor fermentum luctus. Suspendisse accumsan turpis et nibh faucibus fermentum. Nulla sit amet lorem eu mi tempus condimentum vitae et turpis. Aenean lobortis, sem porttitor euismod consectetur, mi leo eleifend velit, et sagittis tortor mauris lacinia nulla. Maecenas porttitor diam at justo tincidunt ut varius lacus sodales. Suspendisse nec diam nunc.</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis porttitor condimentum dolor nec porttitor. Fusce porttitor urna pharetra ante vehicula vel iaculis sem condimentum. Aliquam et sem lectus, ut semper neque. Vivamus justo magna, porta sed imperdiet in, vestibulum ut mi. Donec ultrices ullamcorper sem, eu mollis tellus vulputate non. Sed sagittis venenatis lacus fringilla varius. Etiam vestibulum dui et lorem egestas gravida. Cras cursus sodales mauris, sed suscipit tortor pharetra quis. Nulla facilisis varius commodo. Curabitur urna sem, vestibulum condimentum tincidunt eget, malesuada eu ipsum. Integer tristique, sapien sit amet sollicitudin volutpat, mauris velit sagittis urna, ut mollis purus urna quis dui. Donec neque arcu, auctor et blandit a, pretium sed leo. Ut ut elit enim. Sed eu lacus justo, nec sollicitudin erat. Nulla congue auctor nisl vel ultricies. Mauris ac luctus nisl. Phasellus sapien lectus, commodo ut interdum nec, sagittis vitae arcu. Praesent nibh eros, molestie ut condimentum eu, tristique vitae eros. </p>
</div>
<div class="article">
<h2>News title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris adipiscing venenatis lacus a adipiscing. Sed porta nibh a risus tempor id commodo mauris lobortis. Sed commodo rutrum quam at molestie. Sed dapibus orci non sem lobortis a tincidunt leo vulputate. Duis non risus sit amet erat pulvinar viverra tristique vel mi. In vulputate sapien nec ante faucibus rutrum. Mauris vitae dolor ac lacus suscipit vehicula nec id urna. In interdum, erat eget bibendum venenatis, libero ligula vestibulum enim, et tincidunt lectus tortor vel mauris. Morbi id vestibulum libero. Quisque nisl tellus, congue nec blandit et, feugiat ut metus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Phasellus fermentum dolor nec dolor fermentum luctus. Suspendisse accumsan turpis et nibh faucibus fermentum. Nulla sit amet lorem eu mi tempus condimentum vitae et turpis. Aenean lobortis, sem porttitor euismod consectetur, mi leo eleifend velit, et sagittis tortor mauris lacinia nulla. Maecenas porttitor diam at justo tincidunt ut varius lacus sodales. Suspendisse nec diam nunc.</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis porttitor condimentum dolor nec porttitor. Fusce porttitor urna pharetra ante vehicula vel iaculis sem condimentum. Aliquam et sem lectus, ut semper neque. Vivamus justo magna, porta sed imperdiet in, vestibulum ut mi. Donec ultrices ullamcorper sem, eu mollis tellus vulputate non. Sed sagittis venenatis lacus fringilla varius. Etiam vestibulum dui et lorem egestas gravida. Cras cursus sodales mauris, sed suscipit tortor pharetra quis. Nulla facilisis varius commodo. Curabitur urna sem, vestibulum condimentum tincidunt eget, malesuada eu ipsum. Integer tristique, sapien sit amet sollicitudin volutpat, mauris velit sagittis urna, ut mollis purus urna quis dui. Donec neque arcu, auctor et blandit a, pretium sed leo. Ut ut elit enim. Sed eu lacus justo, nec sollicitudin erat. Nulla congue auctor nisl vel ultricies. Mauris ac luctus nisl. Phasellus sapien lectus, commodo ut interdum nec, sagittis vitae arcu. Praesent nibh eros, molestie ut condimentum eu, tristique vitae eros. </p>
</div>
<div class="pagination">
<div class='pages'>
[<b>1</b>]
</div>
<div class='pages'>
<a href='#' class='linksp'>2</a>
</div>
<div class='pages'>
<a href='#' class='linksp'>3</a>
</div>
<div class='pages'>
<a href='#' class='linksp'>4</a>
</div>
<div class='pages'>
<a href='#' class='linksp'>></a>
</div>
<div class='pages'>
<a href='#' class='linksp'>>></a>
</div>
</div>
</div>
</body>
</html>
First I'd create a wrapper div that will have a fixed height of 940px this will contain all of the my news articles and pagination controls. Inside the wrapper div I want to display my articles, so by adding a div around the h2 and p tag this acts as a container for each article and make it easy for me to add margins between my articles if needs be.
I've also created a pagination div that will house all of the pagination controls, to make this stick to the bottom of the wrapper div I will apply these styles to it: position:absolute; bottom:0; left:0; no matter what the size of the wrapper div, this will always sit at the bottom of it.
This will work better than applying a fixed position to the pagination element, because position:fixed isn't recognised by all browsers.
Sorry if this isn't what you're looking for but I hope it helps in some way or another!
Danny
I hope I understand your question correctly, but if you contain the pagination in an element, say a div with id="pagination". You could set the position to fixed and set the top property to 940px. Like so:
#pagination {
position: fixed;
top: 940px;
}
This would ensure the distance to be the same on every page, but the element will hover over the rest of your content. This method might not work similarly across browsers, especially Internet Explorer 6 has many positioning bugs.