3 divs covering whole window - html

I have little problem with positioning divs with CSS - I would like to make 3 divs that cover whole window:
div1 (top) with width 100% and constant height
div2 (left-bottom) with constant width and full height
div3 (right-bottom) with the remaining width, also full height
Is there any way to do this without JavaScript?
Thanks.


Is this what you are looking for?
FIDDLE: http://jsfiddle.net/5V48p/1/
EDIT - Just saw your comment about fluid height for bottom divs - see this: http://jsfiddle.net/5V48p/2/
THE HTML:
<body>
<div id="top">Word, yo.</div>
<div id="bottom-left">Look at me!</div>
<div id="bottom-right">Hobajoba!</div>
</body>
THE CSS:
body, html {
width: 100%;
height: 100%;
margin: 0;
}
#top {
height: 100px;
background-color: yellow;
}
#bottom-left {
position:absolute;
bottom:0px;
float:left;
width: 180px;
background-color: lightblue;
height:calc(100% - 100px);
margin-top:100px;
}
#bottom-right {
position:absolute;
bottom:0px;
width: calc(100% - 180px);
margin-left:180px;
background-color: pink;
height:calc(100% - 100px);
margin-top:100px;
}


For example:
.div1 {
position:absolute;
left:0;
right: 0;
top:0;
height: 100px;
}
.div2 {
position:absolute;
left:0;
bottom: 0;
height: 20px;
width: 100px;
}
.div3 {
position:absolute;
right:0;
bottom: 0;
height: 20px;
left: 100px;
}
EXAMPLE


Here, checkout my jsfiddle: http://jsfiddle.net/Shwunky/nwy6h/
Basically, it's a play on z-index
The only problem I see with this one is that if you remove the bottom right and top divisions, the bottom left division would fill the whole viewport.


Yes you can do it with javascript. The key is to understand how to take advantage of position: absolute.
Here's a JS Fiddle showing you how it can be done:
http://jsfiddle.net/cbbZq/
HTML:
<div id="container">
<div id="top">Top</div>
<div id="bottom-left">Bottom Left</div>
<div id="bottom-right">Bottom Right</div>
</div>
CSS:
html, body {
width: 100%;
height: 100%;
}
#container {
width: 100%;
height: 100%;
position: relative;
}
#top {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 200px;
background-color: lightblue;
}
#bottom-left {
position: absolute;
top: 200px;
left: 0;
bottom: 0;
width: 100px;
background-color: yellow;
}
#bottom-right {
position: absolute;
top: 200px;
left: 100px;
right: 0;
bottom: 0;
background-color: green;
}


HTML:
<body>
<div id="top">TOP AREA</div>
<div id="bottom-right">
<div id="bottom-left">
FIXED WIDTH
</div>
NOT FIXED
</div>
</body>
CSS:
html,body{margin:0;padding:0;width:100%;}
#top
{
width:100%;
}
#bottom-left
{
width:180px;
float:left;
}
#bottom-right
{
width:100%;
}


You can achieve this using table,tr,td as follows:
<body>
<table class="table" cellspacing="0">
<tr id="top">
<td colspan="2"></td>
</tr>
<tr id="division">
<td id="left"></td>
<td id="right"></td>
</tr>
</table>
</body>
and css:
html,body {
height:100%;
}
#top {
width: 100%;
height: 100px;
background-color:red;
}
.table {
height: 100%;
}
#division {
width: 100%;
min-height: 100%;
}
#left {
background-color:green;
min-width: 100px;
}
#right {
background-color:blue;
width: 100%;
}
here's the demo: http://jsfiddle.net/aneelkkhatri/2c7ag/1/

Related

Vertical scrollbar is hiding element with absolute position

I have an element with absolute position that is being displayed over the vertical scroll, preventing the user from scrolling the page using the scrollbar.
This fiddle explains the problem and what I'm currently doing.
This is the css I'm using to position the div.
.side-content {
background: grey;
position: absolute;
right: 0;
top: 60px;
height: calc(100% - 132px);
width: 100px;
}
I was expecting the div to be positioned considering the scrollbar (without manually adding a margin) and not hovering it.
Thanks in advance!

do z-index: -50;
.side-content {
z-index: -50;
background: grey;
position: absolute;
right: 0;
top: 60px;
height: calc(100% - 132px);
width: 100px;
}

