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.
Related
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
Using HTML and CSS I'm trying to display a news feed where there are an image, a title a date and the text itself.
In the below image, the first group is the actual result, the second one is the result I'm trying to achieve.
And here's the code:
HTML
<div class="news_block">
<div>
<img src="images/facebook.png">
<p class="title_news_tit"><strong>Title</strong></p>
<p class="title_news_date"><strong>21-21-2013</strong></p>
<p class="title_news_testo">Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Morbi tempus porttitor elit. Nulla pretium sapien vel neque iaculis,
eu tempus dui dapibus. Ut rhoncus vestibulum dignissim.
Morbi convallis ligula ultrices, imperdiet est ac, iaculis ligula.
Pellentesque elementum, enim quis cursus varius, lectus nulla gravida nisl,
vel rutrum nisl leo tempor metus. Sed at feugiat eros. Vivamus tincidunt mauris
ultricies justo feugiat, in ultricies sem venenatis. Etiam sodales leo in iaculis facilisis.</p>
</div>
<div class="clear"></div>
</div>
CSS
.news_block {
margin: 20px;
padding: 10px;
min-height: 200px;
background: #F5F5F5;
}
.news_block img {
float: left;
padding: 20px;
}
.title_news_testo
{
float: left;
}
.title_news_tit
{
float: left;
}
.title_news_date
{
float: right;
}
.clear
{
clear: both;
}
EDIT
I made a mistake on the image I uploaded.. in the expected result I want the title aligned to the left and the date to the right.
To much of markup has been used by you, cleaned it up and works well in this way : DEMO
General tip : apply the vertical align to the image to align it always
CSS
.news_block {
margin: 20px;
padding: 10px;
min-height: 200px;
background: #F5F5F5;
}
.news_block img {
float: left;
padding-right:15px;
}
.title_news_date {
float:right;
}
HTML
<div class="news_block">
<img src="http://678ielts.com/wp-content/uploads/2012/11/facebooklogo-200x200.gif" style="width:100px;height:100px;vertical-align:middle">
<div class="text">
<p> <span class="title_news_tit"><strong>Title</strong></span>
<span class="title_news_date"><strong>21-21-2013</strong></span>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi tempus porttitor elit. Nulla pretium sapien vel neque iaculis, eu tempus dui dapibus. Ut rhoncus vestibulum dignissim. Morbi convallis ligula ultrices, imperdiet est ac, iaculis ligula. Pellentesque elementum, enim quis cursus varius, lectus nulla gravida nisl, vel rutrum nisl leo tempor metus. Sed at feugiat eros. Vivamus tincidunt mauris ultricies justo feugiat, in ultricies sem venenatis. Etiam sodales leo in iaculis facilisis.</p>
</div>
</div>
Here is how you can do this on fiddle: http://jsfiddle.net/dZ2kX/2/
There was no need to float everything left
.news_block {
margin: 20px;
padding: 10px;
min-height: 200px;
background: #F5F5F5;
}
.news_block img {
padding: 20px;
background:blue;
width:90px;
height:90px;
float:left;
margin:0 20px 10px 0;
}
Please review this Sample Fiddle.
You'll notice I have two colums, side by side, and content under the headers. I'm trying to align the Lorem Ipsum with the vertical center of the paragraph to the right.
I thought a vertical align set to the column 1 would would, but it's not.
.col1-row1 {
margin-top: 2%;
display: inline-block;
background: transparent;
padding: 5px;
width:45%;
margin-left: 4%;
color: #f8981d;
font-weight: bold;
font-size: 20px;
line-height: 20px;
text-align: center;
}
Ideas?
Set "col1-row1" and "col2-row1" to display: table-cell instead of inline-block, and then include vertical-align: middle.
just replace this css for col1-row1 and col2-row1 classes in your stylesheet,this works fine in your fiddle.
.col1-row1 {
margin-top: 2%;
display: inline-block;
background: transparent;
padding: 5px;
width:45%;
color: #f8981d;
font-weight: bold;
font-size: 20px;
line-height: 20px;
vertical-align:middle;
text-align: center;
}
.col2-row1 {
margin-top: 2%;
display: inline-block;
background: transparent;
padding: 5px;
width: 45%;
color: #f8981d;
font-weight: bold;
font-size: 20px;
line-height: 20px;
vertical-align:middle;
text-align: center;
}
If you can pre-determine the height of the right-hand block of text, you can do something like the following (I set it at 206px):
<style>
#container {
width:940px;
margin:0 auto;
}
div.left {
width:460px;
margin-right:20px;
float:left;
display:inline;
}
div.right {
width:460px;
float:left;
display:inline;
}
div.clear {
clear: both;
}
div.left p {
height:206px;
line-height: 206px;
}
div.right p {
height:206px;
}
</style>
<div id="container">
<div class="left">
<h1>Exemption Reason</h1>
<p>Lorem ipsum</p>
</div>
<div class="right">
<h1>Documentation Required</h1>
<p>sit amet, consectetur adipiscing elit. Proin at nunc convallis, venenatis lectus auctor, porta nisi. Donec sit amet mauris non justo ultrices dignissim sed at ipsum. Aliquam accumsan faucibus nunc, id pulvinar massa consequat at. Pellentesque sed mauris leo. Nullam pulvinar sit amet tortor a suscipit. Ut varius et eros a aliquam. Donec tortor nisi, tristique at feugiat at, malesuada eu tortor. Pellentesque quis sapien mauris. Mauris pulvinar posuere auctor. Praesent nec felis at mi ultricies elementum. Nulla vitae pharetra mi, et semper ipsum. Etiam eget tristique mi. Vivamus rutrum ipsum dapibus enim malesuada sodales. Nullam rhoncus elit ut condimentum tincidunt. Quisque dapibus lorem eget euismod mattis. Praesent id consectetur urna.</p>
</div>
<div class="clear"></div>
</div>
If the height of the paragraph in the right hand column is dynamic and can not be determined beforehand, you can use JavaScript (here I'm using jQuery):
<style>
#container {
width:940px;
margin:0 auto;
}
div.left {
width:460px;
margin-right:20px;
float:left;
display:inline;
}
div.right {
width:460px;
float:left;
display:inline;
}
div.clear {
clear: both;
}
</style>
<div id="container">
<div class="left">
<h1>Exemption Reason</h1>
<p>Lorem ipsum</p>
</div>
<div class="right">
<h1>Documentation Required</h1>
<p>sit amet, consectetur adipiscing elit. Proin at nunc convallis, venenatis lectus auctor, porta nisi. Donec sit amet mauris non justo ultrices dignissim sed at ipsum. Aliquam accumsan faucibus nunc, id pulvinar massa consequat at. Pellentesque sed mauris leo. Nullam pulvinar sit amet tortor a suscipit. Ut varius et eros a aliquam. Donec tortor nisi, tristique at feugiat at, malesuada eu tortor. Pellentesque quis sapien mauris. Mauris pulvinar posuere auctor. Praesent nec felis at mi ultricies elementum. Nulla vitae pharetra mi, et semper ipsum. Etiam eget tristique mi. Vivamus rutrum ipsum dapibus enim malesuada sodales. Nullam rhoncus elit ut condimentum tincidunt. Quisque dapibus lorem eget euismod mattis. Praesent id consectetur urna.</p>
</div>
<div class="clear"></div>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script>
$(document).ready(function() {
var target_height = $('div.right p').height()+'px';
$('div.left p').css({
'height': target_height,
'lineHeight': target_height
});
});
</script>
If you only had to worry about Firefox and Webkit browsers, what CSS would you use to make the footer in the following HTML not rise above the bottom or the screen (and go lower if the body content pushed it)? Note: I don't want to add any of markup to the page.
<html>
<body>
<header>...</header>
<article>...</article>
<aside>...</aside>
<footer>...</footer>
</body>
</html>
Here is some copy paste html. How do I need to modify the css to make it work?
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
p {
margin-bottom: 10px;
}
article {
display: inline-block;
height: auto;
width: 69%;
}
aside {
display: inline-block;
height: auto;
width: 30%;
}
footer {
height: 30px;
}
</style>
</head>
<body>
<header>
<h1>Lorem Ipsum</h1>
</header>
<article>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eu viverra mauris. Fusce at erat risus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed tincidunt orci eget justo ornare vel iaculis mauris commodo. Ut id leo ipsum. Donec nunc est, convallis sit amet vehicula eget, laoreet id odio. Proin vitae purus magna. Maecenas lorem lacus, convallis ac imperdiet in, ullamcorper sed leo. Maecenas suscipit justo at arcu placerat eu ultricies orci placerat. Etiam vel erat in metus porttitor tristique vel ultricies ante. Aliquam sed porttitor nunc. Sed venenatis, sapien lacinia laoreet facilisis, lectus turpis iaculis leo, nec rhoncus tellus erat bibendum felis. Integer cursus malesuada sem id vehicula. Duis venenatis pellentesque nisi ut vulputate. Nunc elit sapien, pulvinar blandit suscipit ut, imperdiet ut neque. Cras odio dolor, commodo vitae malesuada sed, tempus sed neque.</p>
<p>Sed nec ornare libero. Vivamus ut risus at ligula dignissim lobortis. Pellentesque dignissim iaculis fringilla. Quisque porta sagittis massa eu euismod. Vivamus nunc lectus, iaculis vitae tincidunt et, placerat at risus. Nunc elementum massa at ligula blandit quis volutpat nulla malesuada. Nunc felis massa, placerat at vehicula non, gravida a nibh. Fusce adipiscing magna et nisl aliquet vehicula posuere tortor tempor. Aliquam erat volutpat. Duis eu enim sit amet lacus hendrerit elementum vitae a purus.</p>
<p>Phasellus porttitor congue tellus, eget rhoncus eros consequat a. Donec faucibus lorem at sapien aliquam tempus. Sed sed vulputate magna. Proin eros felis, eleifend vitae posuere vel, dictum ut purus. Pellentesque id felis sit amet neque consectetur porta. Donec non tellus augue, a sollicitudin libero. Nullam blandit hendrerit lacus. Quisque ac libero sapien. Etiam luctus tellus non sapien fringilla ultrices. Aliquam ut erat ut sapien mattis rhoncus nec eu enim. Aenean elementum dui in ligula fermentum nec egestas dui luctus. Praesent sed purus id tellus lacinia aliquam. Donec luctus, metus ut pulvinar bibendum, sapien dui aliquet est, volutpat cursus enim massa non sapien. Quisque mollis nisl a arcu ullamcorper porta. Nunc dapibus pellentesque dui in varius. Donec et eros ut lacus commodo vehicula.</p>
</article>
<aside>
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
<li>Five</li>
</ul>
</aside>
<footer>
<span>Made by me.</span>
</footer>
</body>
</html>
Given the requirements of no extra markup and not caring about IE (does work in IE8), I present this solution (which does require the use of a fixed height header). I did have to use float rather than display: inline-block as my Safari 4.0 did not display it with min-height for this solution:
<style type="text/css">
* {
margin: 0;
padding: 0;
}
html {
height: 100%;
}
body {
height: 100%;
/*below for illustration only*/
background: yellow;
}
#Header {
position: relative;
z-index: 1;
height: 60px;
margin-bottom: -60px;
/*below for illustration only*/
background: red;
opacity: .8;
}
#Article {
float: left;
min-height: 100%;
width: 69.9%;
vertical-align: top;
margin-bottom: -30px;
/*below for illustration only*/
background: blue;
}
#Aside {
float: left;
min-height: 100%;
width: 30%;
vertical-align: top;
margin-bottom: -30px;
/*below for illustration only*/
background: green;
}
#Article:before,
#Aside:before {
content: ' ';
display: block;
height: 60px;
width: 100%;
}
#Article:after,
#Aside:after {
content: ' ';
display: block;
height: 30px;
width: 100%;
}
#Footer {
position: relative;
z-index: 1;
height: 30px;
margin-top: -30px;
clear: left;
/*below for illustration only*/
background: pink;
opacity: .8;
}
</style>
HTML is just:
<body>
<div id="Header">Header</div>
<div id="Article">Article</div>
<div id="Aside">Aside</div>
<div id="Footer">Footer</div>
</body>
I think I figured this out:
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.1.1/build/cssreset/reset-min.css">
<style type="text/css">
html {
background-color: orange;
height: 100%;
}
body {
background-color: yellow;
height: auto;
min-height: 100%;
position: relative;
}
ul {
list-style: none;
}
p {
margin-bottom: 10px;
}
header {
background-color: red;
display: block;
}
article {
background-color: blue;
display: inline-block;
margin-bottom: 30px;
vertical-align: top;
width: 70%;
}
aside {
background-color: green;
display: inline-block;
margin-bottom: 30px;
vertical-align: top;
width: 30%;
}
footer {
background-color: pink;
bottom: 0;
height: 30px;
left: 0;
position: absolute;
width: 100%;
}
</style>
CSS:
* {
margin: 0;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -4em;
}
.footer, .push {
height: 4em;
}
HTML:
<html>
<head>
<link rel="stylesheet" href="layout.css" ... />
</head>
<body>
<div class="wrapper">
<div class="header"></div>
<div class="article"></div>
<div class="aside"></div>
<div class="push"></div>
</div>
<div class="footer">
<p>Copyright (c) 2008</p>
</div>
</body>
</html>
I think you're talking about the margin of 10-15 pixels below the footer. Try adding this code to your CSS;
body { margin-bottom:0px; }
The body has a default margin of 10-15 pixels so in order to remove it to flush your design to the top or bottom you have to tell the body to have a margin of zero.
Hope that helps.
*
{
display:block;
}
You are going to have to change the display to inline in your wrapper after that though.
First of all, no matter what you do, you'll need a wrapper div for the entire page. I usually call it #page_container or something. If you think about it, having a div container for the whole page doesn't defeat the essence of css style sheets. On the other hand, if you had a bunch of wrappers scattered around the html page, it could potentially get pretty messy with all that extra markup. So, I always use a page_container on my layouts, even if I don't put any css styling on it, I always have one. Basically, it will just act like a body tag, only allow you to style it.
With that said, there are a couple solutions if your layout was refined to:
<html>
...
<body>
<div id='page_container'>
<div id='header'></div>
<div id='contents'></div>
<div id='footer'></div>
</div>
</body>
</html>
Only Firefox you say? Did I hear that right? I don't think I've ever heard anyone say that before. In that case, its fairly easy. The easiest solution would be:
<html>
<head>
<title>Test page</title>
<style>
body{
background-color:green;
margin:0px;
}
#page_container{
width:700px;
margin-left:auto;
margin-right:auto;
display:table;
height:100%;
}
#header{
background-color:red;
text-align:center;
font-size:25px;
font-weight:600;
height:75px;
display:table-row;
}
#contents{
background-color:yellow;
display:table-row;
}
#footer{
background-color:blue;
height:25px;
display:table-row;
}
</style>
</head>
<body>
<div id='page_container'>
<div id='header'>Title of your page</div>
<div id='contents'>
Foo bar baz<br/>
Foo bar baz<br/>
Foo bar baz<br/>
Foo bar baz<br/>
Foo bar baz<br/>
Foo bar baz<br/>
</div>
<div id='footer'>This is a footer</div>
</div>
</body>
</html>
I've been experimenting with some other css styling, and I think I almost have a layout that could be cross-browser compatible. I'll post it if I'm not too late.
Okay, here is the alternative css that I was talking about. It works in Firefox, Safari, and Chrome. IE7/IE6 don't work, you'd probably have to a little tweaking to get that working. Opera has a small bug with the body margins. Other than that, it uses just basic CSS (unlike the display:table that isn't very compatible).
<html>
<head>
<title>Test page</title>
<style>
body{
margin:0px;
background-color:green;
margin-top:75px;
margin-bottom:25px;
}
#page_container{
max-width:700px;
margin-left:auto;
margin-right:auto;
position:relative;
height:100%;
padding-top:75px;
margin-top:-75px;
}
#header{
background-color:red;
text-align:center;
font-size:25px;
font-weight:600;
height:75px;
z-index:2;
position:absolute;
top:0px;
width:100%;
}
#contents{
background-color:yellow;
width:100%;
min-height:100%;
}
#footer{
background-color:blue;
height:25px;
}
</style>
</head>
<body>
<div id='page_container'>
<div id='header'>Title of your page</div>
<div id='contents'>
Foo bar baz<br/>
Foo bar baz<br/>
Foo bar baz<br/>
Foo bar baz<br/>
Foo bar baz<br/>
Foo bar baz<br/>
</div>
<div id='footer'>This is a footer</div>
</div>
</body>
</html>
Wow, if you just tweaked it a little and made it IE6-7 compatible, you'd be famous. I think this is the first solution I've seen.
Since you mentioned that your solution worked except for IE, all you need to do is use JS to enable the styling of HTML 5 elements:
http://medero.org/finally.html
That would make the styles apply, but it still looks like, at least in IE6 it needs some extra help.
Is this close to what you need for IE?
Working and tested on:
Google Chrome
Safari
Opera
Internet Explorer
Firefox
EDITED CODE (added overflow:auto; to #aside and #Article to fix the overflow)
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
html,body{height:100%;width:100%;margin:0;padding:0;background-color:red;}
#Header,#Article,#Aside,#Footer{position:absolute;}
#Header{top:0;left:0;width:100%;height:60px;background-color:blue;}
#Article,#Aside{top:60px;overflow:auto;bottom:30px;}
#Article{left:0;width:70%;background-color:green;}
#Aside{right:0;width:30%;background-color:yellow;}
#Footer{bottom:0;left:0;width:100%;height:30px;background-color:pink;}
</style>
</head>
<body>
<div id="Header">Header</div>
<div id="Article">Article</div>
<div id="Aside">Aside</div>
<div id="Footer">Footer</div>
</body>
</html>
PS:
Background colors are illustrative, thus the css can me more compact by avoiding repeated attributes!
Another answer for those who only need to target the latest versions of browsers utilizing flexbox and viewport units.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body {
display: flex;
flex-direction: column;
min-height: 100vh;
}
header {
height: 60px;
}
article {
flex: 1;
}
footer {
height: 30px;
}
</style>
</head>
<body>
<header>
<h1>Lorem Ipsum</h1>
</header>
<article>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eu viverra mauris. Fusce at erat risus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed tincidunt orci eget justo ornare vel iaculis mauris commodo. Ut id leo ipsum. Donec nunc est, convallis sit amet vehicula eget, laoreet id odio. Proin vitae purus magna. Maecenas lorem lacus, convallis ac imperdiet in, ullamcorper sed leo. Maecenas suscipit justo at arcu placerat eu ultricies orci placerat. Etiam vel erat in metus porttitor tristique vel ultricies ante. Aliquam sed porttitor nunc. Sed venenatis, sapien lacinia laoreet facilisis, lectus turpis iaculis leo, nec rhoncus tellus erat bibendum felis. Integer cursus malesuada sem id vehicula. Duis venenatis pellentesque nisi ut vulputate. Nunc elit sapien, pulvinar blandit suscipit ut, imperdiet ut neque. Cras odio dolor, commodo vitae malesuada sed, tempus sed neque.</p>
<p>Sed nec ornare libero. Vivamus ut risus at ligula dignissim lobortis. Pellentesque dignissim iaculis fringilla. Quisque porta sagittis massa eu euismod. Vivamus nunc lectus, iaculis vitae tincidunt et, placerat at risus. Nunc elementum massa at ligula blandit quis volutpat nulla malesuada. Nunc felis massa, placerat at vehicula non, gravida a nibh. Fusce adipiscing magna et nisl aliquet vehicula posuere tortor tempor. Aliquam erat volutpat. Duis eu enim sit amet lacus hendrerit elementum vitae a purus.</p>
<p>Phasellus porttitor congue tellus, eget rhoncus eros consequat a. Donec faucibus lorem at sapien aliquam tempus. Sed sed vulputate magna. Proin eros felis, eleifend vitae posuere vel, dictum ut purus. Pellentesque id felis sit amet neque consectetur porta. Donec non tellus augue, a sollicitudin libero. Nullam blandit hendrerit lacus. Quisque ac libero sapien. Etiam luctus tellus non sapien fringilla ultrices. Aliquam ut erat ut sapien mattis rhoncus nec eu enim. Aenean elementum dui in ligula fermentum nec egestas dui luctus. Praesent sed purus id tellus lacinia aliquam. Donec luctus, metus ut pulvinar bibendum, sapien dui aliquet est, volutpat cursus enim massa non sapien. Quisque mollis nisl a arcu ullamcorper porta. Nunc dapibus pellentesque dui in varius. Donec et eros ut lacus commodo vehicula.</p>
</article>
<footer>
<span>Made by me.</span>
</footer>
</body>
</html>