I am trying to create a two div's side by side that fill my screen 100%. The left div contains some menu and the right the content. Here's the code I have at the moment: http://jsfiddle.net/HpWZW/ . The current problem is the height is only as large as my smallest div's content. So in this case my iframe in the right column is larger than my menu items in the left column; however, the height is limited to the left divs contents not the right. Any ideas? Thanks!
Code
<div>
<div class="table">
<div class="innerLeft">
<span>Left Column</Span>
</div>
<div class="innerRight">
<span>Content with Iframe</span>
</div>
</table>
</div>
...
html, body {height: 100%}
.table {
display: table;
height: 100%;
}
.innerLeft {
display: table-cell;
min-width: 160px;
background-color: lightblue;
color: black;
}
.innerRight {
display: table-cell;
width: 100%;
vertical-align: top;
background-color: red;
color: white;
}
I have ran in the same problem so many times, until I found this: http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks
It is a valid CSS solution for making your colums share the height. Then both will be the height of the largest column.
If you want to make your colums fill the whole screen you could use something like
.innerLeft {
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 50%;
}
.innerRight {
position: absolute;
left: 50%;
top: 0;
bottom: 0;
right: 0;
}
Note that this is css3 and wont work for old browsers.
css3
<style>
html, body{height:100%;padding:0;margin:0;}
div.table, div.table *{box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;}
div.table{width:100%;height:100%;}
div.table div{border:1px solid black;width:50%;height:100%;float:left;}
</style>
html:
<div class="table">
<div class="innerLeft">
<span>Left Column</Span>
</div>
<div class="innerRight">
<span>Content with Iframe</span>
</div>
</table>
Page:
<!DOCTYPE html>
<html>
<head>
<style>
html, body {
height:100%;
padding:0;
margin:0;
}
div.table, div.table * {
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
}
div.table {
width:100%;
height:100%;
}
div.table div {
border:1px solid black;
width:50%;
height:100%;
float:left;
}
</style>
</head>
<body>
<div class="table">
<div class="innerLeft"> <span>Left Column</span>
</div>
<div class="innerRight"> <span>Content with Iframe</span>
</div>
</div>
</body>
</html>
The above code would create two columns whenever you would like to fill the whole screen or a section.
The following code could be used to only fill the whole screen (containers behaves odd when using position absolute, there is workarounds though):
<!DOCTYPE html>
<html>
<head>
<style>
html, body {
height:100%;
padding:0;
margin:0;
}
#left {
width:50%;
height:100%;
position:absolute;
top:0;
left:0;
background:red;
}
#right {
width:50%;
height:100%;
position:absolute;
top:0;
right:0;
background:blue;
}
</style>
</head>
<body>
<div id="left"></div>
<div id="right"></div>
</body>
</html>
Shortest answear is to use proper table, min-height can also help you, but not all browsers respect it.
Does this work for what your wanting?:
http://jsfiddle.net/Sgfnm/
<div>
<div class="table">
<div class="innerLeft">
<span>Left Column</Span>
</div>
<div class="innerRight">
<span>Content with Iframe</span>
</div>
</div>
</div>
.table {
display: block;
}
.innerLeft {
display: block;
width: 160px;
background-color: lightblue;
color: black;
float:left;
}
.innerRight {
display: block;
width: 100%;
vertical-align: top;
background-color: red;
color: white;
}
Related
I have met a problem that i don't know where is wrong. my code is here:
<html>
<head>
<style type="text/css">
#top{
width:100%;
height: 78%;
background-color: #ccc;
}
#left{
width: 45%;
height: 100%;
display: inline-block;
background-color: green;
}
#right{
width:50%;
height: 100%;
display: inline-block;
background-color: pink;}
</style>
</head>
<body>
<div id="top">
<div id="left">
<div id="inside">asd</div>
</div>
<div id="right"></div>
</div>
</body>
</html>
if I add nothing to the "inside" div, then the layout would be alright , just like this:
but if i add any tag or even a few words in the "inside" dev .the layout would get wrong.
I'm new to HTML,so I don't know the problem,who can tell me why this happens? I've been driven crazy!!!help~~~~:(
You can use float (see the other answers), but you don't have to if you don't want to.
#left, #right { vertical-align:top; }
will get you what you want.
Aside: You should add <!DOCTYPE html> to the top of your page. In which case, you'll also need to add
html, body { height: 100% }
to your CSS.
try this:
#right{
width:50%;
height: 100%;
display: inline-block;
background-color: pink;
float:right;}
demo
You can resolve the issue by adding a float attribute in css.
Find the updated html template below
<html>
<head>
<style type="text/css">
#top{
width:100%;
height: 78%;
background-color: #ccc;
}
#left{
width: 45%;
height: 100%;
float: left;
background-color: green;
}
#right{
width: 50%;
height: 100%;
float: left;
background-color: pink;}
</style>
</head>
<body>
<div id="top">
<div id="left">
<div id="inside">test new</div>
</div>
<div id="right">test</div>
</div>
</body>
</html>
I would recommand to you twitter bootstrap for the layout of your div.
Using their css sheet.
<div id=top class=row-fluid>
<div id=right class=span6><div>
<div id=left class=span6><div>
</div>
The placement of block is way easier than with inline-block. All you need to get what you show in example is to add the background color. And float can easily become hard to handle.
there is also way to gain it by giving float to an element
#left {
width: 45%;
height: 100%;
/* display: inline-block; */
background-color: green;
float: left;
}
You're having a problem with block and inline. When the text appears, the browser puts the inside div into block display which ruins the inline styling. I'm not sure if there's a neat way around that using inline-block - you'll have to use float, I reckon.
Here's the float solution applied to your markup:
<html>
<head>
<style type="text/css">
#top {
width:100%;
height: 78%;
background-color: #ccc;
}
#left {
background:green;
float:left;
height:100%;
width:45%;
}
#right {
background:pink;
height:100%;
margin-left:45%;
width:50%;
}
</style>
</head>
<body>
<div id="top">
<div id="left">
<div id="inside">asdf</div>
</div>
<div id="right"></div>
</div>
</body>
</html>
Further, be careful of CSS height. It's a headache waiting to happen.
First, check out a working example of the layout I have:
http://jsfiddle.net/EPC8c/2/
What I'm trying to do is adding a top margin to this. Since I have most of this built on 100% height, things get a little weird when trying this: http://jsfiddle.net/EPC8c/1/ (fixed link)
The fluid layout now leaves the footer being pushed down past 0 or 100% of the page. This is probably working as intended, but I'm trying to find a solution to not cause this.
Any help with this would be amazing.
HTML
<div id="container">
<header></header>
<div id="content"></div>
<footer></footer>
</div>
CSS
html, body {
background: #ff3333;
margin:0;
padding:0;
height:100%;
}
#container {
position:relative;
background: #FFF;
margin: 0 auto;
width: 200px;
min-height:100%;
}
header {
height: 60px;
background: #888;
}
#content {
background: #FFF;
min-height: 200px;
padding-bottom: 60px; /*FOOTER HEIGHT*/
}
footer {
position:absolute;
bottom: 0;
width: 200px;
height: 60px;
background: blue;
}
Here's a solution, courtesy of this question: CSS 100% height with padding/margin
JSFiddle:
http://jsfiddle.net/EPC8c/5/
HTML:
<div id="wrapper">
<div id="container">
<header></header>
<div id="content">
</div>
<footer></footer>
</div>
</div>
CSS:
#wrapper {
display: block;
position:absolute;
height:auto;
bottom:0;
top:0;
left:0;
right:0;
margin-top:20px;
}
It's admittedly not the best solution and it relies on percentage margins, but one route would be to wrap it all in an absolutely positioned div with a percentage upper padding and a negative (equal) percentage bottom padding. Like this:
http://jsfiddle.net/EPC8c/3/
<div id="wrapper">
<div id="container">
<header></header>
<div id="content">
</div>
<footer></footer>
</div>
</div>
CSS:
#wrapper {
position: absolute;
width: 100%;
height: 90%;
padding-top: 10%;
padding-bottom: -10%;
}
I need to define a div which must stay with the top at the normal position, which differs from the top of the surrounding element:
position:relative
top:0
and which grows in the height up to the size of the surrounding element:
position:absolute
bottom:0
I have no idea how to combine the both. Whenever I use a relative box I loose the absolute bottom and whenever I use an absolute box I loose the relative top.
Can anybody help me how to do this in CSS?
Here is an example:
<html>
<head>
</head>
<style type="text/css">
#media screen {
body {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: 0;
padding: 0;
}
#head {
background-color: gray;
}
#rel {
background-color: green;
position: relative;
top: 0;
bottom: 0;
float: left;
}
#abs {
background-color: red;
position: absolute;
top: 0;
bottom: 0;
float: left;
}
}
</style>
<body>
<div id="head">
<h1>Head</h1>
</div>
<div id="abs">
<h2>absolute</h2>
</div>
<div id="rel">
<h2>relative</h2>
</div>
</body>
</html>
"relative" does not grow at all and "absolute" grows too much.
div {
top:0;
height:100%; /* height calculated based off the height of parent element */
margin:0;
}
height property CSS
Use display:table on the outer div and display table-row on the inner ones:
See this fiddle: http://jsfiddle.net/JKQ2y/15/
Html:
<div class="outer">
<div class="rel">
<div class="m b">text</div>
</div>
<div class="inner">
<div class="m r"></div>
</div>
</div>
Css:
.outer{
border:1px solid black;
height:100px; width: 100px
display:table;
}
.rel {
height:30px;
display:table-row;
}
.inner {
border: 1px solid red;
position:relative;
display:table-cell;
}
.m {height:100%;}
.m.b {border:1px solid blue;}
.m.r {border:1px solid red;}
HTML:
<div class="body">
<div class="head">
<div class="head-content">text</div>
</div>
<div class="growing-area">
</div>
</div>
CSS:
.body{
height:100px; width: 100px;
display:table;
}
.head {
height:0px;
display:table-row;
}
.growing-area {
position:relative;
display:table-cell;
}
defining a small height of the head is important but the real size is then controlled by the content or you can define the head-content height:
.head-content {
height:30px;
}
Fiddle: http://jsfiddle.net/JKQ2y/36/
I want to make a one Column Layout with 3 section
Section 1: Header
Section 2: A Content Section that stretchs from beneth the header to the beginning of the footer, which has it's content centered vertically and horizontally within itsel
Section 3: Footer that always resides at the bottom of the browser window.
The Problem:
I can't get the content div to strech to the beginning of the footer/bottom div. If I enter height:100% it automatically stretches till the end of the whole page.
Also would like to center the content inside this middle div vertically and horizontally - though I have not yet attempted to do so.
Also don't understand why the background of the header text is not in color. even though the subheader divs are encapsulated by the header div which has background-color defined.
thanks!
http://jsbin.com/ixipug/1/edit
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
html {
height: 100%;
}
body {
height: 100%;
margin-left: 20px;
margin-top:0px;
margin-bottom: 0px;
}
#containerHeaderContent {
min-height:100%;
height: auto;
height: 100%;
margin: 0 auto -1.5em;
}
.push {
height: 1em;
}
.header {
background-color: aqua;
padding-top:20px;
}
.subheader-left {
float:left;
font-family: serif;
font-size: 20px;
text-align: left;
}
.subheader-right{
float: right;
font-family: sans-serif;
font-size: 12px;
padding-right: 20px;}
.middleSection {
padding-top: 10px;
clear:both;
width:100%;
height auto;
background-color: #e8e7e7;
}
.bottom{
background-color: red;
position: absolut;
height: 1em;
font-size: small;
}
.bottom-left {
float: left;
font: sans-serif;
left: 20px;
}
.bottom-right {
float: right;
right: 15px;
font-style: italic;
color: #8e8e8e;
font-size: 11px;
}
</style>
<title>XYZ</title>
</head>
<body>
<div id="containerHeaderContent">
<div class="header">
<div class="subheader-left">XYZ</div>
<div class="subheader-right">LOREM</div>
</div>
<div class="middleSection">Content Vertical and Horizontally Centered inside DIV</div>
<div class="push"></div>
</div>
<div class="bottom">
<div class="bottom-left">
<span class="about">
<span class="bold">XYZ</span> is a project by XZY. |
<span="address">Website Information</span> — info#info.com
</span>
</div>
<div class="bottom-right">
<span class="openinghours">Open by Appointment</span><span class=""> sponsored by XYZ</span>
</div>
</div>
</body>
</html><!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
</body>
</html>
2018 update
use flexbox or css grid. Here is a flexbox example. Css grid could be even simpler, but support is pretty low still:
body, html { padding: 0; margin: 0; }
header { background: #faa; }
article { background: #afa; }
footer { background: #aaf; }
.page {
display: flex;
flex-direction: column;
height: 100vh;
width: 100vw;
}
article {
flex: 1;
display: flex;
justify-content: center;
align-items: center;
}
<div class="page">
<header>header content</header>
<article>main content</article>
<footer>footer content</footer>
</div>
No need to use tables! Some simple css will do nicely.
DEMO: http://jsbin.com/azivip/2/edit
Html Markup:
<body>
<div id="content">
<div id="header">
This is the header
</div>
<div id="inner">
This is the body
</div>
<div id="footer">
this is the footer
</div>
</div>
</body>
CSS:
body{
height:100%;
padding:0px;
margin:0px;
}
#content{
position:relative;
bottom:0px;
width:100%;
height:100%;
}
#header{
position:relative;
bottom:0px;
width:100%;
height:100px; /* Edit for height of header*/
background:#f00;
}
#inner{
width:100%;
text-align:center;
position: absolute;
top: 50%;
display: table-cell;
vertical-align: middle;
}
#footer{
position:absolute;
bottom:0px;
width:100%;
height:100px; /* Edit for height of footer */
background:#0f0;
}
In order for #inner to stay centered vertically even with multi-line content, you'll need to use Javascript/jQuery. Below is an example script that "pulls up" #inner just the right amount to be centered.
var mrgntop = -Math.floor($("#inner").height() / 2);
$("#inner").css({"margin-top":mrgntop});
<table> is what you need to use in this case. The HTML will look like this, basically:
<table class = "wrapper">
<tr><td class = "header">I'm the header.</td></tr>
<tr><td valign = "middle" class = "content">Some content. Some content. More content. More content. Content is great. Content is a great thing to talk about when trying to insert random content to elaborate behavior. Content.</td></tr>
<tr><td class = "footer">I'm the footer.</td></tr>
</table>
Example CSS:
html, body, .wrapper {
height: 100%;
}
.header {
height: 100px; /*This value can be anything*/
}
.content {
text-align: center;
}
.footer {
height: 100px;
}
Demo: jsFiddle.
Note how the content is centered both vertically and horizontally.
Hope that helped!
I am trying to get a layout that has no scrollbars and has a fixed header div(height 150px) and then below that a div that fills the rest of the page (will be a google map).
The problem
The map extend down below the bottom of the view-port and I get a scrollbar.
I am looking for a CSS only solution.
HTML
<div id="container">
<div id="header"></div>
<div id="map"></div>
</div>
CSS
#container
{
position:relative;
height:100%;
min-height:100%;
width:100%;
margin:0;
padding:0;
}
#map
{
position:absolute;
top:150px;
width:100%;
height:100%;
background-color:#bb3311;
}
#header
{
height:150px;
position:absolute;
width:100%;
background-color:#00ffbb;
}
<html>
<head>
<style type="text/css">
* { padding: 0; margin: 0;} /* do not use universal selector this is just for example */
#container{
position: relative;
height: 100%;
width: 100%;
background: yellow;
}
#map {
position: absolute;
top: 150px;
bottom: 0;
left: 0;
right: 0;
background: red;
overflow: hidden;
}
#header {
height: 150px;
background: green;
}
</style>
</head>
<body>
<div id="container">
<div id="header"></div>
<div id="map"></div>
</div>
</body>
</html>
Add overflow hidden where needed.