body {
margin: 0;
text-align: center;
}
.wrapper
{
position:absolute;
width: 100%;
height:100%;
display: flex;
}
.inside_div_one
{
width:10%;
height:100%;
background-color: green;
}
.inside_div
{
width: 25%;
}
.inside_div_two
{
width:80%;
height:100%;
}
.inside_div_three
{
width:10%;
height:100%;
background-color: grey;
}
<html>
<head>
</head>
<body>
<div class="wrapper">
<div class="inside_div_one">
<p>sidebar</p>
</div>
<div class="inside_div_two">
<p>FIRST</p><p>test</p><p>test</p>
<p>test</p><p>test</p><p>test</p>
<p>test</p><p>test</p><p>test</p>
<p>test</p><p>test</p><p>test</p>
<p>test</p><p>test</p><p>test</p>
<p>test</p><p>test</p><p>LAST</p>
</div>
<div class="inside_div_three">
<p>jvsdfv</p>
</div>
</div>
</body>
</html>

Two relative divs overlap each other

I have the following code:
body {
padding: 0;
margin: 0;
}
.container {
width: 30%;
margin: 0 35%;
background: yellow;
position: relative;
height: 900px;
}
.p1_1 {
position: relative;
width: 50%;
height: 70%;
top: 10%;
left: 0;
background-color: green;
}
.p1_2 {
position: relative;
width: 100%;
height: 20%;
border: 1px solid blue;
top: 0;
}
<div class="container">
<div class="p1_1">
top box
</div>
<div class="p1_2">
hello box
</div>
</div>
My question is why is the top:10% of .p1_1 affecting the position of .p1_2? I would have thought this was a really simple relative placing of the div following the second - unless I'm missing something blindingly obvious?
Ok - so the following code is nearer what I was expecting but how there is 15% of space not 10% (i.e. set margin-top:15% works fine) so I'm confused how 70 + 10 + 20 can't equal 100??
html,body {
padding:0;
margin:0;
height:100%;
position:relative;
}
.container {
width:30%;
margin:0 35%;
background:yellow;
position:absolute;
height:100%;
top:0;
}
.p1_1 {
position:relative;
width:50%;
height:70%;
margin-top:10%;
background-color:green;
}
.p1_2 {
position:relative;
width:100%;
height:20%;
background-color:blue;
}
I've also found http://www.barelyfitz.com/screencast/html-training/css/positioning/ on tab 2 explains how
"Notice the space where div-1 normally would have been if we had not
moved it: now it is an empty space. The next element (div-after) did
not move when we moved div-1. That's because div-1 still occupies that
original space in the document, even though we have moved it."

Here is one way how to push 2 div's down by 10%, based on their parent's height, keeping them 70% and 20% of parent.
body {
padding: 0;
margin: 0;
}
.container {
width: 30%;
margin: 0 35%;
background: yellow;
position: relative;
height: 900px;
}
.p1_1 {
position: relative;
width: 50%;
height: 70%;
left: 0;
top: 10%;
background-color: green;
}
.p1_2 {
position: relative;
width: 100%;
height: 20%;
border: 1px solid blue;
top: 10%;
}
<div class="container">
<div class="p1_1">
top box
</div>
<div class="p1_2">
hello box
</div>
</div>

image not displaying in my output page

I need to display single page as below:
http://s18.postimg.org/epvzomt0p/P_62343_Patron_Roca_Ebrochure_R2_01_1.png
I made working example in
https://jsfiddle.net/dipchk/pua95mwg/1/
Can any one tell me what more I need to implement in css in order to look like above image
<body>
<div class="wrapper">
<div id="one">one</div>
<div id="two">two</div>
</div>
</body>
css
.wrapper {
width: 90%;
height: 90%;
position: relative;
background-color: white;
}
.wrapper div {
padding: 10px;
}
#one {
background:url('http://s2.postimg.org/5cqv0dqwp/86278_Patron_pg4_Top.png') no-repeat;
display: block;
position: absolute;
width:70%;
height: 50%;
}
#two {
background:url('http://s18.postimg.org/9zimjy25l/P_62343_Patron_Roca_Ebrochure_R1.jpg') no-repeat;
position: absolute;
display: inline-block;
width: 15%;
height: 40%;
}

Please check this solved
body{margin:0; padding:0;background:#ddd;}
.wrapper {
position: relative;
background-color: #fff;
width:580px;margin:0 auto;
padding:40px 0;
height:500px;
}
.wrapper div {
}
#one {
}
#one img {
width:100%;
}
#two{position: absolute;
right: 0px;
top: 72px;}
#two img {
width: 166px;
}
<body>
<div class="wrapper">
<div id="one"><img src="http://s2.postimg.org/5cqv0dqwp/86278_Patron_pg4_Top.png"></div>
<div id="two"><img src="http://i.stack.imgur.com/rg43a.png"></div>
</div>
</body>

You Just Remove
Position:absolute;
and Do what you want.
Thank you

