I need to scroll a sidebar div and it's content (3 links) vertically between two points. I have used position:fixed; top: 100px. This works fairly well, it starts 100px down form the top and scrolls vertically when a user scroll down the page. But how do I get it to stop just before the footer? So far I have:
HTML
<div class="sidebar">
<div class="scroll">
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>
</div>
</div>
CSS
.scroll {position: fixed; top: 450px;}
Thanks,
Andy ;-)
Okay, I have added more code to give a better picture of what I am after. Here is the JSFiddle: https://jsfiddle.net/mwt4x90d/
The javascript should be placed before the closing scroll div of the HTML file. However, jsfiddle wants it separated out.
I got it working, but I have two issues. The first is the outer div (sidebar) collapses (just see a line above the scroll div. The second is the div is not stopping above the Left Box / Pagination no matter what figure I use inside the parenthesis. I am using a Liquid layout so maybe that is having an effect.
If anyone can see what I am doing wrong, it would be great, I don't know JavaScript, so I am just going by what ye say here. Thanks for any help, Andy ;-)
HTML
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Scrolling Sidebar</title>
<link rel="stylesheet" type="text/css" media="screen" href="mainstyle.css">
</head>
<body>
<div class="headerContents">
<h1>Lorem Ipsum</h1>
</div>
<div class="leftM"></div>
<div class="centerM">
<a class="top"></a>
<aside>
<div class="content">
<h2>Lorem Ipsum</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In eu euismod nisl, ac dignissim libero. Aenean gravida justo in nunc blandit ultrices. </p>
</div>
</aside>
<aside>
<div class="content">
<h2>Lorem Ipsum</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In eu euismod nisl, ac dignissim libero. Aenean gravida justo in nunc blandit ultrices. </p>
</div>
</aside>
<aside>
<div class="content">
<h2>Lorem Ipsum</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In eu euismod nisl, ac dignissim libero. Aenean gravida justo in nunc blandit ultrices. </p>
</div>
</aside>
</div>
<div class="rightM"></div>
<div class="sidebar">
<div class="scroll">
<h2>Lorem Ipsum</h2>
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>
<script type="text/javascript>
var footP = 0;
var scroller = document.getElementsByClassName("scroll");
setInterval("if(document.body.scrollTop > (350) && footP == 0){scroller[0].style.position = 'absolute';scroller[0].style.top = document.body.scrollTop + 450;footP = 1;};",1);
setInterval("if(document.body.scrollTop <= (350) && footP == 1){scroller[0].style.position = 'fixed';scroller[0].style.top = 450;footP = 0;};",1);
</script>
</div>
</div>
<div class="cards">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In eu euismod nisl, ac dignissim libero. Aenean gravida justo in nunc blandit ultrices. Aenean risus arcu, tristique id tortor nec, suscipit commodo risus. Aenean ac fringilla lorem. Cras eu euismod est, sit amet vulputate turpis. Fusce in felis sed lectus tincidunt posuere. Cras in sapien ut metus tincidunt laoreet eget ac ex. Cras congue nec enim in dictum.<p>
<p>Duis urna sapien, tristique non leo non, ultricies iaculis nibh. Sed posuere quis eros vitae vestibulum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas auctor sollicitudin condimentum. Pellentesque ipsum lacus, convallis sed nunc et, porta lacinia lectus. Nam vitae ante erat. Etiam elementum velit quis neque vehicula, quis blandit quam pulvinar. Vestibulum mollis pretium tortor porttitor accumsan. Proin nec semper nulla. Praesent mi augue, placerat vitae auctor vel, lobortis eget dolor. Donec eget mi augue. Maecenas eu augue cursus, maximus nisi eleifend, tempor lacus. Curabitur quis dolor vel urna venenatis pellentesque a nec est. Duis sit amet tempus dui. Integer egestas luctus efficitur. Etiam efficitur orci et ullamcorper pulvinar.<p>
Duis eleifend metus nibh, vel vulputate est mattis sit amet. In interdum fermentum lorem, in consectetur eros pretium bibendum. Curabitur turpis diam, molestie nec accumsan sed, scelerisque nec orci. Cras lobortis rutrum sem, vel viverra magna scelerisque ac. Phasellus convallis nunc quis consectetur congue. In vestibulum erat non tellus aliquam sodales. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Cras quis rutrum augue, in faucibus nisi. Nulla bibendum ut massa vel eleifend. In nec ligula eget nisi ultricies eleifend. Aliquam ac finibus enim. Maecenas at lacus dictum, porta neque non, suscipit ex. Aenean sem nisl, pellentesque vel leo eget, volutpat condimentum odio. Curabitur sed dui nulla.
</div>
<div class="leftp">Duis eleifend metus nibh, vel vulputate est mattis sit amet. In interdum fermentum lorem, in consectetur eros pretium bibendum. </div>
<div class="pag snippetspag">
<ul class="pagination">
<li>«</li>
<li><a class="active" href="../page1.php">1</a></li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>»</li>
</ul>
</div>
</div>
<div class="footer">
<aside>
<div class="content">
<h2>Lorem Ipsum</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In eu euismod nisl, ac dignissim libero. Aenean gravida justo in nunc blandit ultrices. Aenean risus arcu, tristique id tortor nec, suscipit commodo risus. Aenean ac fringilla lorem. Cras eu euismod est, sit amet vulputate turpis. Fusce in felis sed lectus tincidunt posuere. Cras in sapien ut metus tincidunt laoreet eget ac ex. Cras congue nec enim in dictum.</p>
</div>
</aside>
<aside>
<div class="content">
<h2>Lorem Ipsum</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In eu euismod nisl, ac dignissim libero. Aenean gravida justo in nunc blandit ultrices. Aenean risus arcu, tristique id tortor nec, suscipit commodo risus. Aenean ac fringilla lorem. Cras eu euismod est, sit amet vulputate turpis. Fusce in felis sed lectus tincidunt posuere. Cras in sapien ut metus tincidunt laoreet eget ac ex. Cras congue nec enim in dictum.</p>
</div>
</aside>
<aside>
<div class="content">
<h2>Lorem Ipsum</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In eu euismod nisl, ac dignissim libero. Aenean gravida justo in nunc blandit ultrices. Aenean risus arcu, tristique id tortor nec, suscipit commodo risus. Aenean ac fringilla lorem. Cras eu euismod est, sit amet vulputate turpis. Fusce in felis sed lectus tincidunt posuere. Cras in sapien ut metus tincidunt laoreet eget ac ex. Cras congue nec enim in dictum.</p>
</div>
</aside>
<aside>
<div class="content">
<h2>Lorem Ipsum</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In eu euismod nisl, ac dignissim libero. Aenean gravida justo in nunc blandit ultrices. Aenean risus arcu, tristique id tortor nec, suscipit commodo risus. Aenean ac fringilla lorem. Cras eu euismod est, sit amet vulputate turpis. Fusce in felis sed lectus tincidunt posuere. Cras in sapien ut metus tincidunt laoreet eget ac ex. Cras congue nec enim in dictum.</p>
</div>
</aside>
</div>
<div class="copyright">
<p class="copyrightText">Lorem ipsum dolor sit amet Lorem Ipsum 2016</p>
</div>
</body>
</html>
CSS
#import url(https://fonts.googleapis.com/css?family=Open+Sans:300italic,700italic,300,700);
body{
font-family: 'Open Sans', sans-serif;
font-size: 16px;
font-weight: 300;
color: #3f3f3f;
margin: 0;
padding: 0;
color: #000;
background: #f4f3f2;}
h1{font-size: 2.8em; font-weight: 700;}
h2{margin: 0 0 .5em 0; font-size: 1.4em; font-weight: 700; line-height: 1.1em;}
h3{margin: 0 0 .5em 0; font-size: 1.3em; font-weight: 700;}
p{margin: 0 0 1em 0;}
.headerContents{background-color: #3f3f3f; padding: 1em 2em; margin-bottom: 2em;}
.leftM, .centerM, .rightM{
float: left;
margin-bottom: 2em;
margin-left: 3%;}
.centerM{background-color: #fff; border: 1px solid #dfdfdf;}
.leftM{width: 9%;}
.centerM{width: 68%;}
.rightM{width: 9%;}
.sidebar,.cards{
float: left;
margin-bottom: 1em;
margin-left: 3%;}
.sidebar {width: 21%; border: 1px solid #dfdfdf; background-color: #fff;}
.scroll{position: fixed; height: 200px;}
.cards {width: 70%;}
.leftp, .pag{
float:left;
margin-bottom: 2em;
margin-left: 3%;}
.leftp{clear: both; width: 21.5%;}
.pag{width: 69.5%; background-color: #fff; border: 1px solid #dfdfdf; padding: 1.5em 0;}
.footer{
clear: both;
padding: 1.5em 1em;
background-color: #3f3f3f;
overflow: hidden;
line-height: 1.5em;
border-top: 5px solid #ff0000;
color: #fff;}
.copyright{clear:both;}
.headerContents h1{font-size: 3em; color: #fff;}
.centerM aside{width: 33%; float: left; text-align: center;}
.centerM .content{
margin: 15px;
background: no-repeat center top;
background-size: 75px 75px;
padding-top: 15px;}
.centerM aside h2{text-decoration:none;}
.centerM aside h2:hover{text-decoration: underline;}
.snippetspag{
text-align: center;}
ul.pagination {
display: inline-block;
padding: 0;
margin: 0;}
ul.pagination li {display: inline;}
ul.pagination li a {
color: #3f3f3f;
float: left;
padding: 8px 16px;
text-decoration: none;
border-radius: 5px;}
ul.pagination li a:hover {
color: #ff0000;}
ul.pagination li a.active {
background-color: #ff0000;
color: #fff;
font-weight: bold;
border-radius: 5px;}
.footer aside .content{
margin: 0 auto;
width: 22%;
float: left;
text-align: left;
margin-left: 3%;}
.footer a:link, a:visited{color: #99cc00; text-decoration: none;}
.footer a:hover, a:active{color: #cc9900;}
.copyright{
text-align: center;
background-color: #3f3f3f;
padding: 1%;
border-bottom: 5px solid #ff0000;}
.copyrightText{font-size:0.9em; color: #fff;}
.copyrightText a:link, a:visited{color: #99cc00; text-decoration: none;}
.copyrightText a:hover, a:active{color: #cc9900;}
Just insert this a the end of your HTML:
<script type="text/javascript>
var footP = 0;
var scroller = document.getElementsByClassName("scroll");
setInterval("if(document.body.scrollTop > (ENTER FOOTER POSITION HERE) && footP == 0){scroller[0].style.position = 'absolute';scroller[0].style.top = document.body.scrollTop + 450;footP = 1;};",1);
setInterval("if(document.body.scrollTop <= (ENTER FOOTER POSITION HERE) && footP == 1){scroller[0].style.position = 'fixed';scroller[0].style.top = 450;footP = 0;};",1);
</script>
So that basically changes the position to stay where it is when it gets to the footer position.
REMEMBER TO ENTER THE FOOTER POSITION IN IN A STANDARD NUMBER FORM.
Like 600.
Not 600px.
<body>
<div class="sidebar">
<div class="scroll">
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>
</div>
</div>
<div style="height:2500px">
</div>
<style>
.scroll {
position: fixed;
top: 450px;
}
</style>
<script>
var footP = 0;
var scroller = document.getElementsByClassName("scroll");
setInterval("if(document.body.scrollTop > (600) && footP == 0){scroller[0].style.position = 'absolute';scroller[0].style.top = document.body.scrollTop + 450;footP = 1;};",1);
setInterval("if(document.body.scrollTop <= (600) && footP == 1){scroller[0].style.position = 'fixed';scroller[0].style.top = 450;footP = 0;};",1);
</script>
</body>
That's the entire thing.
And it might not work on JSFiddle. Just copy that into a Notepad++ HTML file and edit all you want!
Related
Beginner with HTML here. I've been getting a pretty funky error with my HTML script. When I display it, the footer looks it was formatted like an inline element. It is showing up on the side of my timeline rather than at the bottom of the page.
Here is a screen shot:
Webpage Screenshot
Here is the code:
<DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>About Mangetsu Budogu</title>
<style>
/*Total Body width must be greater than widths for content */
/*global scope css */
body{
width: 1080px;
font-family: Arial, Verdana, sans-serif;
color: #665544;
}
.main_content{
float: left;
width: 620px;
margin: 10px;
}
/* Nav Bar CSS */
nav {
overflow: hidden;
background-color: #333;
font-family: Arial, Helvetica, sans-serif;
border-radius: 25px;
width: 99%;
text-align: center;
}
nav a{
float: center;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
nav a:hover{
background-color: red;
}
nav li{
display: inline;
padding: 5px;
}
/* Timeline */
.timeline{
float: left;
width: 300px;
margin: 10px;
}
li{
margin: 10px 0;
}
/* Main Content*/
#main_heading{
text-align: center;
padding-top: 25px;
padding-bottom: 25px;
}
footer {
display: block;
}
</style>
</head>
<header>
<center><img class="logo" src="https://upload.wikimedia.org/wikipedia/commons/7/76/Sakai_Kamon.svg" width="200" height="200"/></center>
<nav>
<ul id="nav_li">
<li>Home</li>
<li>About</li>
<li>Products</li>
<li>Classes</li>
<li>Contact</li>
</ul>
</nav>
</header>
<body>
<h1 id="main_heading">About Mangetsu Budogu</h1>
<article class="main_content">
<h2>Beginnings</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.Praesent posuere felis non turpis venenatis porta. Ut vel ultrices ipsum, vel blandit ipsum. Fusce rhoncus eget mauris ut pellentesque. Aenean condimentum lacus aliquam tristique efficitur. Nam commodo mattis dolor id molestie. Nulla molestie, magna suscipit gravida placerat, tortor libero faucibus risus, ac lacinia lacus metus at ex. Integer auctor sollicitudin quam, in gravida diam rhoncus non. Praesent lacinia velit est, et efficitur velit lobortis quis. Donec eleifend gravida sem aliquet finibus. Duis tempus, orci vel blandit luctus, sem sapien rhoncus enim, eu consequat ex mauris posuere augue. Etiam mi sem, scelerisque sit amet dictum eget, eleifend id urna. Fusce non condimentum dui, vel rhoncus nisl. Sed lacinia dui non lacinia mollis. Maecenas sodales lorem et est sodales molestie.
</p>
<p>
Nam et ipsum ac est ornare mattis. Mauris aliquet consequat lorem id lacinia. Nunc vulputate mollis bibendum. Duis sed enim a turpis mollis consectetur vitae vel mi. Phasellus quis lectus velit. Morbi vel libero pulvinar tortor placerat placerat. Suspendisse id ante leo. Etiam eu facilisis enim. Cras lorem tellus, bibendum eget turpis vitae, porta blandit lorem. Nam ut dui eu mauris malesuada ultricies. Cras nec erat dictum, ultricies sem non, vestibulum arcu. Fusce varius imperdiet nulla eu convallis. Curabitur quis mattis felis, non pretium ex. </p>
<h2>The 1990s Era</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent posuere felis non turpis venenatis porta. Ut vel ultrices ipsum, vel blandit ipsum. Fusce rhoncus eget mauris ut pellentesque. Aenean condimentum lacus aliquam tristique efficitur. Nam commodo mattis dolor id molestie. Nulla molestie, magna suscipit gravida placerat, tortor libero faucibus risus, ac lacinia lacus metus at ex. Integer auctor sollicitudin quam, in gravida diam rhoncus non. Praesent lacinia velit est, et efficitur velit lobortis quis. Donec eleifend gravida sem aliquet finibus. Duis tempus, orci vel blandit luctus, sem sapien rhoncus enim, eu consequat ex mauris posuere augue. Etiam mi sem, scelerisque sit amet dictum eget, eleifend id urna. Fusce non condimentum dui, vel rhoncus nisl. Sed lacinia dui non lacinia mollis. Maecenas sodales lorem et est sodales molestie.
</p>
</article>
<div class="timeline">
<h3>Mangetsu Budogu Timeline</h3>
<ul>
<li><time>1991</time>: Established Flagship Store in <strong>Kyoto, Japan, Nishijin District</strong></li>
<li>1995: Created first Kendogu Website in Japan</li>
<li>1997: Establishment of 2nd Store in <strong>Shinagawa District, Tokyo</strong></li>
<li>1999: Creation of the Mangetsu Budogu Reward Points</li>
<li>2001: Establishment of 3rd Store in <strong>Nakamura District, Nagoya</strong></li>
<li>2010: Creation of the Shingsengumi Line of Bogu</li>
<li>2011: First Overseas Store in Los Angeles, California</li>
</ul>
</div>
<footer>
© Mangetsu Budogu 2018
</footer>
</body>
</html>
You need to clear the float property you have assigned to <article class="main_content"> and <div class="timeline">. Just add this element before footer.
<div style="clear:both;"></div>
Your .main_content and the timeline are floating elements which don't span the whole width of the body, that's why the footer is displayed next to it (it "floats" next to the floating elements).
To avoid this, add clear: both to the footer CSS
I'm trying to float:right; image next to paragraph <p>, which are nested together in <div> container. The problem is that the parent <div> resize its height with the size of the text in the paragraph, that's good, but floated right image overflows the div, and same <div> didn't resize itself according to the image height.
.container {
width: 70%;
background-color: #777;
margin: 0 auto;
padding: 25px;
}
.content {
width: 100%;
height: auto;
float: left;
}
.content .container {
width: 70%;
height: auto;
background-color: white;
/*
overflow: hidden; /* Try later without overflow. (autoportrait.jpg overflow .content .container
*/
}
.autoportrait {
width: 20%;
height: 20%;
/*
max-width:205px;
max-height:265px;
margin-bottom: 25px;
*/
padding: 10px 10px 10px 10px;
border: solid;
border-width: 2px;
float: right;
clear: both;
}
<div class="content">
<div class="container">
<!--
<main>
<section>
-->
<img class="autoportrait" src="autoportrait.jpg" alt="Autoportrait of me">
<h2>Post title</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eu purus et enim eleifend fringilla. Cras nec tortor elementum, vestibulum orci id, congue nisl. Fusce ornare ac turpis sit amet tincidunt. Phasellus vel magna ut massa tempus ultricies.
Etiam erat libero, molestie vitae scelerisque quis, consequat eget lorem. Nulla finibus felis non mi viverra efficitur. Proin eget lobortis libero. Fusce aliquam eros sed placerat viverra. Nulla venenatis, nulla sit amet suscipit vulputate, sem
mauris rutrum erat, id pharetra dui nunc at dui. Morbi dignissim luctus maximus. Cras vitae ornare risus. Sed accumsan vitae eros ac placerat. Proin commodo non orci nec consectetur. Nunc posuere, enim a lobortis ultrices, augue ex ultrices ante,
nec consectetur elit leo a ligula. Mauris pellentesque massa nisl, non pellentesque ex pulvinar eu.
</p>
<!--
</section>
</main>
-->
</div>
</div>
I tried to use overflow: hidden; , but that works only for a single "post". When I try to put a second one, the same problem appears and length of the images that flows out of the 'content container' doubles.
I'm newbie in HTML/CSS and the code I write it's for my own knowledge. So I'll be grateful if we figure out something.
Greetings from Varna, Bulgaria!
Make the div to clear it's children using :after pseudo class.
.container{
width: 70%;
background-color: #777;
margin: 0 auto;
padding: 25px;
border:1px solid red;
}
.content{
width: 100%;
height: auto;
float: left;
}
.content .container {
width: 70%;
height: auto;
background-color: white;
/*overflow: hidden; /* Try later without overflow. (autoportrait.jpg overflow .content .container) */
}
.autoportrait{
width: 20%;
height: 20%;
/*max-width:205px;
max-height:265px;
margin-bottom: 25px;*/
padding: 10px 10px 10px 10px;
border: solid;
border-width: 2px;
float: right;
clear:both;
}
.container:after {
visibility: hidden;
display:table;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
<div class="content">
<div class="container">
<!--<main>
<section>-->
<img class="autoportrait" src="http://images.financialexpress.com/2015/12/Lead-image.jpg" alt="Autoportrait of me">
<h2>Post title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eu purus et enim eleifend fringilla.
</p>
<!--</section>
</main>-->
</div>
<div class="container">
<!--<main>
<section>-->
<img class="autoportrait" src="http://images.financialexpress.com/2015/12/Lead-image.jpg" alt="Autoportrait of me">
<h2>Post title</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eu purus et enim eleifend fringilla.
Cras nec tortor elementum, vestibulum orci id, congue nisl. Fusce ornare ac turpis sit amet tincidunt.
Phasellus vel magna ut massa tempus ultricies. Etiam erat libero, molestie vitae scelerisque quis, consequat eget lorem.
Nulla finibus felis non mi viverra efficitur. Proin eget lobortis libero. Fusce aliquam eros sed placerat viverra.
Nulla venenatis, nulla sit amet suscipit vulputate, sem mauris rutrum erat, id pharetra dui nunc at dui.
Morbi dignissim luctus maximus. Cras vitae ornare risus. Sed accumsan vitae eros ac placerat.
Proin commodo non orci nec consectetur. Nunc posuere, enim a lobortis ultrices, augue ex ultrices ante, nec consectetur elit leo a ligula.
Mauris pellentesque massa nisl, non pellentesque ex pulvinar eu.
</p>
<!--</section>
</main>-->
</div>
</div>
Simplest solution is to use overflow: hidden; on .content .container.
I know you said you attempted it previously and even had it commented out in .content .container but it's working for me. Perhaps the issue was where/how you placed the second article in your markup.
.container {
width: 70%;
background-color: #777;
margin: 0 auto;
padding: 25px;
}
.content {
width: 100%;
height: auto;
float: left;
}
.content .container {
width: 70%;
height: auto;
background-color: white;
overflow: hidden;
border: 1px solid #ccc;
}
.autoportrait {
width: 20%;
height: 20%;
/*
max-width:205px;
max-height:265px;
margin-bottom: 25px;
*/
padding: 10px 10px 10px 10px;
border: solid;
border-width: 2px;
float: right;
clear: both;
}
<div class="content">
<div class="container">
<img class="autoportrait" src="http://placehold.it/300x500/fc0/" alt="Autoportrait of me">
<h2>Post title</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eu purus et enim eleifend fringilla. Cras nec tortor elementum, vestibulum orci id, congue nisl. Fusce ornare ac turpis sit amet tincidunt. Phasellus vel magna ut massa tempus ultricies.
Etiam erat libero, molestie vitae scelerisque quis, consequat eget lorem. Nulla finibus felis non mi viverra efficitur. Proin eget lobortis libero. Fusce aliquam eros sed placerat viverra. Nulla venenatis, nulla sit amet suscipit vulputate, sem
mauris rutrum erat, id pharetra dui nunc at dui. Morbi dignissim luctus maximus. Cras vitae ornare risus. Sed accumsan vitae eros ac placerat. Proin commodo non orci nec consectetur. Nunc posuere, enim a lobortis ultrices, augue ex ultrices ante,
nec consectetur elit leo a ligula. Mauris pellentesque massa nisl, non pellentesque ex pulvinar eu.
</p>
</div>
<div class="container">
<img class="autoportrait" src="http://placehold.it/300x500/fc0/" alt="Autoportrait of me">
<h2>Post title</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eu purus et enim eleifend fringilla. Cras nec tortor elementum, vestibulum orci id, congue nisl. Fusce ornare ac turpis sit amet tincidunt. Phasellus vel magna ut massa tempus ultricies.
Etiam erat libero, molestie vitae scelerisque quis, consequat eget lorem. Nulla finibus felis non mi viverra efficitur. Proin eget lobortis libero. Fusce aliquam eros sed placerat viverra. Nulla venenatis, nulla sit amet suscipit vulputate, sem
mauris rutrum erat, id pharetra dui nunc at dui. Morbi dignissim luctus maximus. Cras vitae ornare risus. Sed accumsan vitae eros ac placerat. Proin commodo non orci nec consectetur. Nunc posuere, enim a lobortis ultrices, augue ex ultrices ante,
nec consectetur elit leo a ligula. Mauris pellentesque massa nisl, non pellentesque ex pulvinar eu.
</p>
<!--
</section>
</main>
-->
</div>
</div>
Here's an example demonstrating this problem:
http://jsfiddle.net/93twL/
Here's the code (same as the jsfiddle):
<body>
<header>
<h1>
Heading
</h1>
</header>
<div id="container">
<div id="left">
<h3>
Left
</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas quis tortor ligula. Aenean sagittis ut nibh quis hendrerit. Proin tincidunt scelerisque feugiat. Duis nunc erat, accumsan sed diam in, vulputate rutrum velit. Etiam tincidunt pretium dolor, sit amet bibendum tortor congue pulvinar. Donec convallis mauris non nunc consectetur, eget auctor nisi volutpat. Vestibulum lobortis nunc non ullamcorper faucibus. Nulla convallis justo in turpis aliquet vehicula. Donec eget turpis tempor, ornare magna nec, rhoncus orci. Sed pharetra risus orci, eu facilisis diam interdum id.
</p>
</div>
<div id="main">
<h3>
Main
</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas quis tortor ligula. Aenean sagittis ut nibh quis hendrerit. Proin tincidunt scelerisque feugiat. Duis nunc erat, accumsan sed diam in, vulputate rutrum velit. Etiam tincidunt pretium dolor, sit amet bibendum tortor congue pulvinar. Donec convallis mauris non nunc consectetur, eget auctor nisi volutpat. Vestibulum lobortis nunc non ullamcorper faucibus. Nulla convallis justo in turpis aliquet vehicula. Donec eget turpis tempor, ornare magna nec, rhoncus orci. Sed pharetra risus orci, eu facilisis diam interdum id.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas quis tortor ligula. Aenean sagittis ut nibh quis hendrerit. Proin tincidunt scelerisque feugiat. Duis nunc erat, accumsan sed diam in, vulputate rutrum velit. Etiam tincidunt pretium dolor, sit amet bibendum tortor congue pulvinar. Donec convallis mauris non nunc consectetur, eget auctor nisi volutpat. Vestibulum lobortis nunc non ullamcorper faucibus. Nulla convallis justo in turpis aliquet vehicula. Donec eget turpis tempor, ornare magna nec, rhoncus orci. Sed pharetra risus orci, eu facilisis diam interdum id.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas quis tortor ligula. Aenean sagittis ut nibh quis hendrerit. Proin tincidunt scelerisque feugiat. Duis nunc erat, accumsan sed diam in, vulputate rutrum velit. Etiam tincidunt pretium dolor, sit amet bibendum tortor congue pulvinar. Donec convallis mauris non nunc consectetur, eget auctor nisi volutpat. Vestibulum lobortis nunc non ullamcorper faucibus. Nulla convallis justo in turpis aliquet vehicula. Donec eget turpis tempor, ornare magna nec, rhoncus orci. Sed pharetra risus orci, eu facilisis diam interdum id.
</p>
</div>
<div id="right">
<h3>
Right
</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas quis tortor ligula. Aenean sagittis ut nibh quis hendrerit. Proin tincidunt scelerisque feugiat. Duis nunc erat, accumsan sed diam in, vulputate rutrum velit. Etiam tincidunt pretium dolor,
</p>
</div>
<footer id="footer">
<h3>
Footer
</h3>
</footer>
</div>
</body>
</html>
html{
min-height:100%;
height:100%;
}
body{
height:100%;
width:100%;
margin:0;
box-shadow: inset 0 0 1px 1px black;
}
h1{
margin-top:0;
}
#container{
clear:both;
width:100%;
height:100%;
float:left;
box-shadow: inset 0 0 1px 1px black;
}
#header{
min-height:12%;
clear:both;
float:left;
width:100%;
box-shadow: inherit;
}
#footer{
min-height:10%;
box-shadow: inherit;
clear:both;
float:left;
width:100%;
}
#left{
float:left;
box-shadow: inherit;
width:24.5%;
padding:0.5%;
min-height:50%;
}
#main{
float:left;
box-shadow: inherit;
width:48%;
min-height:50%;
padding:0.5%;
}
#right{
float:left;
box-shadow: inherit;
width:24.5%;
padding:0.5%;
min-height:50%;
}
As seen in the example by looking at the borders, once the content goes above 100% heigtht, the content overflows. I'd rather have the element expand.
To fix this, one would remove specifying the height. However, if there is no height specified then how am I supposed to control the height of all the content?(using percentages) I need buttons, headers, footers and so on that need a height set to it. (Without HTML and BODY having a 100% height, no other elements will be able to set a height using percentages)
In case it is not clear, I am talking about a fluid layout where the height is given in percentages.
So is this even possible or should I just give this up?
I think what you're after is a fluid width 100% and 100% height, so that the content vertically and horizontally expands. That is a tough thing and can't be done with css alone, flexbox might be able to do it, though I don't know. I saw it recently done with CSS and jQuery using a fixed height on both the header and footer, but the rest is fluid height and width:
http://codepen.io/anon/pen/EsJHu
I made it more responsive here: http://jsbin.com/momep/7/edit
CSS
/* Reset */
* {
margin: 0;
padding: 0;
}
/* Sticky footer */
html, body {
height: 100%;
width: 100%;
}
#page {
height: 100%;
height: auto !important;
min-height: 100%;
}
#sticky-footer-wrap {
overflow: auto;
padding-bottom: 100px;
}
.site-main {
overflow: hidden;
height: 100%;
}
.site-footer {
position: relative;
height: 100px;
margin-top: -100px;
clear: both;
}
/* Header */
.site-header {
height: 100px;
}
#media (min-width:992px) {
/* 3 columns */
#primary {
float: left;
width: 50%;
margin-left: 25%;
}
#secondary {
float: left;
width: 25%;
margin-left:-75%;
}
#tertiary{
float: left;
width: 25%;
}
}
/* Colours */
.site-header {
background: #C5E0DC;
}
#primary {
background-color: #F1D4AF;
}
#secondary {
background-color: #ECE5CE;
}
#tertiary{
background-color: #E08E79;
}
.site-footer {
background: #774F38;
}
HTML
<div id="page">
<div id="sticky-footer-wrap">
<header class="site-header">
<h3>Header</h3>
</header>
<div class="site-main">
<div id="primary">
<h2>Primary content</h2>
<h1>Layout Features</h1>
<ul>
<li>Header (fixed height)</li>
<li>3 fluid columns</li>
<li>100% or full height columns (jQuery)</li>
<li>Sticky footer (fixed height)</li>
<li>Correct source order of columns</li>
<li>IE8 compatible (Modernizr)</li>
</ul>
</div>
<div id="secondary">
<h3>Secondary content</h3>
</div>
<div id="tertiary">
<h4>Tertiary content</h4>
</div>
</div>
</div>
</div>
<footer class="site-footer">
<h3>Footer (sticky)</h3>
</footer>
jQuery
// On page load
$(window).load(columnHeight);
// On window resize
$(window).resize( function () {
// Clear all forced column heights before recalculating them after window resize
$("#primary").css("height", "");
$("#secondary").css("height", "");
$("#tertiary").css("height", "");
columnHeight();
});
// Make columns 100% in height
function columnHeight() {
// Column heights should equal the document height minus the header height and footer height
var newHeight = $(document).height() - $(".site-header").height() - $(".site-footer").height() + "px";
$("#primary").css("height", newHeight);
$("#secondary").css("height", newHeight);
$("#tertiary").css("height", newHeight);
}
You can replace height with min-height: 100%. And at the end of your HTML add a div with css rule clear: both to clean up all the floating elements.
So it will look like this :
<body>
<header>
<h1>
Heading
</h1>
</header>
<div id="container">
<div id="left">
<h3>
Left
</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas quis tortor ligula. Aenean sagittis ut nibh quis hendrerit. Proin tincidunt scelerisque feugiat. Duis nunc erat, accumsan sed diam in, vulputate rutrum velit. Etiam tincidunt pretium dolor, sit amet bibendum tortor congue pulvinar. Donec convallis mauris non nunc consectetur, eget auctor nisi volutpat. Vestibulum lobortis nunc non ullamcorper faucibus. Nulla convallis justo in turpis aliquet vehicula. Donec eget turpis tempor, ornare magna nec, rhoncus orci. Sed pharetra risus orci, eu facilisis diam interdum id.
</p>
</div>
<div id="main">
<h3>
Main
</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas quis tortor ligula. Aenean sagittis ut nibh quis hendrerit. Proin tincidunt scelerisque feugiat. Duis nunc erat, accumsan sed diam in, vulputate rutrum velit. Etiam tincidunt pretium dolor, sit amet bibendum tortor congue pulvinar. Donec convallis mauris non nunc consectetur, eget auctor nisi volutpat. Vestibulum lobortis nunc non ullamcorper faucibus. Nulla convallis justo in turpis aliquet vehicula. Donec eget turpis tempor, ornare magna nec, rhoncus orci. Sed pharetra risus orci, eu facilisis diam interdum id.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas quis tortor ligula. Aenean sagittis ut nibh quis hendrerit. Proin tincidunt scelerisque feugiat. Duis nunc erat, accumsan sed diam in, vulputate rutrum velit. Etiam tincidunt pretium dolor, sit amet bibendum tortor congue pulvinar. Donec convallis mauris non nunc consectetur, eget auctor nisi volutpat. Vestibulum lobortis nunc non ullamcorper faucibus. Nulla convallis justo in turpis aliquet vehicula. Donec eget turpis tempor, ornare magna nec, rhoncus orci. Sed pharetra risus orci, eu facilisis diam interdum id.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas quis tortor ligula. Aenean sagittis ut nibh quis hendrerit. Proin tincidunt scelerisque feugiat. Duis nunc erat, accumsan sed diam in, vulputate rutrum velit. Etiam tincidunt pretium dolor, sit amet bibendum tortor congue pulvinar. Donec convallis mauris non nunc consectetur, eget auctor nisi volutpat. Vestibulum lobortis nunc non ullamcorper faucibus. Nulla convallis justo in turpis aliquet vehicula. Donec eget turpis tempor, ornare magna nec, rhoncus orci. Sed pharetra risus orci, eu facilisis diam interdum id.
</p>
</div>
<div id="right">
<h3>
Right
</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas quis tortor ligula. Aenean sagittis ut nibh quis hendrerit. Proin tincidunt scelerisque feugiat. Duis nunc erat, accumsan sed diam in, vulputate rutrum velit. Etiam tincidunt pretium dolor,
</p>
</div>
<footer id="footer">
<h3>
Footer
</h3>
</footer>
</div>
<div style='clear:both'></div>
</body>
</html>
I'm not entirely sure what you're attempting to do here, but how about this?
http://jsfiddle.net/9X8j2/
Only the CSS changed:
body{
width:100%;
margin:0;
box-shadow: inset 0 0 1px 1px blue;
}
h1{
margin-top:0;
}
#container{
width:100%;
box-shadow: inset 0 0 1px 1px gray;
}
#header{
min-height:12%;
clear:both;
float:left;
width:100%;
box-shadow: inherit;
}
#footer{
min-height:10%;
box-shadow: inherit;
clear:both;
width:100%;
}
#left{
float:left;
box-shadow: inherit;
width:24.5%;
padding:0.5%;
min-height:50%;
}
#main{
float:left;
box-shadow: inherit;
width:48%;
min-height:50%;
padding:0.5%;
}
#right{
float:left;
box-shadow: inherit;
width:24.5%;
padding:0.5%;
min-height:50%;
}
I changed the color of the box shadows to tell them apart a little easier.
Removing most of the height attributes may be what you're looking for.. including removing the CSS on the HTML tag. At least now the container does not overflow the body.
Please let me know if this is at all helpful.
This is how my site looks so far (Note: I'm kinda trying to teach myself how to do the HTML for this site right now. I'll worry about the design later. I know thats now how one should go about designing a site. But whatever)
http://imgur.com/10ZC7
For the header, is this HTML correct/efficient? If not, what is the correct/efficient way to achieve this effect for the header? The header is all one image.
Thanks for any help in advance!
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>CogRobot Studios</title>
<link rel="stylesheet" type="text/css" media="screen" href="stylesheets/screen.css" />
<!--[if IE]>
<link rel="stylesheet" href="stylesheets/ie.css" type="text/css" media="screen, projection">
<![endif]-->
<link rel="stylesheet" type="text/css" href="stylesheets/cogrobot.css" />
</head>
<body>
<div id="wrap" class="container">
<div id="bigheader"> </div>
<div id="header" class="rounded-corners column span-24 last"></div>
<div id="content" class="column span-15 colborder">
<h1>Lorem ipsum dolor sit amet</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam quis risus eu nisi feugiat tincidunt sed vel eros. Maecenas a bibendum tellus. Nunc eu risus at tortor placerat mollis vel et lacus. Ut non massa odio, et commodo sapien. Aliquam erat volutpat. Morbi sed sem at nunc congue venenatis a blandit nisi. Donec eget tortor nisl, vel laoreet nisi. Donec vel posuere ligula. Nullam mi risus, porta lacinia ullamcorper ut, mollis eget arcu. Nam justo dui, dignissim eu dapibus at, placerat vulputate ante. Suspendisse justo tortor, gravida quis scelerisque in, fringilla non eros.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam quis risus eu nisi feugiat tincidunt sed vel eros. Maecenas a bibendum tellus. Nunc eu risus at tortor placerat mollis vel et lacus. Ut non massa odio, et commodo sapien. Aliquam erat volutpat. Morbi sed sem at nunc congue venenatis a blandit nisi. Donec eget tortor nisl, vel laoreet nisi. Donec vel posuere ligula. Nullam mi risus, porta lacinia ullamcorper ut, mollis eget arcu. Nam justo dui, dignissim eu dapibus at, placerat vulputate ante. Suspendisse justo tortor, gravida quis scelerisque in, fringilla non eros.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam quis risus eu nisi feugiat tincidunt sed vel eros. Maecenas a bibendum tellus. Nunc eu risus at tortor placerat mollis vel et lacus. Ut non massa odio, et commodo sapien. Aliquam erat volutpat. Morbi sed sem at nunc congue venenatis a blandit nisi. Donec eget tortor nisl, vel laoreet nisi. Donec vel posuere ligula. Nullam mi risus, porta lacinia ullamcorper ut, mollis eget arcu. Nam justo dui, dignissim eu dapibus at, placerat vulputate ante. Suspendisse justo tortor, gravida quis scelerisque in, fringilla non eros.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam quis risus eu nisi feugiat tincidunt sed vel eros. Maecenas a bibendum tellus. Nunc eu risus at tortor placerat mollis vel et lacus. Ut non massa odio, et commodo sapien. Aliquam erat volutpat. Morbi sed sem at nunc congue venenatis a blandit nisi. Donec eget tortor nisl, vel laoreet nisi. Donec vel posuere ligula. Nullam mi risus, porta lacinia ullamcorper ut, mollis eget arcu. Nam justo dui, dignissim eu dapibus at, placerat vulputate ante. Suspendisse justo tortor, gravida quis scelerisque in, fringilla non eros.
</p>
</div>
<div id="sidebar" class="column span-7 last">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam quis risus eu nisi feugiat tincidunt sed vel eros. Maecenas a bibendum tellus. Nunc eu risus at tortor placerat mollis vel et lacus. Ut non massa odio, et commodo sapien. Aliquam erat volutpat. Morbi sed sem at nunc congue venenatis a blandit nisi.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam quis risus eu nisi feugiat tincidunt sed vel eros. Maecenas a bibendum tellus. Nunc eu risus at tortor placerat mollis vel et lacus. Ut non massa odio, et commodo sapien. Aliquam erat volutpat. Morbi sed sem at nunc congue venenatis a blandit nisi.
</p>
</div>
<div class="rounded-cornersbottom" id="footer">
© 2005, Lorem ipsum dolor sit amet.
<br />
All trademarks and registered trademarks appearing on
this site are the property of their respective owners.
</div>
</div>
</body>
</html>
CSS
#wrap{
position: relative;
top: 150px;
}
body {
background: background: url("../images/header.png");
font-family: Georgia, "Times New Roman", Times, serif;
font-size: small;
margin: 0px;
}
p, ul, li, h1, h2, h3, h4 {
margin: 0;
}
h3 {
margin: 0 0 20px 0;
padding: 0 0 5px 0;
font-weight: bold;
border-bottom: 1px solid #ccc;
}
#bigheader{
background: url("../images/gearheader2.png") no-repeat;
min-height: 347px;
min-width: 1062px;
top: -115px;
right: 0px;
position: absolute;
width: 100%;
z-index: -99;
margin: 0 auto;
}
#header {
width: 950px;
height: 177px;
}
#content{
background: #dbdbdb;
font-size: 105%;
padding: 20px 20px 20px 20px;
margin: 0;
width: 590px;
}
#sidebar {
float: right;
background: #dbdbdb;
font-size: 105%;
padding: 20px 20px 20px 20px;
margin: 0;
}
#footer {
background-color: #838383;
color: #c8c8c8;
text-align: center;
font-size: 90%;
clear: left;
}
h1 {
font-size: 120%;
color: #954b4b;
}
h2 {
font-size: 110%;
}
.slogan {
color: #954b4b;
}
.beanheading {
text-align: center;
line-height: 1.8em;
}
a:link {
color: #b76666;
text-decoration: none;
border-bottom: thin dotted #b76666;
}
a:visited {
color: #675c47;
text-decoration: none;
border-bottom: thin dotted #675c47;
}
.rounded-corners {
-moz-border-radius-topleft: 20px;
-moz-border-radius-topright: 20px;
-webkit-border-top-left-radius: 20px;
-webkit-border-top-right-radius: 20px;
-khtml-border-radius: 20px;
}
.rounded-cornersbottom {
-moz-border-radius-bottomleft: 20px;
-moz-border-radius-bottomright: 20px;
-webkit-border-bottom-left-radius: 20px;
-webkit-border-bottom-right-radius: 20px;
-khtml-border-radius: 20px;
}
Hi i have made the some changes in your HTML due to some errors so now its working fine.
And about the header part i have made few changes as mentioned below :-
#bigheader (i have applied here small circles images rather than your heavy large header image placed in header with positing).
#header (i have made the header completely css based use of border-radius & background color.)
You can see your updated HTML here :-
http://jsfiddle.net/KXGfj/23/
Hey you have used one of the css frameworks,. anyways yes i don't know if this is correct of an efficient way but i usually encapsulate the sub header div inside header div..
in your case something like.:
{(bigheader) {(header)}}
i am experimenting with html and css and trying to figure out how to make this work... I am just trying to make the #menu float to the right of the h1 but be on the same baseline so... but obviously float:right makes it float to top-right? any way to make it float to bottom-right or align with the bottom of the containing div?
here is the html:
<!doctype html>
<html>
<head>
<title>Website.com</title>
<link rel="Stylesheet" href="style.css" type="text/css" />
</head>
<body>
<div>
<h1>Website.com</h1>
<div id="menu">
<ul>
<li>Home</li>
<li>Link1</li>
<li>Link2</li>
<li>Link3</li>
<li>About</li>
</ul>
</div>
</div>
<hr />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur mattis elit et augue pellentesque fermentum semper urna interdum. Nullam egestas augue ut risus molestie mollis ut sed dolor. Curabitur fermentum, lorem sed suscipit euismod, diam urna vulputate sapien, ac venenatis velit eros sed leo. Duis venenatis, metus at scelerisque fringilla, neque arcu dignissim arcu, quis sodales lorem mauris eget tellus. Phasellus fermentum est eget erat pretium mollis. Cras eu nunc dui, sed fermentum libero. Vivamus posuere pellentesque tellus in interdum. Vestibulum eleifend fringilla enim, in vehicula justo tristique a. Aenean congue vestibulum iaculis. Sed tristique interdum lectus, vel aliquam nisi fringilla ac. Mauris ligula nisl, gravida id consequat in, vestibulum at risus. Vivamus vitae massa lorem, vel molestie tellus. Nulla et magna orci. Nunc turpis ipsum, facilisis eget tristique sit amet, scelerisque quis ligula. Mauris in molestie purus. Cras eget magna vel enim imperdiet aliquam.</p>
<p>Vestibulum vel eros lacus, vel viverra magna. Duis mollis nibh ut erat accumsan ut pulvinar ipsum dapibus. Aliquam vehicula tempus fermentum. Morbi ut turpis sem, pretium sodales libero. Vestibulum dapibus, ligula in molestie scelerisque, lacus est aliquam elit, ut vulputate sapien nisl vitae elit. Cras pulvinar mi nisl. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin in est orci. Ut rutrum lobortis quam vitae commodo. Maecenas dapibus aliquam ante eget mattis. Proin justo eros, bibendum quis scelerisque eget, fermentum eu purus. Vivamus viverra ligula a dolor iaculis ullamcorper. Aliquam erat volutpat. Nunc libero nulla, sodales at dictum vel, tempus quis est.</p>
<p>Nullam pharetra tincidunt lectus ac sollicitudin. Duis in venenatis eros. Phasellus malesuada quam vel sapien ultricies tincidunt. Duis condimentum posuere semper. Vivamus eleifend libero eget ligula egestas adipiscing. Proin dapibus leo non urna pellentesque convallis. Suspendisse massa leo, semper vitae tincidunt at, mattis et sapien. Maecenas consequat hendrerit odio et feugiat. Sed dignissim massa a leo sollicitudin imperdiet consequat purus vehicula. Mauris sit amet nulla a turpis porta accumsan. Morbi interdum pellentesque massa, vel accumsan massa aliquam quis. Sed sed ligula neque. In hac habitasse platea dictumst. Curabitur vehicula scelerisque ligula non tincidunt.</p>
<hr />
<p id="footer">Use of this site constitutes acceptance of our User Agreement and Privacy Policy. © 2010 Website.com. All rights reserved.</p>
</body>
</html>
and here is the css:
body
{
font-family: verdana, sans-serif;
min-width: 800px;
}
h1
{
display: inline;
font-variant: small-caps
}
h1 a
{
color: #090;
text-decoration: none;
}
h1 a:hover
{
color: #0A0;
}
#menu
{
float: right;
display: inline;
margin: 0;
padding: 0;
font-variant: small-caps;
}
#menu ul
{
margin: 0;
padding-left: 0;
float: left;
font-weight: bold;
}
#menu ul li
{
float: left;
display: inline;
}
#menu ul li a
{
color: #090;
background-color: #F3F3F3;
padding: 2px 6px 4px 6px;
text-decoration: none;
}
#menu ul li a:hover
{
font-weight: bolder;
color: #0A0;
background-color: #F3F3F3;
border-bottom: 4px solid #0A0;
padding-bottom: 0;
}
#footer
{
text-align: center;
font-size: x-small;
}
here is what is looks like now:
thanks for help!
I haven't looked into this much, but if you set the containing div's position: relative, you can just make the ul position: absolute; bottom: 0; right: 0 and it should go where you want it.
Example:
div {position: relative}
ul {position: absolute; bottom: 0; right: 0}
li {float: left; list-style: none}
--
<div>
<h1>Header</h1>
<ul>
<li>One</li>
<li>Two</li>
<li>Etc...</li>
</ul>
</div>
There's no property floating it bottom-right or top-right. But without changing your html structure you can just add a top margin to your menu div
#menu {
....
margin-top:20px;
}
You can use table:
<table id="title">
<tr>
<td>
<h1>Website.com</h1>
</td>
<td>
<div id="menu">
<ul>
<li>Home</li>
<li>Link1</li>
<li>Link2</li>
<li>Link3</li>
<li>About</li>
</ul>
</div>
</td>
</tr>
</table>
And add this into your CSS file:
#title
{
width:100%;
}
#title td+td
{
text-align:right;
vertical-align:center;
}
Vertical align is default set to center, so you need not to set it.
Or if you don't want to use table, you can just set padding-top:10px; into #menu ul.