This question already has answers here:
Is there a way to make a child DIV's width wider than the parent DIV using CSS?
(15 answers)
Closed 7 years ago.
I'm trying to build a web template in which the main content resides in a div called #content. #content is 90% the width of its parent container, #wrapper, and has a max-width of 1200px. But I also want to have the occasional section that spans the entire width of the browser window. (I can't just apply the 90% width rule to each regular section, because sometimes there will be a sidebar that exists outside of #content, and the sidebar and #content need to have the 90% width applied to them as a whole.)
How do I do this? I played around with negative margins, but I couldn't figure it out.
<html>
<head>
<title></title>
<meta charset="utf-8" />
<style type="text/css">
body {
background-color: #DDD;
}
#content {
width: 90%;
max-width: 1200px;
margin: 0 auto;
background-color: #FFF;
padding: 1em;
}
.full-width {
background-color: #333;
color: #EEE;
padding: 1em;
margin: 0 -10%; /* obviously this doesn't work */
}
</style>
</head>
<body>
<div id="wrapper">
<div id="content">
<section class="regular">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vitae est ut nunc iaculis luctus vitae in risus. Proin mollis facilisis ligula, sed elementum odio consequat quis. Sed at diam urna, vulputate egestas dui. Aenean vehicula fringilla dapibus. Fusce aliquet rhoncus leo, vel tempus mi auctor ultricies.</p>
</section> <!-- regular -->
<section class="full-width">
<p>This section should extend all the way to the sides of the browser window. This section should extend all the way to the sides of the browser window. This section should extend all the way to the sides of the browser window. This section should extend all the way to the sides of the browser window.</p>
</section> <!-- regular -->
<section class="regular">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vitae est ut nunc iaculis luctus vitae in risus. Proin mollis facilisis ligula, sed elementum odio consequat quis. Sed at diam urna, vulputate egestas dui. Aenean vehicula fringilla dapibus. Fusce aliquet rhoncus leo, vel tempus mi auctor ultricies.</p>
</section> <!-- regular -->
</div> <!-- content -->
</div> <!-- wrapper -->
</body>
When you are wrapping content within an element constrained by margin limits, then you must compensate for this space "taken" from children of it.
If your parent div is 90% width of the body, it means all 100% children will take full width of that 90% not 100%, so how to fix this?
Those children must be 110% width and take negative margin.
Something like:
.content {
width: 90%;
margin: 0 auto;
}
.offmargins {
width: 110%;
margin-left: -6%;
background: #ccc;
padding: 1%;
}
Here is an example:
jQuery(document).ready(function(){
jQuery(window).on('resize', adapt);
adapt();
});
function adapt() {
jQuery('.full-width').css({
width: jQuery(window).width(),
marginLeft: '-6.2%'
});
}
#content {
width: 90%;
margin: 0 auto;
max-width: 1200px;
}
section {
width: 90%;
margin: 0 auto;
}
.full-width {
background: #ccc;
padding: .5em 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
<div id="content">
<section class="regular">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vitae est ut nunc iaculis luctus vitae in risus. Proin mollis facilisis ligula, sed elementum odio consequat quis. Sed at diam urna, vulputate egestas dui. Aenean vehicula fringilla dapibus. Fusce aliquet rhoncus leo, vel tempus mi auctor ultricies.</p>
</section> <!-- regular -->
<section class="full-width">
<p>This section should extend all the way to the sides of the browser window. This section should extend all the way to the sides of the browser window. This section should extend all the way to the sides of the browser window. This section should extend all the way to the sides of the browser window.</p>
</section> <!-- regular -->
<section class="regular">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vitae est ut nunc iaculis luctus vitae in risus. Proin mollis facilisis ligula, sed elementum odio consequat quis. Sed at diam urna, vulputate egestas dui. Aenean vehicula fringilla dapibus. Fusce aliquet rhoncus leo, vel tempus mi auctor ultricies.</p>
</section> <!-- regular -->
</div> <!-- content -->
</div> <!-- wrapper -->
Another approach without JS:
#content {
width: 90%;
margin: 0 auto;
max-width: 1200px;
}
section {
width: 90%;
margin: 0 auto;
}
.full-width {
background: #ccc;
padding: .5em 0;
position: relative;
width: 100vw;
left: calc(-50vw + 50%);
}
<div id="wrapper">
<div id="content">
<section class="regular">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vitae est ut nunc iaculis luctus vitae in risus. Proin mollis facilisis ligula, sed elementum odio consequat quis. Sed at diam urna, vulputate egestas dui. Aenean vehicula fringilla dapibus. Fusce aliquet rhoncus leo, vel tempus mi auctor ultricies.</p>
</section> <!-- regular -->
<section class="full-width">
<p>This section should extend all the way to the sides of the browser window. This section should extend all the way to the sides of the browser window. This section should extend all the way to the sides of the browser window. This section should extend all the way to the sides of the browser window.</p>
</section> <!-- regular -->
<section class="regular">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vitae est ut nunc iaculis luctus vitae in risus. Proin mollis facilisis ligula, sed elementum odio consequat quis. Sed at diam urna, vulputate egestas dui. Aenean vehicula fringilla dapibus. Fusce aliquet rhoncus leo, vel tempus mi auctor ultricies.</p>
</section> <!-- regular -->
</div> <!-- content -->
</div> <!-- wrapper -->
Is there some reason why you can't have two different sized sections? It seems to me that you just need to have two containers - one that is restricted to 90%/1200px and one that isnt:
section {
width: 90%;
max-width: 1200px;
margin: 0 auto;
background-color: #FFF;
padding: 1em;
box-sizing:border-box;
}
section.full-width {
background-color: #333;
color: #EEE;
width: 100%;
max-width: inherit;
}
See: http://jsfiddle.net/t9wuapb9/
or the following snippet:
html, body {
background-color: #DDD;
margin:0;
}
#wrapper, #content {
width: 100%;
}
section {
width: 90%;
max-width: 1200px;
margin: 0 auto;
background-color: #FFF;
padding: 1em;
box-sizing:border-box;
}
section.full-width {
background-color: #333;
color: #EEE;
width: 100%;
max-width: inherit;
}
<div id="wrapper">
<div id="content">
<section class="regular">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vitae est ut nunc iaculis luctus vitae in risus. Proin mollis facilisis ligula, sed elementum odio consequat quis. Sed at diam urna, vulputate egestas dui. Aenean vehicula fringilla dapibus. Fusce aliquet rhoncus leo, vel tempus mi auctor ultricies.</p>
</section>
<section class="full-width">
<p>This section should extend all the way to the sides of the browser window. This section should extend all the way to the sides of the browser window. This section should extend all the way to the sides of the browser window. This section should extend all the way to the sides of the browser window.</p>
</section>
<section>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vitae est ut nunc iaculis luctus vitae in risus. Proin mollis facilisis ligula, sed elementum odio consequat quis. Sed at diam urna, vulputate egestas dui. Aenean vehicula fringilla dapibus. Fusce aliquet rhoncus leo, vel tempus mi auctor ultricies.</p>
</section>
</div>
</div>
I'm sure there's a simple solution to this, but I've been beating my head up against it for an hour or two and not making much progress.
Basically, I've got a wrapper div (testwrap_outer) containing a secondary wrapper div (testwrap_inner) that holds together an image thumbnail div (test1), and a caption div (test2).
I need the caption div (test2) to scale height according to its content, the secondary wrapper (testwrap_inner) to contain that div and float next to any other secondary wrapper divs, and the main wrapper (testwrap_outer) to contain all of them.
I apologize for doing such a poor job explaining, so I've provided a picture to illustrate what I mean here. Here is a fiddle.
HTML
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi congue mi at aliquet blandit. Praesent tristique, dui sit amet iaculis mollis, nunc elit semper nisi, vitae finibus nulla dui in enim. In lacinia aliquam tempus. Nunc sollicitudin ac massa non porttitor. Maecenas quam urna, semper ut mauris id, lacinia consequat libero. Vivamus neque diam, vestibulum a est eget, aliquam tempus magna. Morbi sed tellus lobortis, condimentum mi id, finibus felis.</p>
<div class=testwrap_outer>
<div class=testwrap_inner>
<!-- THUMBNAIL IMAGE -->
<div class=test1>
<img src="http://i.imgur.com/5KObDyq.jpg">
</div>
<!-- THUMBNAIL CAPTION -->
<div class=test2><b>TEST2</b>
<br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi congue mi at aliquet blandit. Praesent tristique, dui sit amet iaculis mollis, nunc elit semper nisi, vitae finibus nulla dui in enim.</div>
</div>
<div class=testwrap_inner>
<!-- THUMBNAIL IMAGE -->
<div class=test1>
<img src="http://i.imgur.com/5KObDyq.jpg">
</div>
<!-- THUMBNAIL CAPTION -->
<div class=test2><b>TEST2</b>
<br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi congue mi at aliquet blandit. Praesent tristique, dui sit amet iaculis mollis, nunc elit semper nisi, vitae finibus nulla dui in enim.</div>
</div>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi congue mi at aliquet blandit. Praesent tristique, dui sit amet iaculis mollis, nunc elit semper nisi, vitae finibus nulla dui in enim. In lacinia aliquam tempus. Nunc sollicitudin ac massa non porttitor. Maecenas quam urna, semper ut mauris id, lacinia consequat libero. Vivamus neque diam, vestibulum a est eget, aliquam tempus magna. Morbi sed tellus lobortis, condimentum mi id, finibus felis.</p>
CSS
body {
background: #cccccc;
font-family: Arial, Helvetica, sans-serif;
min-width: 900px;
}
.testwrap_outer {
border: 1px solid red;
position: relative;
}
.testwrap_inner {
border: 1px solid blue;
float: left;
margin: 5px;
padding: 4px;
width: 296px;
}
.test1 {
border: 1px solid purple;
position: relative;
float: left;
opacity: 1.0;
width: 80px;
height: 80px;
overflow: hidden
}
.test1 img {
height: 100%;
}
.test1 img:hover {
opacity: 0.6;
}
.test2 {
border: 0px solid green;
position: relative;
float: left;
text-align: justify;
text-justify: inter-word;
padding: 6px;
width: 200px;
}
Any help is much appreciated.
Add inside testwrap_outer an empty div with clear:both style. This will tidy up the layout and make the outer div behave as a container supposed to be behave.
Updated fiddle:
http://jsfiddle.net/a3hz8dss/1/
just include overflow:hidden in your class testwrap_outer, also there is no need of position:relative in your code!!
CSS:
.testwrap_outer{
border: 1px solid red;
overflow:hidden;
}
Fiddle Demo
I would like to know if for the demo index page of this site url, I can prevent the text from overflowing or let say use optional scrolling bar when the text goes over the bottom of the blue box? I would like the layout to be similar to this 'production' site (with server stats visits).
Can I do this using html 5? Should I include div so to limit text overflow under a certain screen resolution. Please find the html and style sheet code used (thanks for the author of this design and also Aayushi Jain who has help me with a few style sheet adjustments from another question here on this site).
style sheet
html {
overflow-y: scroll; }
div#wrapper {
width:90%;
margin: 10px auto;
position: relative;}
header#site {
height:80px;
padding:10px;
background-color:#0033FF;
margin:10px 0px;
text-align:center; }
footer {
font-size:0.8em;
clear:both;}
footer .col {
width:30%;
margin:1% 1.1%;
padding:2px;
height:100px;
background-color:#F63;
float:left; }
nav {
background-color:#0033FF;
position: absolute;
left: 0;
bottom: 0;
top: 110px;
width: 29%; }
nav ul {
list-style:none;}
nav ul li a {
display: block;
background-color:#CCC;
margin-right: 20px;
width: 110px;
line-height:1.5em;
text-align: center;
text-decoration: none;
color: #000; }
nav ul li a:hover {
color: #fff;
background-color:#39C; }
article {
background-color:#0066FF;
float:right;
width:69%;
margin-right:10px;
height:50%;
overflow-y:scroll;
}
article header {
background-color:#F90;
padding:15px; }
section#abstract {
font-size:1.09em;
font-style:italic;
margin:10px 0px;
text-align:justify;
padding:5px 80px; }
section#main {
font-size:1em;
padding:20px;
text-align:justify;
float: left;
margin: 0;
padding: 0;
display: inline; }
.ads {
height:50%;
width:30%;
background-color:#0033FF;
margin-bottom:1%;
float:left;}
.ads p:first-child {
padding:15px;
font-size:2em;}
.ads p:last-child {
padding-left:15px;
font-size:1em;color:#CCC;}
the html file
<!DOCTYPE html>
<!-- saved from url=(0064)http://toytic.com/class/examples/e808_html5_Header2NavAside.html -->
<html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<title>Web site</title>
<link href="style.css" rel="stylesheet" />
<style>
</style>
<!-- Tell IE we are using html5 + CSS -->
<!--[if IE]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
</head>
<body>
<div id="wrapper">
<header id="site">
<h1>WEBSITE</h1>
</header>
<article>
<header>
<h2>This is the article header</h2>
<time datetime="25-11-2010" pubdate="">25th November 2010</time>
</header>
<section id="abstract">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam et orci sed neque tincidunt dictum nec at lacus. Fusce feugiat sagittis ligula ac aliquam. Integer ut sodales justo. Etiam ultrices cursus iaculis. Suspendisse bibendum. </p>
</section>
<section id="main">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ac velit mauris. Nulla cursus pretium dapibus. Fusce at faucibus mi. Etiam ac nisi condimentum quam vulputate euismod. Nunc viverra consectetur tempor. Praesent rutrum diam in leo lacinia sit amet volutpat leo tempus. Donec sodales, velit et viverra imperdiet, velit leo placerat libero, fringilla scelerisque justo sapien sit amet sapien. Donec blandit tellus at mi hendrerit hendrerit. Sed suscipit sagittis sodales. Etiam sagittis, tortor quis sagittis laoreet, erat nibh mollis sem, ut tristique felis augue non metus. </p>
<p>Etiam in gravida mi. Maecenas placerat, justo vel gravida egestas, odio sem dictum justo, eget volutpat massa augue in augue. Sed tempus sem a nulla eleifend aliquet aliquet diam pharetra. Proin sit amet imperdiet est. Cras vitae felis in nulla tristique porttitor ut sit amet neque. Quisque sed nisi quam. Aliquam erat volutpat. Nullam dignissim augue odio. Nam sit amet ipsum arcu, id rutrum felis. Phasellus velit mauris, dictum eget tincidunt eget, condimentum eget risus. Proin nibh nulla, sagittis et feugiat in, luctus quis velit. Aenean lobortis mi ut odio accumsan adipiscing. Nulla quis ipsum magna. Suspendisse auctor mauris eu mi cursus ultrices. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas gravida vulputate leo, consectetur porta sem euismod nec. Donec et dolor lectus, vel cursus massa. Morbi eu dictum arcu. Fusce luctus porttitor neque, sed eleifend orci tristique convallis. </p>
</section>
</article>
<nav>
<ul>
<li>About</li>
<li>Service</li>
<li>Contact</li>
</ul>
</nav>
<footer>
<div class="col">
<h4>Contact</h4>
<adress>
<p>Janet Griffith from Public Relations</p>
<p>Jil Sanders, webmaster</p>
</adress></div>
<div class="col">
<h4>Sites of interest</h4>
<aside>
<p>Site A</p>
<p>Another one</p>
</aside>
</div>
<div class="col">
<h4>Legal stuff</h4>
<p>Copyright</p>
<p>Terms of Service</p>
</div>
</footer>
</div>
</body></html>
thanks
Pascal
If you don't want to see the scroll bar then use overflow: hidden or overflow: auto.
Now if you want the header part to be static then put your section main and abstract in a div and make its height: 500px (or something you want) but make it fix and then use overflow: hidden in the newly mad div if you don't want to show the overflow part or use overflow: auto if you want to show the overflow part but not the scroll bar.
I'm in trouble with the following html layout.
I know that there are other questions about absolute positioning and sticky footer, I tried a lot of solutions but I didn't make this work, so I tried to post the whole layout html code to see if someone can find a solution.
I used this StickyFooter solution.
The problem is the right bar.
It shoud stay fixed at 25px from the footer, but, as you see, if the bar content grows, the content goes down over the footer and outside the bar bottom border.
Obviously I would the content stay inside the bar, causing the bar to grown and pushing the footer down.
<!doctype html>
<head>
<style type="text/css">
/* Sticky Footer */
{ margin: 0; }
html, body, form { height: 100%; }
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -50px; /* the bottom margin is the negative value of the footer's height */
}
#footerPage, #divPush
{
height: 50px; /* .push must be the same height as .footer */
}
/* End / Sticky Footer */
body { background-color:#000; width:960px; margin:0 auto; position:relative; font-family:Tahoma, Verdana; }
div.wrapper { background-color:#fff; position:relative; }
#headerPage { }
#divHeaderImg { height:100px; }
#navPage { height:30px; line-height: 30px; font-size:16px; background-color:#90bfe7; padding:0 10px; position:relative; overflow:hidden; vertical-align: middle; }
#divSubMenu { background-color: #90BFE7; line-height: 28px; padding: 10px; vertical-align: middle; }
#sectionBar {
z-index:1000;
position:absolute; right:10px; top:13px; width:200px; bottom:75px; /* footer height + 25px */
border:solid 2px #90bfe7; background-color:#ffffff;
padding:15px 10px;
}
#footerPage { position:relative; padding:10px; background-color:#90bfe7; color:#000; }
#sectionPage { padding:12px 10px 10px 10px; width:700px; }
</style>
</head>
<body>
<div class="wrapper">
<div id="sectionBar">
<div id="divBarContent">
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc blandit aliquam metus non imperdiet. Vivamus eu velit a velit pellentesque faucibus. Donec massa erat, fermentum vel laoreet non, commodo sit amet nulla. In placerat, magna ac fringilla varius, justo ante rutrum magna, vel interdum nisi eros vel nibh. Cras aliquet metus tristique velit vulputate mollis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque eu dignissim nisi.
Nulla vitae ante magna, sed pharetra nunc. Donec tincidunt dignissim mi ac tempus. Fusce ut ante tellus, et egestas libero. Donec facilisis, tellus at sagittis iaculis, arcu orci posuere elit, a luctus odio nunc ac sem. Etiam at erat et neque tristique eleifend. Curabitur blandit turpis sit amet tortor tempor eu euismod ligula sollicitudin. Suspendisse non sapien eu nibh faucibus feugiat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
Integer quam turpis, porttitor nec congue convallis, fringilla sit amet purus. Donec at elit mauris. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec ligula tellus, rhoncus eget faucibus vitae, bibendum vel arcu. Pellentesque ante lectus, sodales at interdum sit amet, sollicitudin cursus quam. Fusce eget orci vel eros scelerisque dictum. Cras facilisis, metus vitae venenatis aliquet, nibh sem blandit mi, sit amet viverra massa ipsum ut quam. Vivamus vitae nunc eget justo pellentesque mollis vel non justo. Mauris tempus mattis rutrum. Donec nec viverra nulla. Cras commodo felis sit amet nulla fringilla mollis.
</div>
</div>
</div>
<div id="headerPage">
<div id="navPage">menu</div>
<div id="divHeaderImg"></div>
<div id="divSubMenu">sub menu</div>
</div>
<div id="sectionPage">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc blandit aliquam metus non imperdiet. Vivamus eu velit a velit pellentesque faucibus. Donec massa erat, fermentum vel laoreet non, commodo sit amet nulla. In placerat, magna ac fringilla varius, justo ante rutrum magna, vel interdum nisi eros vel nibh. Cras aliquet metus tristique velit vulputate mollis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque eu dignissim nisi.
Nulla vitae ante magna, sed pharetra nunc. Donec tincidunt dignissim mi ac tempus. Fusce ut ante tellus, et egestas libero. Donec facilisis, tellus at sagittis iaculis, arcu orci posuere elit, a luctus odio nunc ac sem. Etiam at erat et neque tristique eleifend. Curabitur blandit turpis sit amet tortor tempor eu euismod ligula sollicitudin. Suspendisse non sapien eu nibh faucibus feugiat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc blandit aliquam metus non imperdiet. Vivamus eu velit a velit pellentesque faucibus. Donec massa erat, fermentum vel laoreet non, commodo sit amet nulla. In placerat, magna ac fringilla varius, justo ante rutrum magna, vel interdum nisi eros vel nibh. Cras aliquet metus tristique velit vulputate mollis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque eu dignissim nisi.
</div>
<div id="divPush"></div>
</div>
<div id="footerPage">footer</div>
</body>
</html>
Leave your HTML as-is, change your CSS to this:
/* Sticky Footer */
{ margin: 0; }
html, body, form { height: 100%; }
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -50px; /* the bottom margin is the negative value of the footer's height */
clear:both;
}
#footerPage, #divPush
{
height: 50px; /* .push must be the same height as .footer */
}
/* End / Sticky Footer */
body { background-color:#000; width:960px; margin:0 auto; position:relative; font-family:Tahoma, Verdana; }
div.wrapper { background-color:#fff; position:relative; }
#headerPage { width:960px;position:absolute;top:0;left:0; }
#divHeaderImg { height:100px; }
#navPage { height:30px; line-height: 30px; font-size:16px; background-color:#90bfe7; padding:0 10px; position:relative; overflow:hidden; vertical-align: middle;width:940px; }
#divSubMenu { background-color: #90BFE7; line-height: 28px; padding: 10px; vertical-align: middle; }
#sectionBar {
z-index:1000;
position:relative; float:right;right:10px; top:13px; width:200px; bottom:75px; /* footer height + 25px */
border:solid 2px #90bfe7; background-color:#ffffff;
padding:15px 10px;
}
#divPush {clear:both;}
#footerPage { position:relative; padding:10px; background-color:#90bfe7; color:#000; }
#sectionPage { padding:12px 10px 10px 10px; width:700px;padding-top:190px; }
P.S. this is a bad question.
I am going to give you the benefit of the doubt and say you're working for an unreasonable client or with some uneditable HTML markup and you need to do some sort of hack to get this presentable.
Otherwise, there's no excuse for taking this approach.
I made some changes on the code you posted, I hope that helps !`
<style type="text/css">
/* Sticky Footer */
{ margin: 0; }
html, body, form { height: 100%; }
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -50px; /* the bottom margin is the negative value of the footer's height */
}
#footerPage
{
height: 50px; /* .push must be the same height as .footer */
}
#divPush {height: 800px; }
/* End / Sticky Footer */
body { background-color:#000; width:960px; margin:0 auto; position:relative; font-family:Tahoma, Verdana; }
div.wrapper { background-color:#fff; position:relative; }
#headerPage { }
#divHeaderImg { height:100px; }
#navPage { height:30px; line-height: 30px; font-size:16px; background-color:#90bfe7; padding:0 10px; position:relative; overflow:hidden; vertical-align: middle; }
#divSubMenu { background-color: #90BFE7; line-height: 28px; padding: 10px; vertical-align: middle; }
#sectionBar {
z-index:1000;
right:10px; top:13px; width:200px; /* footer height + 25px */
border:solid 2px #90bfe7; background-color:#ffffff;
padding:15px 10px;
display:inline;
float:right;
height: 100%;
}
#footerPage { position:relative; padding:10px; background-color:#90bfe7; color:#000; }
#sectionPage { padding:12px 10px 10px 10px; width:700px; }
</style>`
I might be confused on what you are looking for, but why not add overflow:auto under the id=sectionBar? That way if the content if greater than your box it will add a scroll bar and not flow over the footer. Again, maybe I am missing the question or the end result you are looking for.
#lorenzo.macon is right - you need to avoid using position: absolute, and use a float instead.
One of your issues was also that your footer needs to have the same total height as the negative margin of the wrapper; it looks like perhaps you weren't accounting for padding and/or borders in the equation.
The supplied code includes the sidebar second in the code, so that if it were not floated (e.g., for a responsive layout), it would come later. But you can actually have it either way, and it should work.
<!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" xml:lang="en">
<head>
<style type="text/css">
/* LAYOUT */
/* Original Sticky Footer: http://ryanfait.com/sticky-footer/ */
* { margin: 0 }
html, body, .wrapper {
height: 100%;
}
body {
margin: 0 auto;
position: relative;
}
.wrapper {
position: relative;
min-height: 100%;
height: auto !important;
margin: 0 auto -70px; /* bottom margin = -1 x ( #footerPage height + padding + border ) */
}
#footerPage, #divPush {
height: 50px; /* .push must be the same height as .footer */
padding: 10px; /* must have same padding! */
}
#divPush {
clear: both;
}
/* End / Sticky Footer */
#sectionPage {
width: 70%;
float: left;
}
/*
#sectionBar has percentage for L+R padding, so can calculate w/ #sectionPage
and ems for T+B padding so can relate to typography. This is less important.
*/
#sectionBar {
width: 20%;
padding: 2em 5%;
margin-left: -1px; /* IE7 needed this */
float: right;
display: inline; /* Fix for IE5/6 doubled float margin issues - see http://www.positioniseverything.net/explorer/doubled-margin.html */
}
/* VISUAL STYLE separated for clarity */
body {
background: #000;
max-width: 960px; /* use max-width for flexible layouts */
font-family: Tahoma, Verdana;
}
div.wrapper { background: #fff }
#divHeaderImg { height: 100px; }
#navPage { background: #90bfe7; padding: .5em; }
#divSubMenu {
background: #90bfe7;
padding: .5em;
}
#sectionBar {
background: #fcf;
}
#footerPage {
position: relative;
background: #90bfe7;
}
#content {
background: #ffc;
padding: 12px 10px 10px 10px;
}
</style>
</head>
<body>
<div class="wrapper">
<div id="sectionPage">
<div id="headerPage">
<div id="navPage">menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu </div>
<div id="divHeaderImg"></div>
<div id="divSubMenu">sub menu</div>
</div><!-- #headerPage -->
<div id="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc blandit aliquam metus non imperdiet. Vivamus eu velit a velit pellentesque faucibus. Donec massa erat, fermentum vel laoreet non, commodo sit amet nulla. In placerat, magna ac fringilla varius, justo ante rutrum magna, vel interdum nisi eros vel nibh. Cras aliquet metus tristique velit vulputate mollis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque eu dignissim nisi.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc blandit aliquam metus non imperdiet. Vivamus eu velit a velit pellentesque faucibus. Donec massa erat, fermentum vel laoreet non, commodo sit amet nulla. In placerat, magna ac fringilla varius, justo ante rutrum magna, vel interdum nisi eros vel nibh. Cras aliquet metus tristique velit vulputate mollis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque eu dignissim nisi.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc blandit aliquam metus non imperdiet. Vivamus eu velit a velit pellentesque faucibus. Donec massa erat, fermentum vel laoreet non, commodo sit amet nulla. In placerat, magna ac fringilla varius, justo ante rutrum magna, vel interdum nisi eros vel nibh. Cras aliquet metus tristique velit vulputate mollis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque eu dignissim nisi.
</div>
</div><!-- #sectionPage -->
<div id="sectionBar">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc blandit aliquam metus non imperdiet. Vivamus eu velit a velit pellentesque faucibus. Donec massa erat, fermentum vel laoreet non, commodo sit amet nulla. In placerat, magna ac fringilla varius, justo ante rutrum magna, vel interdum nisi eros vel nibh. Cras aliquet metus tristique velit vulputate mollis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque eu dignissim nisi.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc blandit aliquam metus non imperdiet. Vivamus eu velit a velit pellentesque faucibus. Donec massa erat, fermentum vel laoreet non, commodo sit amet nulla. In placerat, magna ac fringilla varius, justo ante rutrum magna, vel interdum nisi eros vel nibh. Cras aliquet metus tristique velit vulputate mollis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque eu dignissim nisi.
</div>
<div id="divPush"></div>
</div><!-- .wrapper -->
<div id="footerPage">footer</div>
</body>
</html>
You can't make the bar absolute with top and bottom "margins" and expect it to grow beyond the size you're telling it to be.
Below is a slightly different approach which looks very much (exactly?) like yours. I didn't test in other browsers than firefox 8 so I can't guarantee that it's bulletproof, but this should at least give you an alternative idea:
<!doctype html>
<head>
<style type="text/css">
/* Sticky Footer */
{ margin: 0; }
html, body, form { height: 100%; }
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -50px; /* the bottom margin is the negative value of the footer's height */
}
#footerPage, #divPush
{
height: 50px; /* .push must be the same height as .footer */
}
/* End / Sticky Footer */
body { background-color:#000;
width:960px;
margin:0 auto;
position:relative;
font-family:Tahoma, Verdana;
}
div.wrapper {
background-color:#fff; position:relative;
border:2px solid pink;
}
#headerPage {
border:2px solid green;
}
#divHeaderImg { height:100px; }
#navPage {
height:30px;
line-height: 30px;
font-size:16px;
background-color:#90bfe7;
padding:0 10px;
/*
position:relative;
overflow:hidden;
*/
vertical-align: middle;
border:2px solid lime;
}
#leftBox {
border:2px solid yellow;
float;left;
}
#divSubMenu {
border:2px solid darkgreen;
background-color: #90BFE7;
line-height: 28px;
padding: 10px;
vertical-align: middle;
}
#divBarContent {
border:1px solid firebrick;
}
#divBarContent div {
border:1px solid cyan;
}
#sectionBar {
z-index:1000;
/*
position:absolute; right:10px; top:13px; width:200px; bottom:75px;
*/
border:solid 2px #90bfe7; background-color:#ffffff;
padding:15px 10px;
float:right;
margin:0px 10px 25px 0px;
width:200px;
/*
*/
}
/*
*/
/* footer height + 25px */
#footerPage { position:relative; padding:10px; background-color:#90bfe7; color:#000; }
#sectionPage { padding:12px 10px 10px 10px; width:700px; }
</style>
</head>
<body>
<div class="wrapper">
<div id="sectionBar">
<div id="divBarContent">
<div>
# Update from 2.0-BETA3 to 2.0-BETA4
## XML Driver <change-tracking-policy /> element demoted to attribute
We changed how the XML Driver allows to define the change-tracking-policy. The working case is now:
# Update from 2.0-BETA2 to 2.0-BETA3
## Serialization of Uninitialized Proxies
As of Beta3 you can now serialize uninitialized proxies, an exception will only be thrown when
trying to access methods on the unserialized proxy as long as it has not been re-attached to the
EntityManager using `EntityManager#merge()`. See this example:
The Collection interface in the Common package has been updated with some missing methods
that were present only on the default implementation, ArrayCollection. Custom collection
implementations need to be updated to adhere to the updated interface.
</div>
</div>
</div>
<div id="leftBox">
<div id="headerPage">
<div id="navPage">menu</div>
<div id="divHeaderImg"></div>
<div id="divSubMenu">sub menu</div>
</div>
<div id="sectionPage">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc blandit aliquam metus non imperdiet. Vivamus eu velit a velit pellentesque faucibus. Donec massa erat, fermentum vel laoreet non, commodo sit amet nulla. In placerat, magna ac fringilla varius, justo ante rutrum magna, vel interdum nisi eros vel nibh. Cras aliquet metus tristique velit vulputate mollis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque eu dignissim nisi.
Nulla vitae ante magna, sed pharetra nunc. Donec tincidunt dignissim mi ac tempus. Fusce ut ante tellus, et egestas libero. Donec facilisis, tellus at sagittis iaculis, arcu orci posuere elit, a luctus odio nunc ac sem. Etiam at erat et neque tristique eleifend. Curabitur blandit turpis sit amet tortor tempor eu euismod ligula sollicitudin. Suspendisse non sapien eu nibh faucibus feugiat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc blandit aliquam metus non imperdiet. Vivamus eu velit a velit pellentesque faucibus. Donec massa erat, fermentum vel laoreet non, commodo sit amet nulla. In placerat, magna ac fringilla varius, justo ante rutrum magna, vel interdum nisi eros vel nibh. Cras aliquet metus tristique velit vulputate mollis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque eu dignissim nisi.
<br> <br> <br> <br> <br> <br> moo
</div>
<div id="divPush"></div>
</div>
<div style="clear:both;">
</div>
<div id="footerPage">footer</div>
</body>
</html>
You can probably use position:relative; instead because absolute will make your elements go behind it unless you use z-index: then the elements will go on top of it. Look at this sticky footer if you really have to build it this way
http://www.cssstickyfooter.com/using-sticky-footer-code.html
Edit:
I'm not sure what you are trying to accomplish really. Because the current way the HTML built isn't really semantic for what you're doing. Since sectionBar is a side bar it shouldn't be above your main content it should be structured after after your sectionPage content. You should also be using floats instead of position. That way you don't have to deal with z-index and content going behind. The page would also expand correctly using float but you would have to make use of a .clearfix hack for IE mainly.
There's also almost never a case where you have to build something a certain way. The only time that's a case is if your using a CMS or per-existing old code. So if your not getting an effect you want then you need to look at your Semantic structure of your code.
I saw in one of your comments that this is based on a photoshop layout which leads me to believe you are building this from scratch and means you have complete control over the HTML. So if that's the case then saying it has to be built this way is unacceptable.
It is solvable. You can do it by floating #sectionBar as #lorenzo.marcon mentioned.
You'd need to move #sectionBar to right before#sectionPage` and wrap both elements. I've also added a clearfix to the wrapper.
See this fiddle for the solution.
I'd remove position:absolute; and add a float:right; in #sectionBar definition.
Then add a <br clear="all" /> immediately before closing the div with class "wrapper".
Then you will have to reposition your elements. Work on margins and paddings to get the desired result.
The problem you describe is caused by position:absolute behaviour. In fact, with absolute positioning, the element is removed from the natural flow of the html, and as the name suggests, absolutely positioned :) Thus, the other elements (e.g. footer) go "under" it.
I am currently struggling with a problem, that I can't find the reason.
Currently my anchor hover states are not displaying properly in Firefox and IE. The interesting this is that when I explore with firebug to see if the style is applied, it is there but the browser is not showing it. This is really driving me nuts!
The link is contained in a H1 tag. The same style is applied to the span username, but it is displayed perfectly.
Here is the code, I hope you can solve the mystery!
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<tile> test</title>
</head>
<body>
<div id="content1" class="boxContainer">
<ul id="leggi-tab-content">
<li class="anteprimaG">
<div class="ombraCopertinaG ">
<img src="images/copertina-grande.gif" width="118" height="168" alt="Lorem ipsum dolor sit amet...">
<div class="fantascienzaG">
/div>
</div>
<div class="metadata">
<span class="star-rating05"> </span>
<span>1234567 letture</span>
</div>
<h1 class="truncationL">
<a class="link_primario" href="http://www.xyz.zz">Lorem ipsum
dolor sit amet, consectetur dipiscing elit. Maecenas facilisis
porttitor interdum. Phasellusnec arcu quam.</a>
</h1>
<span class="username truncationL">di <a class="link_secondario" href="#">username username username username username username username username username username username username username username username username </a></span>
<p class="truncationB">“Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Maecenas facilisis porttitor interdum. Phasellus
nec arcu quam. Donec id leo nibh. Sed vehicula dignissim libero,
a vehicula sapien sodales non. Nunc vel metus ante. Fusce pretium
convallis cursus. Lorem ipsum dolor sit amet, consectetur adipiscing
elit. Maecenas facilisis porttitor interdum. Phasellus nec arcu
quam. Donec id leo nibh. Sed vehicula dignissim libero, a vehicula
sapien sodales non. Nunc vel metus ante. Fusce pretium convallis
cursusLorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas
facilisis porttitor interdum. Phasellus nec arcu quam. Donec id leo
nibh. Sed vehicula dignissim libero, a vehicula sapien sodales non.
Nunc vel metus ante. Fusce pretium convallis cursusLorem ipsum dolor
sit amet, consectetur adipiscing elit. Maecenas facilisis porttitor
interdum. Phasellus nec arcu quam. Donec id leo nibh. Sed vehicula
dignissim libero, a vehicula sapien sodales non. Nunc vel metus ante.
Fusce pretium convallis cursus”</p>
</li>
</ul>
</div>
</body>
</html>
CSS
a.link_primario:link { color: #0d6083; text-decoration:none;}
a.link_primario:visited { color: #0d6083; text-decoration: none;}
a.link_primario:hover { color: #cf1d3c; text-decoration: underline; }
a.link_primario:active { color: #0d6083; text-decoration: none;}
.ombraCopertinaG {
background: url(../images/ombra-copertina-grande.png) left bottom no-repeat;
position: relative;
float: left;
display: inline-block;
margin-right: 10px;
}
.ombraCopertinaG img{ padding: 0 9px 5px 6px;}
.anteprimaG {margin-bottom: 20px;}
.anteprimaG h1 {
width: 53.684210526315789473684210526316%; /*510px/950px*/
margin-bottom: 0;
}
.anteprimaG p {
height: 111px;
width: 83.36842105263158%/*807px/950px*/
}
.username {
display: inline-block;
width: 53.684210526315789473684210526316%;/*510px/950px*/
margin: 9px 0 15px 0;
}
.metadata { float:right;}
.metadata span {
display:inline-block;
font-size: 0.75em ;/*12px/16px*/
vertical-align: middle;
margin-left:20px;
}
.metadata span:first-child{
margin-left: 50px;
}
The second link has a class="link_secondario" attribute, yet you only defined:
a.link_primario:link { color: #0d6083; text-decoration:none;}
Either change the second's links attribute to class="link_primario" (if it has the same properties, you do not need two classes) or define:
a.link_primario:link,a.link_secondario:link
{ color: #0d6083; text-decoration:none; }