______________________
| 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>
Related
This question already has answers here:
In CSS Flexbox, why are there no "justify-items" and "justify-self" properties?
(6 answers)
What's the difference between align-content and align-items?
(15 answers)
Closed 1 year ago.
I am desperate to know why the div that works under the flex container doesn't follow "align-items:flex-end"? (Altho the result now is what I want, but I just want to understand the logic behind it)
The below picture shows the result. which <h2> section doesn't go to the cross end, but <div2> does.
enter image description here
following the HTML and CSS code
body,html{
padding: 0;
margin: 0;
height: 100%;
}
body{
background-color: #3F5D45;
display:flex;
align-items:center;
justify-content:center;
}
.all{
width: 90%;
}
.top{
height: 60px;
background-color: #EAF0ED;
padding: 0 30px;
border-radius: 5px 5px 0 0;
color: #3F5D45;
font-weight: bold;
display:flex;
justify-content:space-between;
}
.div1{
background-color: #fff;
padding: 30px 50px;
display:flex;
flex:1;
}
.div1 .con{
padding-left:50px;
display:flex;
flex-direction:column;
justify-content:space-between;
align-items:flex-end;
flex:1 1 66.6%;
}
.div2 i{
font-size: 20px;
color: #3F5D45;
padding: 0 3px;
}
.div1 .pic{
height: 350px;
width: 350px;
background-image: url('https://images.unsplash.com/photo-1462745294598-b3f9a2d7b858?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=334&q=80');
background-size: cover;
flex:1 1 33.3%;
}
<div class="all">
<div class="top">
<img src="https://pei-qun.github.io/Sweetaste/img/flex-ex-img3.svg" height="55" alt="">
<p>more</p>
</div>
<div class="div1">
<div class="pic"></div>
<div class="con">
<article>
<h2>Lorem ipsum dolor sit amet</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque imperdiet eu odio et vestibulum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris sollicitudin sem justo, non pulvinar nunc vehicula in. Nullam non mollis dolor, in luctus est. Phasellus dictum erat ut fermentum consequat.</p></article>
<div class="div2">
<i class="fa fa-share-square-o"></i>
<i class="fa fa-heart-o"></i>
<i class="fa fa-facebook-square" ></i>
</div>
</div>
</div>
If anyone knows why is the reason this happened, please let me know!
It will be much appreciated! Thank you!
I have to inline two divs side by side. The thing is, I can't edit HTML and they don't have a container. To make things even more complicated, the first div needs to be wider than the second one. And I have no idea how to do this and make it responsive.
This is what I have so far. But it's not responsive. To make it so, I'd have to edit it with #media and I'm really trying to avoid that. Is there a way I could make this cleaner? A way I could use flex maybe, without a container? And make it responsive too, without having it meshed together on smaller devices?
.one,
.two {
float: left;
}
.one {
width: 66.66%;
}
.two {
width: 33.33%;
}
<div class="one">content goes here</div>
<div class="two">content goes here</div>
EDIT: This is what the outline of my code looks like, with a container. Just to get you guys more information about the issue. Div with a class section-one has 5 items inside, and they need to stay inlined and responsive when the window is resized, so I don't want to mess up the code I currently have because it behaves well on smaller screens.
.container {}
.heading {
text-align: center;
margin-bottom: 35px;
}
.section-one {
text-transform: uppercase;
display: flex;
flex-wrap: wrap;
text-align: center;
justify-content: space-between;
}
.item {
position: relative;
flex-shrink: 0;
margin: 0 auto;
margin-bottom: 15px;
}
.section-left {
float: left;
text-transform: uppercase;
width: 66.66%;
margin-top: 80px;
padding-right: 80px;
}
.section-right {
float: left;
width: 33.33%;
}
<div class="container">
<div class="heading">
<h2>Lorem ipsum dolor</h2>
<p>Morbi posuere mi condimentum dui suscipit vulputate. Donec lectus diam.</p>
</div>
<!--- /.heading -->
<div class="section-one">
<div class="item">Praesent eu elementum.</div>
<div class="item">Praesent eu elementum.</div>
<div class="item">Praesent eu elementum.</div>
<div class="item">Praesent eu elementum.</div>
<div class="item">Praesent eu elementum.</div>
</div>
<!--- /.section-one -->
<div class="section-left">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eu sodales est. Nullam cursus id nibh mattis porta. Cras aliquet eros urna, quis imperdiet tortor placerat sed.
</div>
<!--- /.section-left -->
<div class="section-right">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eu sodales est. Nullam cursus id nibh mattis porta. Cras aliquet eros urna, quis imperdiet tortor placerat sed.
</div>
<!--- /.section-right -->
</div>
You could use CSS calc() function along-with display:inline-block instead of float to align both divs responsively without making use of media query.
But as both divs are display as inline-block and when using inline-block it adds white-space around it's block, to remove that I have used font-size:0 in body tag, so on remaining block in your design you have to assign font-size manually or else text won't be visible.
body{
font-size:0;
margin:0;
}
.one{
display:inline-block;
background:pink;
width:calc(100vw - 40vw);
font-size:16px;
}
.two{
display:inline-block;
background:pink;
width:calc(100vw - 60vw);
font-size:16px;
}
<div class="cont">
<div class="one">content goes here</div>
<div class="two">content goes here</div>
</div>
Given the fact you already use Flexbox, I suggest you do it for this too, like this.
If you don't want the container, just drop its markup and move its CSS properties to the body
Fiddle demo
Stack snippet
.container {
display: flex; /* added */
flex-wrap: wrap; /* added */
}
.heading {
flex: 0 0 100%; /* added, behaves like a block */
text-align: center;
margin-bottom: 35px;
}
.section-one {
flex: 0 0 100%; /* added, behaves like a block */
text-transform: uppercase;
display: flex;
flex-wrap: wrap;
text-align: center;
justify-content: space-between;
}
.item {
position: relative;
flex-shrink: 0;
margin: 0 auto;
margin-bottom: 15px;
}
.section-left {
flex: 1 0 66.666%; /* added, behaves like an inline-block but fill when on single line */
min-width: 400px;
text-transform: uppercase;
margin-top: 80px;
padding-right: 80px;
box-sizing: border-box; /* added, make padding be included in set width */
border: 1px dotted gray; /* demo purpose */
}
.section-right {
flex: 1 0 33.333%; /* added, behaves like an inline-block but fill when on single line */
min-width: 200px;
box-sizing: border-box; /* added, make border be included in set width */
border: 1px dotted gray; /* demo purpose */
}
<div class="container">
<div class="heading">
<h2>Lorem ipsum dolor</h2>
<p>Morbi posuere mi condimentum dui suscipit vulputate. Donec lectus diam.</p>
</div>
<!--- /.heading -->
<div class="section-one">
<div class="item">Praesent eu elementum.</div>
<div class="item">Praesent eu elementum.</div>
<div class="item">Praesent eu elementum.</div>
<div class="item">Praesent eu elementum.</div>
<div class="item">Praesent eu elementum.</div>
</div>
<!--- /.section-one -->
<div class="section-left">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eu sodales est. Nullam cursus id nibh mattis porta. Cras aliquet eros urna, quis imperdiet tortor placerat sed.
</div>
<!--- /.section-left -->
<div class="section-right">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eu sodales est. Nullam cursus id nibh mattis porta. Cras aliquet eros urna, quis imperdiet tortor placerat sed.
</div>
<!--- /.section-right -->
</div>
I suggest you to use a media query anyway to make your divs on top of each other on small devices, especially if you have text content. The max-width I'm giving to you is just an example
#media screen and (max-width: 480px) {
.one,
.two {
float: none;
width: 100%;
}
}
I would gladly suggest you the flex-box property, but if you don't got a container and can't modify the HTML, this will be complicated.
Here's the link anyway : https://css-tricks.com/snippets/css/a-guide-to-flexbox/
With flexbox, you just have to give the property to your container :
.container {
display: flex;
}
Then you can choose the way you want to sort your elements :
.container {
flex-direction: row;
}
Again this is an example, check the link i gave you for further informations.
You need to reset box-sizing to include padding and border into width calculation.
The CSS box-sizing property is used to alter the default CSS box model used to calculate width and height of the elements.
A media query will help to pile them when boxes become too small.
Media queries are useful when you want to apply CSS styles depending on a device's general type (such as print vs. screen), specific characteristics (such as the width of the browser viewport), or environment (such as ambient light conditions). With the huge variety of internet-connected devices available today, media queries are a vital tool for building websites and apps that are robust enough to work on whatever hardware your users have.
example
.container {}
.heading {
text-align: center;
margin-bottom: 35px;
}
.section-one {
text-transform: uppercase;
display: flex;
flex-wrap: wrap;
text-align: center;
justify-content: space-between;
}
.item {
position: relative;
flex-shrink: 0;
margin: 0 auto;
margin-bottom: 15px;
}
.section-left {
float: left;
text-transform: uppercase;
width: 66.66%;
/*margin-top: 80px; remove */
padding-right: 80px;
}
.section-right {
float: left;
width: 33.33%;
}
/* updates */
.section-left,
.section-right {
box-sizing:border-box;
}
#media all and (max-width : 599px) {
.section-left,
.section-right {
width:100%;
padding:1em;
}
}
/* let's see them */
div {
box-shadow:0 0 0 2px green;
}
<div class="container">
<div class="heading">
<h2>Lorem ipsum dolor</h2>
<p>Morbi posuere mi condimentum dui suscipit vulputate. Donec lectus diam.</p>
</div>
<!--- /.heading -->
<div class="section-one">
<div class="item">Praesent eu elementum.</div>
<div class="item">Praesent eu elementum.</div>
<div class="item">Praesent eu elementum.</div>
<div class="item">Praesent eu elementum.</div>
<div class="item">Praesent eu elementum.</div>
</div>
<!--- /.section-one -->
<div class="section-left">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eu sodales est. Nullam cursus id nibh mattis porta. Cras aliquet eros urna, quis imperdiet tortor placerat sed.
</div>
<!--- /.section-left -->
<div class="section-right">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eu sodales est. Nullam cursus id nibh mattis porta. Cras aliquet eros urna, quis imperdiet tortor placerat sed.
</div>
<!--- /.section-right -->
</div>
i want to display three div tag in a parent div tag
parent div has no width and height
one inner div will be on left side with fixed width and height
2nd inner div will be in center with fixed height only and its width is between two other div tags
3rd inner div will be on right side
css
#container{}
#columnright{
float:left;
width:200px;
height: 400px;
}
#content{
margin-right:auto;
margin-left:auto;
height: 400px;
}
#columnleft{
float:right;
width:150px;
height: 400px;
}
html
<div id="container">
<div id="columnright"></div>
<div id="content"></div>
<div id="columnleft"> </div>
</div>
<style>
#columnright{
width:200px;
float:left;
}
#content{
width:200px;
float:left;
}
#columnleft{
float:left;
width:150px;
}
</style >
<div id="container">
<div id="columnright">hi</div>
<div id="content">hello</div>
<div id="columnleft">how</div>
</div>
<style>
#columnright
{
width: 200px;
height:400px;
}
#content
{
float: left;
height: 400px;
}
#columnleft
{
float: right;
width: 150px;
height: 400px;
}
</style>
<div id="container">
<div id="columnright"></div>
<div id="content"></div>
<div id="columnleft"></div>
</div>
I think the above code can help you. In the first inner div, no need to right float : left. Becoz u told that it must have fixed width and height. If u mention float property, it doesn't occupy the space.
You need to youse CSS3's calc() function to calculate the width of your content div.
See here:
JSFiddle
I also colored the divs for easier understanding. You should probably also remain your div's, because at the time your "columnright" is on the left hand side of the screen and vice versa.
This accomplishes what you're trying to do without floating anything. I also corrected your #columnright to actually be on the right side and your #columnleft to actually be on the left side. And I added background color to better illustrate what's going on.
HTML
<div id="container">
<div id="columnright"></div>
<div id="content"></div>
<div id="columnleft"> </div>
</div>
CSS
#container {
position:relative;
background-color:#E0E0E0;
}
#columnleft {
position:absolute;
top:0;
left:0;
width:150px;
height: 400px;
background-color:#CCCCE0;
}
#columnright {
position:absolute;
top:0;
right:0;
width:200px;
height: 400px;
background-color:#E0CCCC;
}
#content {
margin-right:200px;
margin-left:150px;
height: 400px;
background-color:#CCE0CC;
}
Fiddle
http://jsfiddle.net/mNnAq/
http://jsfiddle.net/hdrenollet/dsbSt/embedded/result/
If I understand you correctly, you're looking for something like this:
<head>
<title></title>
<script>
</script>
<style>
#parent{
width:100%;
}
#columnleft{
position:relative;
float:left;
border: 1px solid black;
top:0px;
width:150px;
height: 400px;
}
#content{
position:relative;
width:100%;
top:0px;
padding: 20px;
margin-left:150px;
margin-right:200px;
}
#columnright{
border: 1px solid black;
float:right;
top:0px;
width:200px;
height: 400px;
}
</style>
</head>
<body>
<div id="parent">
<div id="columnleft"></div>
<div id="columnright"></div>
<div id="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean lectus sem, lobortis fermentum eleifend non, interdum at orci. Ut nec mauris vulputate, eleifend elit vitae, suscipit felis. Etiam leo ligula, pellentesque non urna sed, sagittis hendrerit nibh. Sed pharetra pellentesque nunc vitae imperdiet. orci. Nam ac nisi sed ipsum ullamcorper aliquet eget lobortis enim. Duis consequat sed arcu vel vulputate. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus mollis porttitor sapien. Duis a sodales justo. Mauris gravida aliquet nunc in scelerisque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel nunc sagittis, dapibus quam eu, congue magna.</div>
</div>
</body>
You'll need to set your margin-left and margin-right of your content container to the widths of your left and right columns.
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>