I'm working on a new project, and it appears that both opera and IE are giving me extra space to my li element.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
#import "stil.css";
</style>
<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="jquery-ui-1.8.14.custom.min.js"></script>
<script type="text/javascript" src="reel.js"></script>
<script type="text/javascript" src="dropdown.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Savic</title>
</head>
<body>
<div id="container">
<div id="header">
<div id="menu">
<p> Samostalna Zanatska Radnja</p>
<a id="logo" href="index.html">Savić</a>
<div id="darrow">
</div>
<div id="darrow2">
</div>
<ul id="nav">
<li><a class="link" style="background:url(images/activeb.jpg) repeat-x" href="#">Početna</a></li>
<li><a class="link" id="izb" href="#">Izrada</a></li>
<li><a class="link" id="ugb" href="#">Ugradnja</a></li>
<li><a class="link" href="#">Galerija</a></li>
<li><a class="link" href="#">Kontakt</a></li>
</ul>
<ul id="izd">
<li>Ograda</li>
<li>Kapija</li>
<li>Gelendera</li>
<li>Čelične konstrukcije</li>
<li>Garažnih vrata</li>
</ul>
<ul id="ugd">
<li>Kupatila</li>
<li>Vodovoda</li>
<li>Kanalizacije</li>
<li>Grejanja</li>
<li>Servis pumpi za vodu</li>
</ul>
</div>
</div>
<div id="body">
<!-- ALL STUFF GOES HERE -->
<div id="holder">
<!-- LEVI DIV -->
<!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
<div id="left">
<div id="portfolio_cycler" class="shadow roundbox">
<img class="active" src="images/reel1.jpg" />
</div>
<div id="circles"></div>
<img id="horg" src="images/horg.jpg" />
<div id="topt">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris pellentesque semper ligula at volutpat. In hac habitasse platea dictumst. Nam ultrices diam eu dolor cursus in semper ligula faucibus. Nulla mattis tortor vel nunc rutrum convallis. Maecenas egestas diam sit amet odio mattis sit amet pellentesque orci bibendum. Ut sodales fringilla sem, nec volutpat mi scelerisque non. Phasellus luctus laoreet nunc, eget tincidunt massa egestas vel. Phasellus id sapien ante. Fusce vulputate, urna quis condimentum molestie, erat sapien porttitor dui, eu pulvinar orci enim non massa. Mauris in cursus mauris. Sed tortor justo, placerat tristique blandit at, rutrum quis nisi.</p>
</div>
</div>
<!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
<!-- LEVI DIV KRAJ -->
</div>
<!-- ALL STUFF ENDS HERE -->
</div>
<div id="footer"></div>
</div>
</body>
</html>
CSS:
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
vertical-align: baseline;
}
/*NEOPHODNO ZA FOOTER */
/*<div id="container">
<div id="header">
<div id="menu">
</div>
</div>
<div id="body">
Sve stavljati u body, kao i margin: 0 auto, ne treba wrap div
</div>
<div id="footer"></div>
</div>
*/
html,
body {
margin:0;
padding:0;
height:100%;
}
#container {
min-height:100%;
position:relative;
}
#header {
background:url(images/background.jpg) repeat-x;
height:100px;
}
#body {
width:980px;
margin:0 auto;
padding-bottom:60px; /* Height of the footer */
}
#footer {
position:absolute;
bottom:0;
width:100%;
height:25px; /* Height of the footer */
background:url(images/footer.jpg) repeat-x;
}
#wrap{
width:980px;
margin:0 auto;
background:#000;
height:100px;
}
/* FOOTER PODESAVANJA */
#menu{
width:980px;
margin:0 auto;
position:relative;
top:2px;
height:98px;
background:url(images/header2.jpg) 0px 0px;
}
#holder{
width:960px;
position:relative;
left:10px;
top:10px;
}
#menu p,a,li{
font-family:Arial, Helvetica, sans-serif;
color:#FFF;
font-weight:bold;
position:relative;
}
#menu p{
font-size:12px;
left:55px;
top:10px;
width:200px;
}
#logo{
font-size:40px;
top:5px;
left:80px;
text-decoration:none;
}
#nav li{
font-size:12px;
display:inline;
}
#nav ul{
position:relative;
height:20px;
}
#nav{
position:relative;
top:10px;
left:0px;
}
#nav a{
font-size:12px;
padding-right:14px;
padding-left:14px;
}
.link{
padding-top:5px;
padding-bottom:5px;
text-decoration:none;
top:1px;
}
#portfolio_cycler{position:relative;}
#portfolio_cycler img{position:absolute;z-index:1}
#portfolio_cycler img.active{z-index:3}
#circles{
position:absolute;
z-index:7;
top:250px;
left:690px;
}
#izd{
width:130px;
background:#48a9c4;
position:absolute;
z-index:5;
font-size:12px;
text-align:center;
top:98px;
left:60px;
height:120px;
}
#ugd{
width:130px;
background:#48a9c4;
position:absolute;
z-index:5;
font-size:12px;
text-align:center;
top:98px;
left:146px;
height:120px;
}
#izd li, #ugd li{
list-style:none;
padding-top:3px;
padding-bottom:5px;
}
#izd a, #ugd a{
text-decoration:none;
display:block;
width:130px;
}
#izb{
visibility:visible;
}
#darrow{
position:absolute;
left:130px;
top:80px;
background:url(images/darrow.png) no-repeat;
width:10px;
height:12px;
z-index:5;
}
#darrow2{
position:absolute;
left:214px;
top:80px;
background:url(images/darrow.png) no-repeat;
width:10px;
height:12px;
z-index:5;
}
#horg{
position:relative;
top:277px;
}
#topt{
position:relative;
width:770px;
top:283px;
text-align:justify;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
}
I don't want to create special css or use javascript to fix this, so can anyone tell me what's the problem. I assume that id nav causes the problem but I'm not sure.
The problem is with your CSS. Try adding these:
#nav {
margin: 0;
padding: 0;
}
#nav li {
/* use this instead of display:inline */
float: left;
display: block;
}
Those are just some fixes to the bugs that I can quickly spot. There might be more bugs. If you want to learn how to make a horizontal menu with CSS, check out my tutorial on Cramie.net - Create CSS Horizontal Menu
Related
Here is code for footer section:
<footer>
<div class="footer">
<nav>
<ul class="nav-list1">
<li><img src="img/notes.png" alt="img"></li>
<li>ARTICLES</li>
<li>BLOG</li>
<li>COLUMN</li>
<li>TOPICS</li>
</ul>
<ul class="nav-list2">
<li>ABOUT</li>
<li>AUTHOURS</li>
<li>MASTHEAD</li>
<li>CONTRIBUTE</li>
<li>STYLEGUIDE</li>
<li>CONTACT</li>
<li>SPONSORSHIPS</li>
</ul>
</nav>
<hr class="hr-style" />
<section class="clearfix footerWidth">
<div class="footer-column1">
<img src="img/footer1.png" class="footer-image" alt="dot"/>
<p class="footer-title">.NET Training</p>
<p class="footer-pgf">If you have a .NET question on a topic that 's not covered by other more specific forums.</p>
<p><a class="footer-link" href="#">ask here. ></a></p>
</div>
<div class="footer-column2">
<img src="img/footer2.png" class="footer-image" alt="expert"/>
<p class="footer-title">Shopify Expert at $20 / hour</p>
<p class="footer-pgf">Unique custom made Shopify theme and tweaks.</p>
<p><a class="footer-link" href="#">click to view</a></p>
</div>
</section>
<hr class="hr-style" />
<p class="copyright">Copyright © 2013 Dot Net How</p>
</div>
</footer>
Here is my JSfiddle:
http://jsfiddle.net/d0teo50p/7/
In my page in footer section, right side of content didn't show properly.
Can anybody help me to fix this.
Set width:960px; to div.footer and style="float:left;" to div.footer-column2 > p.footer-title and remove width:110%; to p.footer-pgf.
TRY - DEMO
HTML
<div class="wrapper">
<header id="header">
<img src="http://s30.postimg.org/rlkl06s9d/logo.jpg" alt="logo" id="logo">
<h1>The Articles</h1>
<nav class="header-nav">
<ul>
<li>Articles</li>
<li><img src="img/icon.png" alt=""> Home</li>
</ul>
</nav>
</header>
<section id="section">
<article class="article">
<img src="http://s30.postimg.org/60fickvip/articles.jpg" alt="articles" />
<p class="comments">
by<span class="woo"> JOHN WOO</span>
<date>June 04, 2013, 22 Comments</date>
</p>
<h1 class="issue">Issue No 376</h1>
<p class="lorem">Lorem ipsum dolor sit amer, consectetur adipising elit Vestibulum eu ligula justo, ullamcorper viverraest. Donec viverra libero in tellus ullamcorper lobortis,. Nam nunc metus, molestie sit amet sagitis et, hendrenit quam. Ut hendrerit commodo nunc, eu euismod odio egestas a. Morbi felis lorem, convallis id scelerisque eget, faucibus eget lectus.</p>
<p class="dev-express">asp.net, .net, dev-express</p>
More
<div class="border-bottom"></div>
<div class="article1">
<img src="http://s30.postimg.org/anq5s389d/cat.png" alt="" />
<p class="comments">
by <span class="woo">JOHN WOO</span>
<date>June 04, 2013, 22 Comments</date>
</p>
<h1 class="issue">Issue No 375</h1>
<p class="lorem">Lorem ipsum dolor sit amer, consectetur adipising elit Vestibulum eu ligula justo, ullamcorper viverraest. Donec viverra libero in tellus ullamcorper lobortis,. Nam nunc metus, molestie sit amet sagitis et, hendrenit quam. Ut hendrerit commodo nunc, eu euismod odio egestas a. Morbi felis lorem, convallis id scelerisque eget, faucibus eget lectus.</p>
<p class="dev-express">asp.net, .net, dev-express</p>
More
</div>
</article>
<aside class="aside">
<img src="http://s30.postimg.org/hlpokah01/agencies.jpg" alt="agencies" />
<h3>From the Blog</h3>
<p class="windows">DAVID <i> on </i>c# Windows</p>
<p class="hex">How to convert System.Color to HTML color (hex)?</p>
<p class="sidebar-pgf">I'm working on an application that requires converting the back color of the panel to HTML that can be used as a div background color. Please help.</p>
view answer
</aside>
</section>
</div>
<footer>
<div class="footer">
<nav>
<ul class="nav-list1">
<li><img src=".http://s30.postimg.org/rhqrjxmrx/notes.png" alt="img"></li>
<li>ARTICLES</li>
<li>BLOG</li>
<li>COLUMN</li>
<li>TOPICS</li>
</ul>
<ul class="nav-list2">
<li>ABOUT</li>
<li>AUTHOURS</li>
<li>MASTHEAD</li>
<li>CONTRIBUTE</li>
<li>STYLEGUIDE</li>
<li>CONTACT</li>
<li>SPONSORSHIPS</li>
</ul>
</nav>
<hr class="hr-style" />
<section class="clearfix footerWidth">
<div class="footer-column1">
<img src="http://s30.postimg.org/ckiaix9jl/footer1.png" class="footer-image" alt="dot"/>
<p class="footer-title">.NET Training</p>
<p class="footer-pgf">If you have a .NET question on a topic that 's not covered by other more specific forums.</p>
<p><a class="footer-link" href="#">ask here.</a></p>
</div>
<div class="footer-column2">
<img src="http://s30.postimg.org/fm92svmoh/footer2.png" class="footer-image" alt="expert"/>
<p class="footer-title" style="float:left;">Shopify Expert at $20 / hour</p>
<p class="footer-pgf">Unique custom made Shopify theme and tweaks.</p>
<p><a class="footer-link" href="#">click to view</a></p>
</div>
</section>
<hr class="hr-style" />
<p class="copyright">Copyright © 2013 Dot Net How</p>
</div>
</footer>
CSS
* {
box-sizing:border-box;
}
body {
font-family:Raleway, sans-serif;
text-decoration:none;
line-height:1.42857143;
margin:0;
}
html {
position:relative;
min-height:100%;
}
.wrapper {
width:960px;
margin-left:auto;
margin-right:auto;
}
#header {
margin:10px;
}
#header nav {
float:right;
margin-top:15px;
}
#header nav li {
display:inline-block;
}
#logo {
padding-bottom:40px;
border-bottom:solid 2px #CCC;
}
.view {
color:#FF8C00;
}
.hr-style {
background:url(http://s27.postimg.org/4sfiqgx7j/horizontal_lin
e.png) 50% 0 repeat-x;
border:0;
height:15px;
}
a {
text-decoration:none;
font-size:12px;
}
i {
font-weight:100;
}
img {
vertical-align:middle;
border:0;
}
.header-nav ul li {
display:inline;
float:right;
font-size:12px;
padding:10px;
}
.header-nav ul li a {
color:gray;
}
.comments,date {
color:gray;
font-size:12px;
font-style:italic;
}
.woo {
color:#FF8C00;
font-style:normal;
font-size:15px;
}
.lorem {
color:gray;
font-size:13px;
line-height:25px;
letter-spacing:.07pt;
width:86%;
}
.border-bottom {
border-bottom:1px solid gray;
width:90%;
padding-top:15px;
}
.dev-express {
font-size:12px;
font-family:Arial Narrow;
color:gray;
letter-spacing:1pt;
}
.article1 {
margin-top:15px;
}
.myButton {
background-color:#FF8C00;
border-radius:4px;
display:inline-block;
cursor:pointer;
color:#fff;
font-size:13px;
text-decoration:none;
padding:6px 18px;
}
.myButton:hover {
background-color:#FF8C00;
}
.myButton:active {
position:relative;
top:1px;
}
#section {
display:table;
}
.article {
width:75%;
padding-bottom:50px;
display:table-cell;
vertical-align:top;
}
.aside {
display:table-cell;
vertical-align:top;
width:25%;
}
.issue {
color:#FF8C00;
font-size:25px;
font-weight:400;
}
.windows {
font-weight:600;
font-size:12px;
}
.hex {
font-weight:600;
color:#FF8C00;
}
.sidebar-pgf {
font-size:13px;
line-height:23px;
letter-spacing:.07pt;
}
nav {
text-align:center;
}
.nav-list1 li {
display:inline;
font-size:12px;
font-weight:700;
letter-spacing:.2pt;
padding:15px;
}
.nav-list2 li {
display:inline;
font-size:11px;
font-weight:800;
letter-spacing:.2pt;
padding:15px;
}
.footer {
background-image:url(http://s27.postimg.org/80k03ijhb/footer_bg.jpg);
bottom:0;
clear:both;
height:auto;
padding:15px;
width:960px;
}
.footer-image {
float:left;
padding-right:13px;
}
.footer-title {
font-weight:700;
font-size:12px;
}
.footer-pgf {
font-size:11px;
}
.footer-link {
font-size:11px;
font-weight:600;
}
.copyright {
font-size:12px;
font-weight:500;
text-align:center;
}
.clearfix:after {
visibility:hidden;
display:block;
font-size:0;
content:" ";
clear:both;
height:0;
}
.column4-pgf {
font-size:11px;
}
.well {
background-color:#f5f5f5;
border:#e3e3e3 solid 1px;
border-radius:4px;
box-shadow:0 1px 1px rgba(0,0,0,0.05) inset;
margin-bottom:20px;
min-height:20px;
padding:19px;
}
.footer-column2 {
margin-left:45px!important;
}
section.footerWidth {
width:960px;
margin:0 auto;
}
#header h1,.footer-column1,.footer-column2 {
float:left;
}
#media min-width992px{
.column-1,.column-2,.column-3,.column-4,.footer-column1,.footer-column2 {
min-height:1px;
padding-left:15px;
padding-right:15px;
position:relative;
}
}
#media min-width 992px{
.footer-column1,.footer-column2 {
width:45%;
margin-left:15px;
}
}
Image:
My hidden (toggle) divs that shows on click create a margin based on the below div.
I tried giving all the content of the hidden divs a negative margin but it just seems a bit clumsy and I am sure there is a more elegant solution.
Any suggestions?
<html>
<head>
<script type="text/javascript">
function toggle_visibility(id) {
var e = document.getElementById(id);
if(e.style.display == 'block')
e.style.display = 'none';
else
e.style.display = 'block';
}
</script>
<style>
body {
margin:0;
width:100%;
height:100%
}
#first {
z-index:1;
position:relative;
display:block;width:25%;
height:10%;
background-color:#F00;
float: left
}
#second {
z-index:1;
position:relative;
display:block;
width:25%;
height:10%;
background-color:#FF0;
float: left
}
#first_hidden {
display:none;
z-index:10;
position:relative;
width:100%;
height:100%;
background-color:#0F0
}
#second_hidden {
display:none;
z-index:10;
position:relative;
width:100%;
height:100%;
background-color:#F0F;
}
</style>
</head>
<body>
<div id="first">
First
</div>
<div id="first_hidden">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse tempus non massa nec porta. Sed mollis aliquam dui at egestas.</p>
<-Back1
</div>
<div id="second">
Second
</div>
<div id="second_hidden">
<p>Nulla id mauris volutpat, elementum urna suscipit, tempor diam. Sed semper metus purus, vel luctus nulla rutrum eu. Nulla id.</p>
<-Back2
</div>
</body>
</html>
You have to keep inside <div> default margin:1em 0; of your <p> with a padding or border on <div>, or reset margin:0; on <p>. test this :
div {padding:1px;}
http://liveweave.com/B8D32x
______________________
| Header |
|______________________|
| |
| |
| Content |
| |
| |
|______________________|
| Footer |
|______________________|
I would like to make this UI, and each is a div. The header height is 30px. And the footer is 30px. But I don't know the content height. I need to use the user frame to calculate.
The total height should be 100%.
Can I do it in pure CSS?
Using flexbox, this is easy to achieve.
Set the wrapper containing your 3 compartments to display: flex; and give it a height of 100% or 100vh. The height of the wrapper will fill the entire height, and the display: flex; will cause all children of this wrapper which has the appropriate flex-properties (for example flex:1;) to be controlled with the flexbox-magic.
Example markup:
<div class="wrapper">
<header>I'm a 30px tall header</header>
<main>I'm the main-content filling the void!</main>
<footer>I'm a 30px tall footer</footer>
</div>
And CSS to accompany it:
.wrapper {
height: 100vh;
display: flex;
/* Direction of the items, can be row or column */
flex-direction: column;
}
header,
footer {
height: 30px;
}
main {
flex: 1;
}
Here's that code live on Codepen: http://codepen.io/enjikaka/pen/zxdYjX/left
You can see more flexbox-magic here: http://philipwalton.github.io/solved-by-flexbox/
Or find a well made documentation here: http://css-tricks.com/snippets/css/a-guide-to-flexbox/
--[Old answer below]--
Here you go: http://jsfiddle.net/pKvxN/
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Layout</title>
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
header {
height: 30px;
background: green;
}
footer {
height: 30px;
background: red;
}
</style>
</head>
<body>
<header>
<h1>I am a header</h1>
</header>
<article>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce a ligula dolor.
</p>
</article>
<footer>
<h4>I am a footer</h4>
</footer>
</body>
</html>
That works on all modern browsers (FF4+, Chrome, Safari, IE8 and IE9+)
Here is how to to that:
The header and footer are 30px height.
The footer is stuck to the bottom of the page.
HTML:
<div id="header">
</div>
<div id="content">
</div>
<div id="footer">
</div>
CSS:
#header {
height: 30px;
}
#footer {
height: 30px;
position: absolute;
bottom: 0;
}
body {
height: 100%;
margin-bottom: 30px;
}
Try it on jsfiddle: http://jsfiddle.net/Usbuw/
Try This
<!DOCTYPE html>
<html>
<head>
<title>Sticky Header and Footer</title>
<style type="text/css">
/* Reset body padding and margins */
body {
margin:0;
padding:0;
}
/* Make Header Sticky */
#header_container {
background:#eee;
border:1px solid #666;
height:60px;
left:0;
position:fixed;
width:100%;
top:0;
}
#header {
line-height:60px;
margin:0 auto;
width:940px;
text-align:center;
}
/* CSS for the content of page. I am giving top and bottom padding of 80px to make sure the header and footer do not overlap the content.*/
#container {
margin:0 auto;
overflow:auto;
padding:80px 0;
width:940px;
}
#content {
}
/* Make Footer Sticky */
#footer_container {
background:#eee;
border:1px solid #666;
bottom:0;
height:60px;
left:0;
position:fixed;
width:100%;
}
#footer {
line-height:60px;
margin:0 auto;
width:940px;
text-align:center;
}
</style>
</head>
<body>
<!-- BEGIN: Sticky Header -->
<div id="header_container">
<div id="header">
Header Content
</div>
</div>
<!-- END: Sticky Header -->
<!-- BEGIN: Page Content -->
<div id="container">
<div id="content">
content
<br /><br />
blah blah blah..
...
</div>
</div>
<!-- END: Page Content -->
<!-- BEGIN: Sticky Footer -->
<div id="footer_container">
<div id="footer">
Footer Content
</div>
</div>
<!-- END: Sticky Footer -->
</body>
</html>
After fiddling around a while I found a solution that works in >IE7, Chrome, Firefox:
http://jsfiddle.net/xfXaw/
* {
margin:0;
padding:0;
}
html, body {
height:100%;
}
#wrap {
min-height:100%;
}
#header {
background: red;
}
#content {
padding-bottom: 50px;
}
#footer {
height:50px;
margin-top:-50px;
background: green;
}
HTML:
<div id="wrap">
<div id="header">header</div>
<div id="content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. </div>
</div>
<div id="footer">footer</div>
with Grid
<div class='container'>
<header>header</header>
<div>content</div>
<footer>footer</footer>
</div>
.container {
display: grid;
grid-template-rows: auto 1fr auto;
height: 100vh;
}
Below is the sample code and you can run a snippet to see the result.
html,body {
display: flex;
flex-direction: column;
height: 100%;
}
sidenav{
border:1px solid black;
flex: .3;
}
container{
border:1px solid black;
flex: 1;
}
header{
border:1px solid black;
flex:.1;
}
content{
display:flex;
flex:1;
border:1px solid black;
}
footer{
border:1px solid black;
flex:.1;
}
<body>
<header >header</header>
<content>
<sidenav>sidenav</sidenav>
<container>container</container>
</content>
<footer>footer</footer>
</body>
Try this
CSS
.header{
height:30px;
}
.Content{
height: 100%;
overflow: auto;
padding-top: 10px;
padding-bottom: 40px;
}
.Footer{
position: relative;
margin-top: -30px; /* negative value of footer height */
height: 30px;
clear:both;
}
HTML
<body>
<div class="Header">Header</div>
<div class="Content">Content</div>
<div class="Footer">Footer</div>
</body>
I am trying to learn and use html5 and have a basic layout but the sidebar (aside) and section (content) elements are not equal in length and I want them to be equal. I have been trying to fix this with faux column method but with no success yet. I have had several attempts and my last attempt so far I used a background image in 'mid-section' div but this isn't displaying!
I show the html5 and css code here and am grateful for some advice and help on what I need to do to get the columns equal length.
<!Doctype html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<link rel="stylesheet" type ="text/css" href="stylev1.css" media="screen" >
<title>RPD simple html5 example
</title>
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<div id="page">
<header>
<h1>Header content area</h1>
</header>
<nav>
<p>Nav content area for links-horizontal or vertical</p>
</nav>
<div class="mid-section">
<article>
<section>
<p><article> - Defines an article</p>
</section>
<section>
ARTICLE content
Lorem ipsum.......................
.....................................
.....................................
</section>
<section>
Article Content 2
Lorem ipsum.......................
.....................................
.....................................
</section>
</article>
<aside>
<p><aside> - Defines an aside</p>
ASIDE Content (sidebar)
</aside>
</div>
<footer>
Page footer content area
</footer>
</div>
</body>
</html>
/*CSS reset-basic! */
html {
margin:0; padding:0;
}
#page{
width:960px;
margin:0 auto;
text-align:left;
}
body {
background-color:#5B5C58;
color: #000000;
font-family:Calibri, Verdana, Arial, sans-serif;
font-size: 14px;
text-align:center;
margin:0;
}
header, footer, nav, article, section, aside {
display:inline-block;
}
header {
width:100%;
margin-bottom:10px;
background-color:green;
width;50px;
}
nav {
width:100%;
background-color:#F0F8FF;
float:left;
}
nav ul{
width:100%;
list-style:none;
margin:0;
padding:0;
}
nav ul li{
display:inline;
padding:3px 7px;
}
nav span{
float:right;
display:inline-block;
}
.mid-section {
color:red;
background: url(images/rpdsimplehtml5fauxcols6.png) repeat-y;
}
aside {
width:30%;
background-color:#B0E2FF;
margin:4px 2px;
padding:10px;
float:right;
margin-top:10px;
margin-bottom:10px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
}
article {
width:65%;
background-color:#B0E2FF;
margin:4px 2px;
padding:10px;
float:left;
margin-top:10px;
margin-bottom:10px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
}
section {
display:block;
background-color:#E0FFFF;
font-family:Cambria, Verdana, Arial, sans-serif;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
margin:4px 2px;
padding:10px;
}
footer {
width:100%;
background-color:#82CFFD;
margin-top:10px;
height:50px;
clear:both;
}
I am most grateful for helpful replies, thanks
I feel that CSS doesn't give us suitable solutions to entire classes of problems similar to yours. Putting together a simple layout shouldn't devolve into a contest of wits and a guessing game.
Therefore, against the protests of lots of CSS purists, I use and recommend tables for layout. Not indiscriminately, but when CSS fails to deliver.
Done with tables, your problem suddenly becomes trivial.
EDIT
Done. "fixed-up" code in pastebin.
It looks a bit garish but can be tweaked to look the way you wanted, I'm sure.
This is the best method of keeping three columns the same height, that I have seen so far. It require extra markup in your HTML unfortunately. Plus it isn't specific to HTML5, but changing the tags isn't a problem.
http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks
If you are aiming for "HTML5" and "CSS3" you can use display: table-*
nav, article, aside {
display: table-cell;
}
I could not really figure this out!
I see so many css/jscript/jquery fixes on internet search my brain is overloading!
I didn't much like the table code so I have left that approach for now!
All I have done is add a 'mid-section' div (div mainarticle) with a background image (is that the 'faux col' method?). Anyway I have now a simple html5 layout page (which has nearly driven me nuts to get- I am not good at css coding!!).
Here is my current code:
``<!Doctype html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<link rel="stylesheet" type ="text/css" href="rpdnewstyle.css" media="screen" >
<title>RPD simple html5 example
</title>
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<div id="wrap">
<div id="page">
<header>
<h1>Header content area</h1>
</header>
<nav>
<p>Nav content area for links-horizontal or vertical</p>
</nav>
<div id="mainarticle">
<article>
<section>
<p><article> - Defines an article</p>
</section>
<section>
ARTICLE content
Lorem ipsum.......................
.....................................
.....................................
</section>
<section>
Article Content 2
Lorem ipsum.......................
.....................................
.....................................
Nulla euismod commodo libero sit amet viverra.
Fusce mauris elit, gravida sit amet luctus eu, sodales sit amet ipsum.
Donec tincidunt tincidunt quam, vel faucibus magna tristique et.
Duis quis enim arcu. Nam varius luctus tempus. Suspendisse potenti.
Duis iaculis eleifend diam. Etiam volutpat tincidunt dolor,
id dignissim risus pellentesque in. Nam ullamcorper felis
sed nisl luctus tincidunt. In metus tellus, pretium in fermentum nec,
posuere vitae turpis. Nulla facilisi. Aenean id purus eros, sed dignissim massa.
Sed condimentum mollis nunc nec aliquet. Pellentesque porta arcu vel massa rutrum
pellentesque. Aliquam consectetur volutpat sodales. Vivamus porttitor pellentesque elit,
nec vestibulum lacus vestibulum laoreet. Aliquam erat volutpat.
Cras molestie tellus non dolor volutpat fringilla. Morbi ut justo justo,
eu euismod sapien. Curabitur iaculis metus in ligula ultrices volutpat.
</section>
</article>
<aside>
<p><aside> - Defines an aside</p>
ASIDE Content (sidebar)
</aside>
</div>
</div>
<footer>
Page footer content area
</footer>
</div>
</div>
</body>
</html>
and the css:
/* CSS Document */
html {
margin:0; padding:0;
}
body {
margin:0;
padding:0;
line-height: 1.5em;
font-family:Geneva, Arial, Helvetica, sans-serif;
}
#wrap {
width:900px;
margin:0px auto;
}
header {
border:1px solid #000;
height:135px;
background:#DEDEDE;
margin-bottom:0px;
width:100%;
}
h1 { margin-top:45px;
}
#mainarticle {
border:1px solid #000; border-top:none;
background:#fff;
width:900px;
background: url(images/faux-2-2-col.gif);
margin-bottom: 0px;
overflow: auto; /* Paul O Brien Fix for IE www.pmob.co.uk */
}
#page{
width:900px;
margin:0; auto;
text-align:center;
}
header, footer, nav, article, section, aside {
display:inline-block;
}
nav {
width:100%;
background-color:#F0F8FF;
float:left;
border:1px solid #000;
}
nav ul{
width:100%;
list-style:none;
margin:0;
padding:0;
}
nav ul li{
display:inline;
padding:3px 7px;
}
nav span{
float:right;
display:inline-block;
}
aside {
width:20%;
display: table-cell;
display:block;
margin:4px 2px;
padding:10px;
float:right;
margin-top:10px;
margin-bottom:10px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
}
article {
display: table-cell;
width:70%;
background-color:#B0E2FF;
margin:4px 2px;
padding:10px;
float:left;
margin-top:10px;
margin-bottom:10px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
}
section {
display:block;
background-color:#E0FFFF;
font-family:Cambria, Verdana, Arial, sans-serif;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
margin:4px 2px;
padding:10px;
}
footer { width:100%;
background-color:#000;
margin-top:0px;
height:50px;
clear:both;
color:#fff;
border:1px solid #000;
}
What a performance! The joys of css and html5..
Unbelievably now I am going to code an html5 Wordpress theme based on this template...I think I am going mad!!:-) Thanks for all help & best wishes to all!
I have a website I'm working on that I should have perfected the layout on FIRST. But I am now faced with the issue of the not going all the way to the bottom. I have read the tutorials on how to get the 3 column layout in CSS http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks
but
what I need is something that will be an easy fix for my existing site.... I have about 10 pages already created and I was thinking about going back to a table layout (and then retrofitting the whole thing like I've done here -->http://www.centuryautosd.com/new.asp
unless
someone has an easier, better way of doing it.
Here is the existing website as it stands now with CSS and the issue with the columns -->
http://www.centuryautosd.com/
I could sure use some help!
I'm pretty sure this tactic will work for you: http://www.ejeliot.com/blog/61
Edit: Ok, here we go.
Looking past the Dreamweaver template and split up inline CSS, I have made adjustments as follows:
1> Move mainContent between sidebar1 and sidebar2 in the HTML.
2> Change sidebar1's css to:
.thrColFixHdr #sidebar1 {
float: left;
width: 150px;
background: #CCCCCC;
padding: 15px 10px 0px 20px;
margin-bottom: -2000px;
padding-bottom: 2000px;
}
The background has been changed to highlight the effect on the page.
3> Change sidebar2's css to:
.thrColFixHdr #sidebar2 {
float: left;
width: 160px;
background: #EEEEEE;
padding: 15px 10px 0px 20px;
margin-bottom: -2000px;
padding-bottom: 2000px;
}
4> Change mainContent's css to:
.thrColFixHdr #mainContent {
float: left;
width: 390px;
background: #DDDDDD;
padding: 0 10px;
margin-bottom: -2000px;
padding-bottom: 2000px;
}
5> Add a definition for contentContainer:
.thrColFixHdr #contentContainer {
overflow: hidden;
}
6> Change .footer to #footer and change margin-top: 8px to padding-top: 8px and add text-align:center and break up the footer text.
Entire code run through Notepad++ HTML Tidy here (some tab formatting slightly lost when putting into Stack Overflow):
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="generator" content=
"HTML Tidy for Windows (vers 14 February 2006), see www.w3.org" />
<meta http-equiv="Content-Type" content=
"text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
/*<![CDATA[*/
body {
font: 100% Verdana, Arial, Helvetica, sans-serif;
background: #666666;
margin: 0;
padding: 0;
text-align: center;
color: #000000;
}
.thrColFixHdr #container {
width: 780px;
background: #FFFFFF;
margin: 0 auto;
border: 1px solid #000000;
text-align: left;
}
.thrColFixHdr #header {
background: #DDDDDD;
padding: 0 10px 0 20px;
}
.thrColFixHdr #header h1 {
margin: 0;
padding: 10px 0;
}
.thrColFixHdr #contentContainer {
overflow: hidden;
}
.thrColFixHdr #sidebar1 {
float: left;
width: 150px;
background: #CCCCCC;
padding: 15px 10px 0px 20px;
margin-bottom: -2000px;
padding-bottom: 2000px;
}
.thrColFixHdr #sidebar2 {
float: left;
width: 160px;
background: #EEEEEE;
padding: 15px 10px 0px 20px;
margin-bottom: -2000px;
padding-bottom: 2000px;
}
.thrColFixHdr #mainContent {
float: left;
background: #DDDDDD;
width: 390px;
padding: 0 10px;
margin-bottom: -2000px;
padding-bottom: 2000px;
}
.thrColFixHdr #footer {
padding: 0 10px 0 20px;
background:#BBBBBB;
}
.thrColFixHdr #footer p {
margin: 0;
padding: 10px 0;
}
.clearfloat {
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
}
/*]]>*/
</style>
<!--[if IE 5]>
<style type="text/css">
/* place css box model fixes for IE 5* in this conditional comment */
.thrColFixHdr #sidebar1 { width: 180px; }
.thrColFixHdr #sidebar2 { width: 190px; }
</style>
<![endif]-->
<!--[if IE]>
<style type="text/css">
/* place css fixes for all versions of IE in this conditional comment */
.thrColFixHdr #sidebar2, .thrColFixHdr #sidebar1 { padding-top: 30px; }
.thrColFixHdr #mainContent { zoom: 1; }
/* the above proprietary zoom property gives IE the hasLayout it needs to avoid several bugs */
</style>
<![endif]-->
<style type="text/css">
/*<![CDATA[*/
.side a {
color: #FFF;
text-decoration: none;
}
a.side:link {color:#FF3;
text-decoration: none;
} /* unvisited link */
a.side:visited {color:#FFF
text-decoration: none;
} /* visited link */
a.side:hover {color:#C00}
a.side:active {color:#C00}
/*]]>*/
</style>
<style type="text/css">
/*<![CDATA[*/
#footer {
font: 12px Arial, Helvetica, sans-serif;
color: #FF3;
text-decoration: none;
padding-top: 8px;
text-align: center;
}
a.footer:link {color:#FF3}
a.footer:visited {color:#FFF}
a.footer:hover {color:#C00}
a.footer:active {color:#C00}
/*]]>*/
</style>
</head>
<body class="thrColFixHdr">
<div id="container">
<div id="header">
<h1>Header</h1><!-- end #header -->
</div>
<div id="contentContainer">
<div id="sidebar1">
<h3>Sidebar1 Content</h3>
<p>The background color on this div will only show for the
length of the content. If you'd like a dividing line
instead, place a border on the left side of the #mainContent
div if it will always contain more content.</p>
<p>Donec eu mi sed turpis feugiat feugiat. Integer turpis arcu,
pellentesque eget, cursus et, fermentum ut, sapien.</p>
<!-- end #sidebar1 -->
</div>
<div id="mainContent">
<h1>Main Content</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Praesent aliquam, justo convallis luctus rutrum, erat nulla
fermentum diam, at nonummy quam ante ac quam. Maecenas urna
purus, fermentum id, molestie in, commodo porttitor, felis. Nam
blandit quam ut lacus. Quisque ornare risus quis ligula.
Phasellus tristique purus a augue condimentum adipiscing.
Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique
in, vulputate at, odio. Donec et ipsum et sapien vehicula
nonummy. Suspendisse potenti.</p>
<h2>H2 level heading</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Praesent aliquam, justo convallis luctus rutrum, erat nulla
fermentum diam, at nonummy quam ante ac quam. Maecenas urna
purus, fermentum id, molestie in, commodo porttitor, felis. Nam
blandit quam ut lacus. Quisque ornare risus quis ligula.
Phasellus tristique purus a augue condimentum adipiscing.
Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique
in, vulputate at, odio.</p><!-- end #mainContent -->
</div>
<div id="sidebar2">
<!-- #BeginLibraryItem "/Library/sidebar2.lbi" -->
<div align="center" class="side">
<img src="images/seHable.jpg" width="162" height="48" alt=
"Se Habla Espanol" border="0" /><br />
<br />
<a href="https://secure.carfax.com/creditCard.cfx" target=
"_blank"><img src="images/carfax.jpg" width="145" height="35"
alt="CARFAX" border="0" /></a><br />
<a href="https://secure.carfax.com/creditCard.cfx" target=
"_blank">FREE CAR FAX</a><br />
<br />
<a href=
"http://www.autorepair.ca.gov/pubwebquery/Vehicle/PubTstQry.aspx"
target="_blank"><img src="images/caGOV.jpg" width="109"
height="78" alt="CA.gov" longdesc=
"http://www.autorepair.ca.gov/pubwebquery/Vehicle/PubTstQry.aspx"
border="0" /><br />
Verify a Smog Check</a><br />
<br />
<a href="http://www.iihs.org/ratings/default.aspx" target=
"_blank"><img src="images/topSafetyPick.jpg" width="111"
height="131" alt="Top Safety Picks" longdesc=
"http://www.iihs.org/ratings/default.aspx" border=
"0" /><br />
Top Safety Picks</a><br />
<br />
<a href="http://www.kbb.com/" target="_blank"><img src=
"images/kbb.jpg" width="155" height="56" alt=
"Kelly Blue Book" longdesc="http://www.kbb.com/" border=
"0" /><br />
Kelly Blue Book</a>
</div><!-- #EndLibraryItem -->
<h3>Sidebar2 Content</h3>
<p>The background color on this div will only show for the
length of the content. If you'd like a dividing line
instead, place a border on the right side of the #mainContent
div if it will always contain more content.</p>
<p>Donec eu mi sed turpis feugiat feugiat. Integer turpis arcu,
pellentesque eget, cursus et, fermentum ut, sapien.</p>
<!-- end #sidebar2 -->
</div>
<!-- This clearing element should immediately follow the #mainContent div in order to force the #container div to contain all child floats --><br class="clearfloat" />
</div>
<div id="footer">
<!-- #BeginLibraryItem "/Library/footer.lbi" -->
<span class="footer">CENTURY AUTO GROUP, INC. |
619.281.2300<br />
COPYRIGHT 2009-2011 ALL RIGHTS RESERVED | EMAIL: <a href=
"mailto:staff#centuryautosd.com" class=
"footer">STAFF#CENTURYAUTOSD.COM</a></span>
<!-- #EndLibraryItem --><!-- end #footer -->
</div><!-- end #container -->
</div>
</body>
</html>