It's difficult to understand exactly what you are asking.
According to the image you showed, please check the following code.
body{margin:0; padding:0;}
.wrapper {
position: relative;
background-color: #ccc;
}
.wrapper div {
}
#one {
background:url('http://s2.postimg.org/5cqv0dqwp/86278_Patron_pg4_Top.png') no-repeat;
width:580px;
height: 142px;
margin:0 auto;
}
#two {
background:url('http://s18.postimg.org/9zimjy25l/P_62343_Patron_Roca_Ebrochure_R1.jpg') no-repeat;
width: 580px;
height: 924px;
margin:0 auto;
}
<body>
<div class="wrapper">
<div id="one">one</div>
<div id="two">two</div>
</div>
</body>

Full window-layout with scrollable column does not work only in Firefox - what is wrong?

I'm trying to create full-window layout with scrollable content pane and floating panel on the left. I've started with css tables and was rather happy with the outcome in Chrome and IE11. The problem is: it totally does not work at all in Firefox. What did I miss?
I've structured the page like this:
<div class="column-container">
<div class="column" style="width: 200px;">1st column</div>
<div class="column" style="position: relative; overflow: auto;">
<div style="position: absolute; top: 0px; width: 100%;">
... (lot's of rows)
</div>
</div>
</div>
And used styles:
body {
position: absolute;
top: 0px; bottom: 0px; left: 0px; right: 0px;
}
.column-container {
display: table;
width: 100%;
height: 100%;
}
.column {
display: table-cell;
height: 100%;
}
Here's fiddle with a bit more colors: http://jsfiddle.net/GWsLJ/3/

I could not figure out what was going on with your code in firefox. I was able to get this fiddle to work. I ended up simplifying your HTML and moving all styling over to CSS. It works in all major browsers.
The HTML:
<div class="column-container">
<div class="sidebar">lol</div>
<div class="absolute-div">
<!--content-->
</div>
</div>
The CSS:
* {
margin:0;
padding:0;
}
body {
position: absolute;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
background-color: yellow;
margin: 0px;
}
.column-container {
display: table;
height: 100%;
width: 100%;
background-color: black;
}
.sidebar {
display: table-cell;
height: 100%;
background-color: blue;
position: fixed;
top:0;
left:0;
width: 200px;
}
.absolute-div {
display: table-cell;
position:absolute;
top:0;
left:200px;
background-color: gray;
width: 100%;
}

I didn't find the reason why Firefox does not let me do proper scrolling using css tables. The answer of zsaat14 was working good apart from width of content pane - couldn't get that working without javascript (resizing window / jquery ui's resizable on panel).
What did work for me was absolute positioning of panel and content (as in zsaat14's answer) - fiddle. Also I was setting .absolute-div's left to the width of sidebar.
body {
position: absolute;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
}
.column-container {
height: 100%;
width: 100%;
}
.sidebar {
height: 100%;
position: absolute;
top:0;
left:0;
bottom: 0;
width: 200px;
}
.absolute-div{
position:absolute;
top:0;
left:200px;
right: 0px;
bottom: 0px;
overflow: auto;
}

CSS layout with fixed top and bottom, variable height middle

+-------------------+
| Top (fixed) |
+-------------------+
| |
| |
| Middle (fill) |
| |
| |
+-------------------+
| Bottom (fixed) |
+-------------------+
The top and bottom are fixed divs. They are positioned on the top and bottom of browser window. I want the middle part to fill the rest of the window between top and bottom divs.
If it's content is more than its height then i can use scrollbars. But its size should not exceed the window.
My CSS and HTML:
html, body, #main
{
height: 100%;
}
#content
{
background: #F63;
width: 100%;
overflow: auto;
height: 100%;
margin-bottom: -100px;
}
#footer
{
position: fixed;
display: block;
height: 100px;
background: #abcdef;
width: 100%;
}
<div id="main">
<div id="content">xyz</div>
<div id="footer">abc</div>
</div>
From this, the Footer shows in the bottom but, the Content div still fills the whole window which should have been [window-footer] height.

Position the middle div using absolute positioning without specifying height. It does not get much simpler than this:
#header {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 100px;
background-color: #abcdef;
}
#footer {
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: 100px;
background-color: #abcdef;
}
#content {
position: fixed;
top: 100px;
bottom: 100px;
left: 0;
right: 0;
background-color: #F63;
overflow: auto;
}
<div id="header"></div>
<div id="content"></div>
<div id="footer"></div>
Use "Full page" option to view the snippet properly.

