Whenever I add the min0height property to the DIVs to make them 100%, it doesn't work. I have added them to all of the DIVs, including height: 100%; and min-height: 100%; but nothing works. What would I do to make it extend all the way? It just cuts off the background of the sidebar and the background color of the content area.
(Forgot to label a part. The content area with the white background is .col1)
CSS:
#charset "UTF-8";
/* CSS Document */
img {
border-style: none;
color: #FFF;
text-align: center;
}
body {
background-color:#000;
margin:0;
padding:0;
border:0; /* This removes the border around the viewport in old versions of IE */
width:100%;
}
.sidebar {
background-image:url(../images/sidebar/background.png);
background-repeat:repeat-y;
font: 12px Helvetica, Arial, Sans-Serif;
color: #666;
z-index:1;
}
.menu {
background-image:url(../images/top_menu/background.png);
background-repeat:repeat-x;
height:25px;
clear:both;
float:left;
width:100%;
position:fixed;
top:0px;
z-index:5;
background-color:#000;
}
.bottom_menu {
background-image:url(../images/bottom_menu/background.png);
background-repeat:repeat-x;
height:20px;
z-index:2;
font: 12px Helvetica, Arial, Sans-Serif;
clear:both;
float:left;
width:100%;
position:fixed;
bottom:0px;
}
.colmask {
position:relative; /* This fixes the IE7 overflow hidden bug and stops the layout jumping out of place */
clear:both;
float:left;
width:100%; /* width of whole page */
overflow:hidden; /* This chops off any overhanging divs */
}
.sidebar .colright {
float:left;
width:200%;
position:relative;
left:225px;
background:#fff;
}
.sidebar .col1wrap {
float:right;
width:50%;
position:relative;
right:225px;
}
.sidebar .col1 {
margin:30px 15px 0 225px; /* TOP / UNKNOWN / UNKNOWN / RIGHT */
position:relative;
right:100%;
overflow:hidden;
}
.sidebar .col2 {
float:left;
width:225px;
position:fixed;
top:0px;
left:0px;
margin-top:25px;
margin-left:5px;
right:225px;
}
.clear {
clear: both;
height: 1px;
overflow: hidden;
}
HTML
<body>
<div id="container">
<div class="menu">Header Content</div>
<div class="colmask sidebar">
<div class="colright">
<div class="col1wrap">
<div class="col1" id="contentDIV">
Content
</div>
</div>
<div class="col2">
Sidebar Content
</div>
</div>
</div>
<div class="bottom_menu">Footer Content</div>
</div>
</body>
Fixed.
It was the container div right after the body tag. Even with height CSS, it created problems. I removed it and changed a script I had from rendering in that div to the document.body and everything works now.
If you are trying to make your content and sidebar stretch the entire height of the page, then no amount of setting a height is really going to help. If you use 100%, your going to push your fotter off the bottom of the page so you have to scroll to see it. There is a single method that I know of that will allow you to have a full-height body with a footer: Sticky Footer
Check the following site for details: http://www.cssstickyfooter.com/
Another trick you will probably need. It is near impossible to get two columns to have equal height and support all browsers. The simplest way to get your gray column to the left and white center body to stretch all the way to the footer is to use a 1-pixel hight image that has gray and white in the proper proportions, which is background-repeated along the y axis.
Another great site for CSS knowledge is A List Apart.
It is hard to get a consistant layout using floats and positioning on the same elements. In particular float and position:fixed (or absolute) are incompatible and each browser handles the situation differently.
IE6 does not support position:fixed at all and treats it as position:static (the default - no positioning at all).
Related
I've seen several similar questions/answers to this problem on SO but none of the answers that I've checked have helped me.
I'm attempting to have a "Side-Bar" extend from 10px less than the top of the page, all the way to the bottom.
However (when using height:100%), the "Side-Bar" only reaches to the bottom of the loaded browser window, if there is content past the browser window that you scroll down to, the "Side-Bar" ends prematurely.
Basically, its height is only 100% of the browser window, I desire it to be 100% of the full page content.
I've created a JSFiddle that shows my problem:
http://jsfiddle.net/qaEzz/1/
My CSS:
#sidebar {
position:absolute;
right:8px;
width:200px;
height:100%;
overflow:hidden;
background-color: yellow;
}
i put the <div id="sidebar"></div>
into the <div id="content">
and added in the css
#topbar {
width:100%; <--this
height:20px;
background-color: red;
}
and this
#sidebar {
position:absolute;
right:16px; <--! extended to 16 px
width:200px;
height:100%;
overflow:hidden;
margin-top:-10px; <--!
background-color: yellow;
}
#content {
position: absolute;<--! and remove the marging: 10px just add a <br> in the html
width:100%
}
Here is the working Fiddle
If you change position:absolute; to position:fixed;, then it would stick to its position on the right.
For a sidebar that might have a longer length than the browser length itself, instead of the position attribute, use the float attribute.
http://jsfiddle.net/wK2Yh/
#sidebar {
float:right;
right:8px;
width:200px;
height:100%;
overflow:hidden;
background-color: yellow;
}
Okay so this is quite hard to explain but basically I position the title div perfectly so that it is centered in the header div.
It remains in this position on some computers.
However, on other computers it jumps further down the page - even with the same positioning attributes. (This is tested on the same web browser.)
I have tried with absolute, relative etc. positioning, still no luck!
Note: This div contains text.
CSS:
#header {
position:relative;
height:170px;
background-color: #30A7BF;
margin:0px auto;
padding: 1px;
}
#title {
position: relative;
top: -20px;
left: 315px;
}
Thanks!
Hi is difficult to understand exactly your issue but I can give you a few tips to have a nice center vertical and horizontal:
For horizontal alignment you can use display:inline-block if you want all the div centered:
#header {
text-align:center;
}
#title {
display:inline-block;
}
For vertical align use line-height equal to the total height
#header {
line-height:170px;
}
This only work for one line text if you want another option tell me
And the demo here http://jsfiddle.net/8JLzy/7/
Edit
To work with a text of more than one line you can do this : First your html add a wrapper inside #title:
<div id="header">
<div id="title">
<div class="center">Your Title</div>
</div>
</div>
And on the CSS work with display property:
#title {
display:table;
height:100%;
margin:auto; /*Make the horizontal*/
}
#title .center {
display:table-cell;
vertical-align:middle;/*Make the Vertical*/
}
New demo http://jsfiddle.net/8JLzy/16/
use line-height, not position:relative
#header {
/*position:relative;*/
height:170px;
background-color: #30A7BF;
margin:0px auto;
padding: 1px;
font-size:1em;
}
#title {
line-height:0.5em; /* for example, or instead use padding-top: */
padding-left: 315px;
}
My issue is this, I have a header image that is larger than my browser, I wanted to do this because I want the image to become more or less visible based on your browser width. There is a color that repeats for when your browser is bigger than the image. On top of that I have an image that is centered and then two triangles on top of that. One floating left and one floating right. My issue is this, When I change the width for the .content-outer .content-inner from 978px to 1134px to accommodate the large image over the triangles it messes with the centering of my nav bar. Here is my code. the list styling is for my nav.
<div class="content-outer" id="top_nav">
<div class="content-inner">
</div>
<div class="content-outer" id="header_map">
<div class="diamond-left">
<div class="diamond-right">
<div class="content-inner">
</div>
</div>
</div>
</div>
#header,
#header_map {
height:529px;
background:#3b96a9 url(Layer-57.jpg) top center no-repeat;
margin-bottom:45px;
overflow:visible;
}
#header .diamond-left,
#header_map .diamond-left {
width:100%;
height:529px;
overflow:visible;
float:left;
background:url(Layer-58.png) top left no-repeat;
}
#header .diamond-right,
#header_map .diamond-right {
width:100%;
height:529px;
overflow:visible;
float:right;
background:url(Layer-59.png) top right no-repeat;
}
#header_map .content-inner {
height:391px;
background:url(Layer-61.png) top center no-repeat;
position:relative;
overflow:visible; }
#header .content-inner {
position:relative;
overflow:visible;
padding-bottom:20px;
}
.content-outer
{ width:100%; float:left; overflow:visible; }
.content-outer .content-inner
{ width:978px; margin:0 auto; overflow:visible; position:relative; }
.content-outer .content-inner ul
{ margin:20px 0; padding:0; }
.content-outer .content-inner ul li
{ margin:3px 0 3px 20px; padding:0; font-size:1.1em; }
.content-outer .content-inner ul li p
{ font-size:1em; }
Unless I'm misunderstanding something, the code appears to be OK. Have you double-checked to make sure:
The triangle images have transparent backgrounds so you can see behind them?
The main header background is in the right location as specified in the stylesheet?
If the page is live somewhere that we can take a look, please let us know - it may be able to shed more light on your problem.
I am designing a master page. The layout is very simple.But height adjustment does not work for me. The layout is:
<html>
<head>
</head>
<body>
<div id='container'>
<div id='top'></div>
<div id='middle'></div>
<div id='bottom'></div>
</div>
</body>
</html>
What I want to achieve is
'Container' minimum height should be 100% and it should expand when the content is more than the height.
height of the 'top' div should be 100px - fixed height.
height of the 'bottom' should be 50px - fixed height and
the remaining height(space) should be distributed to 'middle' div.
In short, whatever the height of the screen is header should be at the top with fixed height and footer should be at the bottom with fixed height. When the content exceeds the height of the 'middle' div then it should expand only with browser scrool bar without additional scroll bar.
I used the following css but it does not work.
html, body {width:99%; height:98%; font-family: "Trebuchet MS", Verdana, Helvetica, Sans-Serif; font-size:12px;}
#container {width:990px; height:100%; margin:0px auto 0px auto;}
#top {width:990px; height:100px;}
#middle {width:990px; min-height:100%; border:1px solid #336699; overflow:auto}
#bottom {width:990px; height:50px;}
Note: I am going to use this in ASP.NET MVC pages.
Try this:
html,body {
margin:0;
padding:0;
height:100%; /* needed for container min-height */
}
div#container {
position:relative; /* needed for footer positioning*/
margin:0 auto; /* center, not in IE5 */
height:auto !important; /* real browsers */
height:100%; /* IE6 */
min-height:100%; /* real browsers */
}
div#top {
padding:1em;
}
div#middle {
padding:1em 1em 5em; /* bottom padding for footer */
}
div#bottom {
position:absolute;
width:100%;
bottom:0; /* stick to bottom */
}
Here is the HTML Code:
<div id="header">
</div>
<div id="container">
<div id="leftbar">
</div>
<div id="content">
</div>
</div>
<div id="footer">
</div>
And here is what I want to achieved, even though it's not valid CSS, but I think you will understand my point:
html,body
{
min-width:800px;
max-width:1680px;
width:100%;
height:100%
}
#header
{
width:100%;
height:100px;
background:#CCCCCC url(images/header_bg.gif) repeat-x;
}
#footer
{
width:100%;
height:10px;
}
#container
{
width:100%;
height:100%-100px-10px; /* I want #container to take all the screen height left */
}
#leftbar /*fixed width, the height is always the same as the screen height*/
{
height:100%;
width:200px;
}
#content
{
height:100%;
width:100%-200px; /* take all the screen width left except the leftbar */
overflow:auto;
}
Someone just put this as an example:
http://limpid.nl/lab/css/fixed/header-and-footer
I do not think using <body>padding to exclude the header and footer is a good way to go, because I would like all the scroll bars appear inside the div#content, not for the whole <body> tag.
The normal width of a block element is 100% so all you should need to do is add a margin as appropriate. If I'm understanding your question properly.
Have you considered using position:fixed for the framework elements? Or are you stuck supporing IE6?
the horizontal bit can be achieved quite easily
#content {margin-left:200px;}
#left-bar {float-left;width:100px;}
The vertical bit is trickier as there is no vertical equivalent of float. A close approximation that might work is:
html,body
{
min-width:800px;
max-width:1680px;
width:100%;
height:100%
}
#header
{
width:100%;
height:100px;
background:#CCCCCC url(images/header_bg.gif) repeat-x;
position:absolute;
top:0;
left:0;
}
#footer
{
width:100%;
height:10px;
position:absolute;
bottom:0;
left:0;
}
#container
{
width:100%;
height:100%;
margin-top:100px;
margin-bottom:10px;
}
#leftbar
{
height:100%;
width:200px;
float:left;
}
#content
{
height:100%;
margin-left:200px;
overflow:auto;
}
You could use calc(), e.g.:
#container {
...
height: calc(100% - 100px - 10px);
}
And you could either use margins or fixed positioning to set the position of it to between the header and footer.
As for the scrollbars, just apply overflow: hidden to body and div#container and apply overflow: auto to div#content.