I am trying to design a web page which is divided into 3 regions:-
1) a header region
2) a left navigation pane
3) The main content area
For this, I am presently using the following CSS classes:-
.Content
{
position:absolute;
overflow:auto;
top:10%;
left:20%;
width:80%;
height:90%;
}
.Header
{
position:absolute;
left:0;
top:0;
height:10%;
width:100%;
background-color:Blue;
text-align:center;
}
.NavPanel
{
position:absolute;
top:10%;
left:0;
height:90%;
width:20%;
overflow:auto;
background-color:Menu;
}
The height and width of body tag are set to 100%.
I dont think this is a very good way of doing what I want to do. For example, when I reduce the height of the browser, the header area reduces proportionally, ultimately vanishing. Also, the page is rendered as expected by Chrome, but for some reason, horizontal scroll bar appears in IE8.
I dont have great knowledge in HTML and CSS, so I just wanted to know if there is any better way of doing this. Thanks!
You may want to specify an absolute height for the header, e.g.:
.Header
{
position:absolute;
left:0;
top:0;
height:100px;
width:100%;
background-color:Blue;
text-align:center;
}
You can also specify the header in measures of the font size: height: 10em (1 em should be the width of the letter "m"; 1 ex would be the height of the letter "x").
Note that it might be better to remove the "position" attributes both for the header and the content. In this case, positioning would be relative (the default), making the content appear below the header regardless of the size of the header. In that case, remove the "height" attribute for the content.
You could try setting a min-height on the header and using media queries.
For example, you could set min-height: 2em; and use a media-query like:
#media (max-height: 20em) { /* the min-height for the header = 10% of the max-height used here */
.content, .navPanel {
top: 2em; bottom: 0;
}
}
DEMO
However, media queries don't work in IE 8 or older.
Hi i think you are looking for page layout like this copy and paste this code into any notepad and check it out.
<html>
<head>
<style type="text/css">
.Container
{
background-color:yellow;
height:100%;
weight:100%;
}
.inner
{
float:left;
top:10%;
height:90%;
width:100%
}
.Content
{
float:left;
top:10%;
left:20%;
width:80%;
height:100%;
background-color:skyblue;
}
.Header
{
float:left;
height:10%;
width:100%;
background-color:Blue;
text-align:center;
}
.NavPanel
{
float:left;
top:10%;
height:100%;
width:20%;
background-color:Menu;
}
</style>
</head>
<body>
<div class="Container">
<div class="Header"></div>
<div class="inner">
<div class="NavPanel"></div>
<div class="Content"></div>
</div>
</div>
</div>
</body>
</html>
Here's a basic layout that you can use and expand upon:
http://jsfiddle.net/yUCdb/
You may try;
HTML
<div id="container">
<div id="header">
</div>
<div id="sidebar">
</div>
<div id="viewer"></div>
</div>
CSS
html, body {
margin: 0;
padding: 0;
border: 0;
}
#header, #sidebar, #viewer {
position: absolute;
}
#header{
top: 0;
width: 100%;
height: 10%;
background: yellow
}
#sidebar {
top: 10%;
width: 20%;
bottom: 0;
background-color: red;
z-index:100;
}
#viewer {
top: 10%;
left: 20%;
right: 0;
bottom: 0;
background-color: green;
}
Here is a live demo.
Related
I have what seems to be a simple css question but having difficulty achieving. I have 2 divs that sit one on top of the other. I would like the combined height of both divs to be 100% but the top to be a static defined height. The bottom div will contain a list of data that will overflow to scroll. What is the best way to achieve this? Below is sample code for something close.
#container{
height:auto;
height:100%;
min-height:100%;
}
#top{
height:175px;
min-height:175px;
max-height:175px;
}
#bottom{
height:70%;
}
<div id="container">
<!-- top div set to 100px -->
<div id="top"></div>
<!-- bottom div dynamic height based on remaining real estate -->
<div id="bottom"></div>
</div>
You could use CSS calc(), so #bottom {height:calc(100% - 175px);}.
html, body {
height:100%;
margin:0;
}
#container {
height:100%;
}
#top {
height:175px;
background:lime;
}
#bottom {
height:calc(100% - 175px);
background:teal;
}
<div id="container">
<div id="top">top</div>
<div id="bottom">bottom</div>
</div>
Or use CSS table layout if you need to support more browsers.
html, body {
height:100%;
margin:0;
}
#container {
height:100%;
width:100%;
display:table;
}
#top, #bottom {
display:table-row;
}
#top {
height:175px;
background:lime;
}
#bottom {
height:100%;
background:teal;
}
<div id="container">
<div id="top">top</div>
<div id="bottom">bottom</div>
</div>
You can use height:calc(100% - 175px); for this:
http://jsfiddle.net/9ygz4pnj/
html,body,#container{
height:100%;
}
#top{
height:175px;
border:1px solid red;
}
#bottom{
height:calc(100% - 175px);
border:1px solid green;
}
You can achieve this by defining a height and min-height on your containers.
First of all you need to define a height: 100% in your body (and html).
Than you need to create a container div which will be the mother of your top and bottom divs.
Than use position: relative and min-height: 100% in your container div.
You can align your top div to top: 0 and left: 0 a definite height and position absolute.
You can align your bottom div to bottom: 0 and left: 0 a calc function and position absolute. For the content scrolling part in bottom div use overflow scroll.
JSFiddle Example
Right now, I am using a french (or german keyboard) which is quite hard for me to use. I will edit the answer with a more meaningful text when I return home.
This is a basic css file that you can use.
html, body { height: 100%; margin:0; }
.container {
position: relative;
min-height: 100%;
}
.top {
background: black;
color: white;
height: 200px;
width: 100%;
position: absolute;
top: 0;
left: 0;
}
.bottom {
position: absolute;
bottom: 0;
left: 0;
background: yellow;
height: calc(100% - 200px);
overflow: scroll;
}
I'm looking for a way to create a div that has a relative size, adjusted to the browser's height. Problem is that I dont really know where to start, or how to do it.
Basically I will have a header, which will be 50px heigh, and the relative div below there. Below that div, theres another div that HAS to be 50px inside the screen (Without scrolling). More content of that div, or another div (I dont mind which one) will be outside the screen.
So if the browser is 1000px heigh, 100px will be spend for the top and bottom divs. That means the relative div must be 900px heigh.
To support the idea I have made a simple image of what I'm willing to achieve: (Yeah, paint skills, got no Photoshop at my current location)
The orange border would represent the size of the complete page.
I know this is pretty easy to do with JavaScript, that wouldn't be a challenge for me, but I'm trying to find a CSS-only solution if possible. Any ideas?
An idea, using % instead of px for header and footer : here
<div id='header'></div>
<div id='content'>
<div id='scrollable'>this is my content</div>
</div>
<div id='footer'></div>
And CSS
body {
height:100%;
}
#header {
width:100%;
height:15%;
position:absolute;
top:0;
background:red;
margin:0;
}
#footer {
width:100%;
height:15%;
position:absolute;
bottom:0;
background:blue;
}
#content {
position:absolute;
width:100%;
top:15%;
height : 70%;
background:yellow;
overflow-y:auto;
}
#content #scrollable {
min-height:100%;
}
So I think this is what you want
<div id="scrn">
<div id="top"></div>
<div id="bottom"></div>
</div>
Then some CSS
#scrn {
height: 1700px;
width: 100%;
position: relative;
}
#top {
height: 50px;
width: 100%;
position: fixed:
top: 0px;
}
#bottom{
height: 50px;
width: 100%;
position: fixed;
bottom: 0px;
}
This looks right I think? Also I put the position: relative and height in because I am not 100% sure what you are trying to achieve with it.
Ok! Here's a technique I've used a bunch- this will work best if you don't fix the height of your relative positioned div. Based on your description, this is not the intent so it should work fine.
Basic Markup:
<body>
<header>DIV 1 - 50PX</header>
<div class="main">MAIN STUFF - RELATIVE</div>
<footer>DIV 2 - 50PX</footer>
</body>
CSS:
body, html{
width:100%;
height:100%;
}
body{
margin:0;
positino:relative;
}
header{
position:absolute;
width:100%;
height:50px;
top:0;
left:0;
background:#666666;
color:#ffffff;
z-index:10;
}
footer{
position:absolute;
width:100%;
height:50px;
bottom:0;
left:0;
background:#555555;
color:#ffffff;
z-index:10;
}
.main{
position:relative;
box-sizing:border-box;
padding:50px 1em;
height:150%; /* this is to simulate your dynamic content */
background:#cccccc;
}
http://jsfiddle.net/xdeQ6/1/
Adding padding to the main content div will make sure that your actual content at the top and bottom of your page is not hidden behind the header and footer divs.
Here is my approach:
header, footer {
background: #f00;
position: fixed;
width: 100%;
height: 50px;
left: 0;
}
header {
top: 0;
}
footer {
bottom: 0;
}
#content {
margin: 50px 0;
}
See my fiddle: http://jsfiddle.net/Vw97D/1/
Does it meet your expectations?
I have layout comprising of a 100% width header, 2 column content divs (30-70% width) and a 70% width footer (visible only in the bottom of right div).
My HTML mark up is like:
<section id="mySection" >
<header id="headerTop">
</header>
<div id="wrapperLeft">
</div>
<div id="wrapperRight">
</div>
<footer id="footerRight">
</footer>
</section>
My CSS is
#mySection
{
margin:0 auto;
padding:0;
text-align:center;
vertical-align:middle;
overflow:hidden;
}
#headerTop
{
position:absolute;
top:0;
left:0;
height:40px;
width:100%;
overflow:hidden;
}
#wrapperLeft
{
position:absolute;
top:40px;
left:0;
width:30%;
bottom:0;
overflow:auto;
}
#wrapperRight
{
position:absolute;
top:40px;
left:30%;
width:70%
bottom:30px;
overflow:auto;
}
#footerRight
{
position:absolute;
left:30%;
bottom:0;
width:70%;
overflow:hidden;
}
I would like to know if I can design this better such that if i hide the left or right div, the other div is displayed at 100%. I think i can change the CSS dynamically via javascript and adjust the left and width values for the other div, but it is getting messy and would like to avoid it if possible.
Ideally would love to call show or hide on the div and the other div automatically adjusts itself to 100% width.
I have no control over the height of the content in either div and would want the browser to display scrollbar when the content height exceeds the window.
Thanks in advance for your help.
I would add a wrapper to the divs so you can float then instead of positioning then absolutely. This way you can make at least one div 100% wide. For instance the right div. If you want both divs to be dynamic in size you will have to use jquery. For instance adding classes if you want to keep the jquery to a minimal.
example HTML:
<div id="header"></div>
<div id="main">
<div id="left"></div>
<div id="right"></div>
</div>
<div id="footer"></div>
example CSS :
#main{
position:relative;
overflo:hidden // This will make the container grow with the children
width:960px;
}
#left{
width:200px;
float:left;
height:100%;
}
#right{
float:left;
width:100%;
height:100%;
}
Example of CSS with additional classto toggle divs
#main.only-left #left{
width:100%;
}
#main.only-left #right{display:none;}
I think I know what you're talking about. I've created a little example here. Basically set 30% on the sidecolumn, and display: block; on the main column. Click on the body anywhere to toggle the side column to show how the main column adapts... is this going in the right direction?
Codepen sketch
HTML
<div class='wrapper'>
<header>Header</header>
<section>
<aside>Sidebar</aside>
<article>Main article</article>
</section>
<footer>Footer</footer>
</div>
CSS
body {
margin: 0;
padding: 0;
}
section {
overflow: hidden;
position: relative;
}
header {
background: crimson;
height: 100px;
width: 100%;
}
aside {
background: #efefef;
float: left;
height: 300px;
width: 30%;
}
aside.hide { display: none; } /** For demo purposes **/
article {
background: #ccc;
display: block;
height: 300px;
}
footer {
background: crimson;
float: right;
height: 100px;
width: 70%;
}
jQuery (just for hideToggle example)
$('html').on('click', function(){
$('aside').toggleClass('hide');
});
UPDATE: Here's an example with a little assitance from jQuery for class toggling. Could probably be generalized more... http://codepen.io/kunalbhat/pen/kuAcg
I've searched through many forums and questions, however could not find anything concerning fluid vertical (not horizontal layout).
I have markup as follows:
<div class="wrapper">
<div class="header"></div>
<div id="content"></div>
<div class="footer"></div>
</div>
My CSS:
html,body {margin: 0; padding: 0; height: 100%;}
.wrapper {width: 900px; margin: 0 auto; height:auto !important; height:100%; min-height:100%; position: relative;}
#content {padding-bottom: 60px; /* For the footer padding */ }
.footer { position: absolute; bottom: 15px; height: 45px;}
In this case I have layout with fixed height of the header and content. The footer sticks to the bottom.
It's all great, but I want to make fluid vertical layout, so that the footer always sticks to the bottom (just as now) but the header and content have fluid heights: 30 and 70% accordingly.
How can I achieve that?
Layout:
<body>
<div id="container">
<div id="header">
</div>
<div id="content">
<div id="content-text">
</div>
</div>
<div id="footer">
</div>
</div>
</body>
</html>
CSS:
html {
height: 100%;
}
body {
padding: 0;
margin: 0;
height: 100%;
}
#container {
position:relative;
z-index:1;
width:100%;
height:100%;
margin-left: auto;
margin-right:auto;
overflow:hidden;
}
#header,
#footer {
position:absolute;
left:0;
z-index:2;
width:100%;
overflow:hidden;
}
#header {
top:0;
height:30%;
}
#footer {
bottom:0;
height:1.6em;
}
#content {
position:absolute;
bottom:0;
top:0;
right:0;
left:0;
z-index:10;
width: 100%;
height:auto;
margin-top:30%;
margin-bottom:1.6em;
overflow:hidden;
}
#content-text {
position:relative;
width:100%;
height:100%;
margin-left: auto;
margin-right:auto;
overflow:auto;
}
I also recommend a CSS reset before this.
EDIT
Sorry, first I added fix size for the header, I corrected it, though it seems to be a bit buggy this way. I'm still searching for the best way.
In cases like this I usually say - to hell with the CSS headaches, let's just use a good old fashion table instead!
HTML:
<table style="height: 100%">
<tr>
<td id="header"></td>
</tr>
<tr>
<td id="contents"></td>
</tr>
<tr>
<td id="footer"></td>
</tr>
</table>
CSS:
body, html
{
height: 100%;
}
#header
{
background-color: red;
height: 30%
}
#contents
{
background-color: lime;
height: 70%
}
#footer
{
background-color: blue;
height: 45px;
}
It might not be "stylish", but it gets the job done, and will be an order of magnitude simpler than the necessary CSS spiderweb. Also, if the contents of something get too big, it will (somehow, in a browser-specific fashion) resize to keep everything visible, adding a scrollbar to the body if necessary.
For footer you can try this
.footer {
position: fixed;
bottom: 0;
height: 45px;
}
As I had the same problem, you probably need a so called "sticky footer".
Look for example at http://ryanfait.com/sticky-footer/, it functions across all browsers. There's also a good article describing how to achieve it here: http://ryanfait.com/resources/footer-stick-to-bottom-of-page/
Demo Page - fixed fluid fixed
I've made a quick demo of a layout that is very common:
HTML
<body>
<header>Header</header>
<section>Content</section>
<footer>Footer</footer>
</body>
CSS
html, body{ height:100%; }
/* you can use "border-spacing" on the body as well */
body{ display:table; width:100%; padding:0; margin:0; }
body > *{ display:table-row; }
header{ height:100px; }
section{ height:100%; }
footer{ height:50px; }
Note that this will only work in modern browsers
i have a mind bobbling question.
I need a 100% width, 100% height container with 20px margin that expands with content. Is this at all possible? The closest i got was with this method:
#container {
position:absolute;
top:0;
bottom:0px;
left:0;
right:0;
margin:20px;
}
but then it wont expand in height with content.
Anybody know the divine technique for this?
I'm pretty sure it isn't possible to do with a single element, but if you don't mind having 3 spacer div elements, this solution works in all browsers:
<html>
<head>
<style type="text/css">
* {
margin: 0;
}
html, body {
height: 100%; padding: 0; /* padding 0 is for jsfiddle */
}
#wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin-left: 20px;
margin-right: 20px;
margin-bottom: -20px; /* the bottom margin is the negative value of the spacer height */
background-color: #ccc;
}
.spacer.edge {
background-color: white; /* same as body background */
}
.spacer {
height: 20px;
}
</style>
</head>
<body>
<div id="wrapper">
<div class="spacer edge"></div>
<!-- content here -->
<div class="spacer"></div>
</div>
<div class="spacer edge"></div>
</body>
</html>
Here's a fiddle to play with: http://jsfiddle.net/dTyTW/
I you want to expand the div with the content , then you need to set position : relative and in order to stick towards the bottom padding-bottom also need to be set.
#container {
position:relative;
top:20px;
bottom:20px;
left:20px;
right:20px;
padding-bottom: 80%;
border:1px solid red;
}
Values can be adjusted as per the requirement.
Try here
Remove the margin and give each position a 20px.
Also remove the bottom.
Add padding-bottom:20px;
#container {
position:absolute;
top:20px;
left:20px;
right:20px;
padding-bottom:20px;
}
http://jsfiddle.net/jasongennaro/w7dQP/3/
EDIT
If you are not opposed to using some jQuery, you could also do this
var h = $(document).height();
var h2 = $('#container').height();
if(h2 < h){
$('#container').height(h);
}
This ensures that if the div is smaller than the browser viewport, it will expand to fit it.
Once the text is as big or bigger, the styles will take care of it.
http://jsfiddle.net/jasongennaro/w7dQP/8/
<html>
<style>
body
{
margin:0px;
}
div
{
position: absolute;
padding: 20px;
}
img
{
position: relative;
width: 100%;
}
</style>
<body>
<div>
<img src="http://manual.businesstool.dk/screen.jpg" />
</div>
</body>
</html>
Use the padding property... look up the box model.