I am wondering how to make a liquid(15%,70%,15%) 3 column css layout have dynamic equal height columns where each column matches the height of the longest column dynamically(in other words: according to content in each column, if column 1 is longer than 2 and 3, then columns 2 and 3 should automatically be the same height as column 1) Is there a way to accomplish this, I have looked at the holy grail: http://alistapart.com/article/holygrail and it says that it does not work with equal height columns. I am wondering if I can modify my css code to do exactly that.
CSS Code:
/* Generated by http://www.cssportal.com */
/*#import url("/robotics/css/reset.css");*/
html,body {
background:url(background.jpg') no-repeat center center fixed;
-webkit-background-size: cover; /* For WebKit*/
-moz-background-size: cover; /* Mozilla*/
-o-background-size: cover; /* Opera*/
background-size: cover; /* Generic*/
font-family: Verdana, Arial, Helvetica, sans-serif;
/*font-size: 13px;*/
color:#FFFFFF;
text-align:center;
}
ul {
text-align:center;
margin-left: -40px;
}
ul li {
display:block;
font-size:10pt;
padding: 0px 15px 0px 15px;
}
ul li a{
margin: 0 auto;
}
ul li a:link {
color:#fff;
text-decoration:none;
}
ul li a:visited {
color:#fff;
text-decoration:none;
}
ul li a:hover{
color:#fff;
text-decoration:none;
}
ul li a:active{
color:#fff;
text-decoration:none;
}
p {
font-size: 10pt;
padding: 10px;
}
#wrapper {
width: 100%;
min-width: 768px;
/*max-width: 900px;*/
margin: 0 auto;
}
#headerwrap {
width: 100%;
float: left;
margin: 0 auto;
}
#header {
height: 100px;
/*border-radius: 10px;*/
/*border: 1px solid #FFFFFF;*/
margin: 5px;
}
#header img {
width: 70%;
height: 100%;
float:left;
margin-left:15%;
}
#contentliquid {
float: left;
width: 100%;
}
#contentwrap {
margin-left: 15%;
margin-right: 15%;
float:left;
width:70%;
}
#content {
border-radius: 10px;
border: 1px solid #FFFFFF;
margin: 5px;
height: 500px;
}
#leftcolumnwrap {
width: 15%;
margin-left:-100%;
float: left;
}
#leftcolumn {
border-radius: 10px;
border: 1px solid #FFFFFF;
margin: 5px;height: 500px;
}
#rightcolumnwrap {
width: 15%;
margin-left: -15%;
float: left;
}
#rightcolumn {
border-radius: 10px;
border: 1px solid #FFFFFF;
margin: 5px;height: 275px;
}
#footerwrap {
width: 100%;
float: left;
margin: 0 auto;
clear: both;
}
#footer {
height: 100px;
border-radius: 10px;
border: 1px solid #FFFFFF;
margin: 5px;
}
HTML Page:
<html>
<head>
<link rel="stylesheet" type="text/css" href="page.css">
<title>Sample</title>
</head>
<body>
<div id="wrapper">
<div id="headerwrap">
<div id="header">
<p>This is the header.</p>
</div>
</div>
<div id="contentliquid"><div id="contentwrap">
<div id="content">
<p>This is the center column. Please make me the same height as everyone else!</p>
</div>
</div></div>
<div id="leftcolumnwrap">
<div id="leftcolumn">
<p>This is the left column. Please make me the same height as everyone else!</p>
</div>
</div>
<div id="rightcolumnwrap">
<div id="rightcolumn">
<p>This is the right column. Please make me the same height as everyone else!</p>
</div>
</div>
<div id="footerwrap">
<div id="footer">
<p>This is the footer.</p>
</div>
</div>
</div>
Is there a way to make all columns the same height dynamically?
You should try using display: table-cell; (this requires a parent element set to display: table; Table cell elements always share the height of their container, and their container (if it's not otherwise set) will always have the height of it's largest child.
Check out this fiddle for an example:
http://jsfiddle.net/kLMtb/
Your html may need a little bit of reformatting as well, I changed a few things in that example, so take a look. Primarily, the center column needs to be put in between the left and right columns in your html.
And take a look at this for an explanation of css table display properties:
http://ajaxian.com/archives/display-table
There are 2 ways I know of to achieve equal height columns.
1) CSS tables
FIDDLE
Markup:
<div id="header">
<p>This is the header.</p>
</div>
<div class="wpr">
<div id="leftcolumn">
<p>This is the left column. Please make me the same height as everyone else!</p>
</div>
<div id="contentliquid">
<p>Some content</p>
</div>
<div id="rightcolumn">
<p>This is the right column. Please make me the same height as everyone else!</p>
</div>
</div>
<div id="footer">
<p>This is the footer.</p>
</div>
CSS
#header {
height: 100px;
background: orange;
}
.wpr
{
display:table;
}
#leftcolumn
{
width: 200px;
background: aqua;
display:table-cell;
}
#rightcolumn
{
width: 200px;
background: pink;
display:table-cell;
}
#contentliquid {
background: yellow;
overflow:hidden;
display:table-cell;
}
#footer
{
clear:both;
background: green;
}
2) Faux columns
Requires a background image with repeat-y (Read the above article).
Something like this:
background: #ccc url(../images/bg_birch_800.gif) repeat-y 50% 0;
Related
Quick question regarding positioning an absolute div in a parent display: table-cell in IE.
I have created a jsfiddle of the layout that I am trying to create and it works in chrome and firefox but in IE it breaks the .list-container absolute height of the child (which is se to to fill all space from the top 118px down) when inside of a parent with display: table-cell .
Is there any IE styling rules that I am missing to help it render the absolute child? Is this something that is possible in IE?
jsFiddle
html, body{
height:100%;
margin:0;
padding:0px;
}
.table{
display : table;
width : 100%;
height : 100%;
}
.row{
display : table-row;
width : 100%;
height : 100%;
}
.table-cell{
height:100%;
width:50%;
border:1px solid #000;
display : table-cell;
position: relative;
}
.header{
position:relative;
top:0px;
height:112px;
margin:0px;
border:3px solid blue;
background: rgba(0,0,230, .2);
}
.list-container{
position:absolute;
top:118px;
left:0px;
bottom:0px;
right:0px;
margin:0px;
overflow:auto;
overflow-x:hidden;
border:3px solid #CCC;
background: rgba(0,0,0,.1);
}
<body>
<div class="table">
<div class="row">
<div class="table-cell">
<header class="header"></header>
<div class="list-container">
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>
</div>
<div class="table-cell">
</div>
</div>
</div>
</body>
I found that in IE a table-cell only accepts the height from the child elements. If you add a wrapper div.table that has a styleof 100% with and height around the header.header and div.list-container it will give thew parent div.table-cell aheight of 100% of the parent table.
here is a jsfiddle showing the changes:
jsFiddle
html,
body {
height: 100%;
margin: 0;
padding: 0px;
}
.table {
display: table;
width: 100%;
height: 100%;
}
.row {
display: table-row;
width: 100%;
height: 100%;
}
.table-cell {
height: 100%;
width: 50%;
border: 1px solid #000;
display: table-cell;
position: relative;
vertical-align: top;
}
.header {
position: relative;
top: 0px;
height: 112px;
margin: 0px;
border: 3px solid blue;
background: rgba(0, 0, 230, .2);
}
.list-container {
position: absolute;
top: 118px;
left: 0px;
bottom: 0px;
right: 0px;
margin: 0px;
overflow: auto;
overflow-x: hidden;
border: 3px solid #CCC;
background: rgba(0, 0, 0, .1);
}
<body>
<div class="table">
<div class="row">
<div class="table-cell">
<header class="header"></header>
<div class="list-container">
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>
</div>
<div class="table-cell">
</div>
</div>
</div>
</body>
I've got a very basic page that looks like this :
JSFiddle - DEMO
Currently the image is centred on the wrapper 'Blue' DIV. This 'blue' DIV is centred on the page and needs to remain so.
What I'd like is to be able to have the 1st image aligned with the left edge of the DIV highlighted in Blue and then be able to put an image aligned to the right edge of the same Blue DIV.
I found a post on here that used this code :
div.wrap {
width: 600px;
border: 1px solid #f00;
height: 300px;
position: relative;
}
.wrap img {
border: 1px solid blue;
position: absolute;
bottom: 0;
}
.wrap img:nth-of-type(1) {
left: 0;
}
.wrap img:nth-of-type(2) {
right: 0;
}
But that just seems to line up with the main container DIV, not the Blue DIV..
How can I do this properly ?
Thanks :)
Something like this?
(or alternatively)
HTML
<body>
<div id="holder">
<div id="logo" class='left'>
<img src="http://images.google.com/intl/en_ALL/images/logos/images_logo_lg.gif" />
</div>
<div class='right'>
<img src="http://images.google.com/intl/en_ALL/images/logos/images_logo_lg.gif" />
</div>
<div style='clear:both;'></div>
<div id="wrapper"></div>
</div>
</body>
CSS
html, body {
height: 100%;
text-align:center;
margin: 0px;
padding: 0px;
background: #fff;
font-family:'Open Sans', sans-serif;
font-size: 11pt;
font-weight: 400;
color: #fff;
}
#holder {
margin :0 auto;
display:inline-block;
width: 850px;
}
.left {
float:left;
}
.right {
float:right;
}
#logo {
align:middle;
text-align:center
}
#wrapper {
height:200px;
position: relative;
padding: 0em 0em 0em 0em;
background: #fff;
border: 1px solid blue;
}
I'm trying to get a layout to look like this following:
http://i42.tinypic.com/2i8wyrk.png
I've managed to get the "content" div aligned fine with the header div, but I'm not sure how to put the nav div in there and keep it aligned properly. This is what I have so far:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Page Title</title>
<style>
div#container {
position: relative;
}
body {
background-color: #121212
}
div#header {
background-color: #900;
width: 70%;
height: 10%;
border: 2px solid #488ed0;
margin: 0 auto;
}
div#nav {
position: absolute;
background-color: #900;
border: 2px solid #488ed0;
width: 150px;
height: 200px;
float: left;
}
div#content {
border: 2px solid #488ed0;
background-color: #900;
width: 70%;
height: 900px;
margin: 0 auto;
}
a {
color: #FFFFFF;
text-decoration: none;
}
a:hover {
color: #000000;
text-decoration: underline;
}
</style>
</head>
<body>
<div id = "container">
<div id="header">
<center><img src = "images/logo.png" /></center>
</div>
<br />
<div id="nav">
<center><br />
<a href='#'>Index</a><br />
<a href='#'>About</a><br />
<a href='#'>Contact</a>
</center>
</div>
<div id="content"></div>
</div>
</body>
</html>
How can I align the nav div as it is in the example mockup I made? I want to make sure the left side of 'nav' stays aligned with the header, and the right side of 'content' stays aligned with the right side of the header.
For nav I noticed that you are using position: absolute and a float: left;. While aligning might need a bit of tweaking the best solution I can think of is using float for both the nav and content. For example:
#header{
margin: 0 auto;
width: 800px;
height: 200px;
}
#container{
margin: 0 auto;
width: 800px;
height: auto;
}
#nav{
float: left;
width: 200px;
height: auto;
}
#content{
float: right;
width: 600px;
height: 500px;
}
.clear{
clear: both;
}
Of course adjust the widths, height and margins according to the spacing you would like.
<div id="header">This is my banner</div>
<div id="container">
<div id="nav">This is my navigation menu</div>
<div id="content">This is my content</div>
</div>
<div class="clear">
If you want to make sure that things stay aligned when adding a margin to the nav section use margin-right and if you want to add a margin to the content section use margin-left. Finally, if you need a space between the banner and the two section below it use margin-bottom inside the header CSS.
Here is a solution if you're looking for a liquid layout: http://jsfiddle.net/M78q4/1/
HTML
<div id="head">this</div>
<div id="container">
<div id="nav"></div><div id="content"></div>
</div>
CSS
div#container {
position: relative;
width: 75%;
margin: 0 auto;
}
body {
background-color: #121212
}
div#header {
background-color: #900;
width: 100%;
height: 10%;
border: 2px solid #488ed0;
margin: 0 auto;
-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}
div#nav {
-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
background-color: #900;
border: 2px solid #488ed0;
width: 24%;
height: 200px;
float: left;
margin-right: 2%;
}
div#content {
-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
border: 2px solid #488ed0;
background-color: #900;
width: 74%;
height: 900px;
float: left;
}
a {
color: #FFFFFF;
text-decoration: none;
}
a:hover {
color: #000000;
text-decoration: underline;
}
If you don't want it to be liquid just change the #container width to a fixed width like 800px. Adjust the margins as needed.
This should get the layout you're after: http://jsfiddle.net/WDvwP/
HTML
<div id="head"></div>
<div id="container">
<div id="nav"></div><div id="content"></div>
</div>
CSS
#head{
width:900px; height:100px;
background:#f00;
margin:10px auto;
}
#container{
width:900px; margin:0 auto;
}
#nav{
display:inline-block;
width:250px; height:300px;
background:#0f0;
}
#content{
display:inline-block;
width:600px; height:300px;
background:#00f;
margin:0 0 0 50px;
}
I need some help here. I been trying to get it right for hours and i can't find an efficient solution.
<div id="Header">
<img src='http://3.bp.blogspot.com/-rN0cMMTn_Mw/ToQ6VTghSOI/AAAAAAAAAfs/xl1XMFyn7Jo/s640/18_5_orig.jpg'
/>
<h1>siajdasdasdasd</h1>
<p>sdhaosidasdas</p>
Example of what im trying to do
i want to have a liquid header with an image aligned to the left and a title aligned to the center, but both of em have to align to the middle of the height, no mather if i increase img /div's height
Had to add few more divs but it works. http://jsfiddle.net/74Rnq/23/
HTML:
<div id="Header">
<div class="wrap">
<img src='http://3.bp.blogspot.com/-rN0cMMTn_Mw/ToQ6VTghSOI/AAAAAAAAAfs/xl1XMFyn7Jo/s640/18_5_orig.jpg'/>
<div class="text">
<h1>siajdasdasdasd</h1>
<p>sdhaosidasdas</p>
</div>
</div>
</div>
CSS:
#Header {
position: relative;
height: 200px;
padding: 15px;
background: #DBE6EC;
border-bottom: 1px solid #595959;
overflow: auto;
}
#Header h1, p {
text-align: center;
letter-spacing: -1px;
text-align: center;
font-size: 2em;
color: #1F1F1F;
}
#Header p {
font-size: 1em;
}
#Header img {
float: left;
max-height:100px;
}
#Header .wrap {
display: block;
position: absolute;
width: 100%;
top: 50%;
margin-top: -50px; /* Half of wrap div height */
}
#Header .wrap .text {
position: absolute;
top: 50%;
margin-top: -27.5px; /* Half of text div height */
width: 100%;
}
For modern browsers you can do it via display:table, table-row table cell:
Modify your html like this:
<div id="Header" class="table">
<div class="row">
<div class="cell">
<img src='http://3.bp.blogspot.com/-rN0cMMTn_Mw/ToQ6VTghSOI/AAAAAAAAAfs/xl1XMFyn7Jo/s640/18_5_orig.jpg'/>
</div>
<div class="cell main">
<h1>siajdasdasdasd</h1>
<p>sdhaosidasdas</p>
</div>
</div>
</div>
#Header {
background: #DBE6EC;
border-bottom: 1px solid #595959;
position:relative;
padding:15px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.table {
display:table;
width:100%;
}
.row {
display:table-row;
}
.cell {
display:table-cell;
vertical-align:middle;
}
.cell.main {
width:100%;
}
The updated fiddle is here. This solution won't work in ie7. There is a older workaround for vertical align middle, if you have to support ie7.
Make the container div display: table-cell and each child div display: table-cell. Then you can give the child divs vertical-align: middle and they will always be vertically centered.
HTML:
<div id="Header">
<div id="image">
<img src='http://3.bp.blogspot.com/-rN0cMMTn_Mw/ToQ6VTghSOI/AAAAAAAAAfs/xl1XMFyn7Jo/s640/18_5_orig.jpg' />
</div>
<div id="title">
<h1>siajdasdasdasd</h1>
<p>sdhaosidasdas</p>
</div>
</div>
and CSS:
#Header {
padding: 15px;
background: #DBE6EC;
border-bottom: 1px solid #595959;
display: table;
}
#Header h1, p {
text-align: center;
letter-spacing: -1px;
font-size: 2em;
color: #1F1F1F;
}
#Header p {
font-size: 1em;
}
#Header img {
float: left;
max-height:100px;
}
#title{
display: table-cell;
vertical-align: middle;
width: 100%;
}
#image{
display: table-cell;
vertical-align: middle;
}
Aaand here's the jsFiddle.
I have css code to do layout. i have basic header panel, footer, left panel, and center panel. I want to have left panel and center panel automatically stretch to bottom(blue and gray part all the way to black footer). is there any way to do that?
following are my codes.
thank you,
body {
text-align: center;
}
.wrapper {
position: relative;
width: 960px;
font-size: 0.9em;
margin: 0 auto -20px;
text-align: left;
}
.header {
height: 125px;
background-color:purple;
}
.footer {
position: relative;
width: 960px;
margin: 0 auto;
background-color:black;
}
.footer a {
color: #fff;
text-decoration: underline;
border: 0;
}
.footer p {
position: absolute;
left: 0;
bottom: 4px;
width: 960px;
padding: 0;
color: #fff;
font: 0.8em arial,sans-serif;
text-align: center;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -20px; /* the bottom margin is the negative value of the footer's height */
background-color:yellow;
}
.footer, .push {
height: 20px; /* .push must be the same height as .footer */
}
.leftPanel{
width:200px;
background-color:blue;
float:left;
height: 100%;
}
.centerPanel{
width:760px;
background-color:gray;
float:left;
height: 100%;
}
dl,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,body,html,div,p,blockquote,fieldset,legend,input,select,textarea
{ margin:0; padding:0 }
<div class="wrapper">
<div class="header">
<h1>header</h1>
</div>
<div class="leftPanel">
leftPanel
</div>
<div class="centerPanel">
center Panel
</div>
<div class="push"></div>
</div>
<div class="footer">
<p>footer</p>
</div>
</body>
This is a very work-aroundish solution, but here it goes: http://jsfiddle.net/Us5Cn/
The only way to get elements to stretch to a percentage portion of the height of the view port is to anchor them to the bottom.
See here for specifics.