If you don't know the header or footer sizes and you can use CSS3 then i would suggest to use flexbox layouting.
Example below (or check fiddle)
HTML:
<div class="container">
<div class="header">header</div>
<div class="content">content</div>
<div class="footer">bottom</div>
</div>
CSS:
.container {
display: flex;
flex-direction: column;
width: 100%;
height: 400px;
}
.header {
flex-grow: 0;
background-color: red;
}
.content {
flex-grow: 1;
background-color: green;
}
.footer {
flex-grow: 0;
background-color: blue;
}

html
<div id="main">
<div id="header"> Header Content</div>
<div id="content">
<ul><li>Hello World!!! </li>
<li>Hello World!!! </li>
<li>Hello World!!! </li>
<li>Hello World!!! </li>
<li>Hello World!!! </li>
</ul>
</div>
<div id="footer">I am Footer
</div>
css
body { margin: 0;}
#main{
position: absolute;
width: 100%;
top: 0;
bottom: 0;}
#header
{
position: absolute;
height: 41px;
top: 0;
left: 0;
right: 0;
text-align:center;
display:block;
background: blue;
}
#content
{
position: absolute;
top: 41px;
bottom: 0;
left: 0;
right: 0;
overflow:scroll;
}
#footer
{
position: absolute;
height: 41px;
bottom: 0;
left: 0;
right: 0;
text-align:center;
display:block;
background: blue;
}
li{
text-decoration: none;
display: block;
height: 20px;
width: 100%;
padding: 20px;
}
JSFIDDLE Demo

I think this is what u want...
JSBin: http://jsbin.com/ebilag/1/
CSS:
html, body {
top: 0;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.top {
position: fixed;
top: 0;
width: 100%;
height: 100px;
background: yellow;
}
.bottom {
position: fixed;
bottom: 0;
width: 100%;
height: 100px;
background: grey;
}
.middle {
padding-top: 100px;
padding-bottom: 100px
}
HTML:
<div class="container">
<div class="top">Top</div>
<div class="middle">Middle</div>
<div class="bottom">Bottom</div>
</div>

If you know the height of the header and the footer...
then you could do this easily with the box-sizing property.
Like so:
FIDDLE1 FIDDLE2
.container
{
height: 100%;
background: pink;
margin: -64px 0;
padding: 64px 0;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.content {
overflow:auto;
height:100%;
}
header
{
height: 64px;
background: purple;
position: relative;
z-index:1;
}
footer
{
height: 64px;
background: gray;
position: relative;
z-index:1;
}

The solution with top and bottom padding is ok but I would suggest a different approach where the main frame is designed as table. This is more flexible and you can hide head or foot without changing the css.
STYLUS (CSS):
html,
body
height: 100%
.container
display: table
height: 100%
.head,
.foot,
.content
display: table-row
box-sizing: border-box
.head,
.foot
height: 70px
background: #ff0000
.content
overflow: auto
.scroll
height: 100%
overflow: auto
box-sizing: border-box
HTML:
<div class="container">
<div class="head">...</div>
<div class="content">
<div class="scroll">...</div>
</div>
<div class="foot">...</div>
</div>

HTML:
<div id="main">
<div id="header">I am Header
</div>
<div id="content">I am the Content
</div>
<div id="footer">I am Footer
</div>
</div>
CSS:
#main{width:100%;height:100%;}
#header
{
position:relative;
text-align:center;
display:block;
background:#abcdef;
height:40px;
width:100%;
}
#content
{
background: #F63;
width:100%;
text-align:center;
height:auto;
min-height:400px;
}
#footer
{
position:relative;
text-align:center;
display:block;
background:#abcdef;
height:40px;
width:100%;
}
DEMO

In my opinion you should use js/jquery to change the #content height during page load.
This should be something like this (I haven't tested code below, so change it as you need):
$().ready(function(){
var fullHeight= function(){
var h=$(window).height()-100; //100 is a footer height
$('#content').css('min-height',h+'px');
};
$(window).resize(fullHeight);
fullHeight();
});

Please try this:
HTML
<div id="header">
header
</div>
<div id="content">
main content
</div>
<div id="footer">
footer
</div>
CSS
html,body{
marign: 0;
padding: 0;
height: 100%;
}
#header {
height: 100px;
position: fixed;
top: 0;
left:0;
right: 0;
background: orange;
}
#footer {
height: 100px;
position: fixed;
bottom: 0;
left: 0;
right: 0;
background: green;
}
#content {
padding-top: 100px;
padding-bottom: 100px;
height: -webkit-calc(100% - 200px);
height: -moz-calc(100% - 200px);
height: -ms-calc(100% - 200px);
height; -o-calc(100% - 200px);
height: calc(100% - 200px);
background: #ccc;
}
please view the demo.