I am working on a CSS3/HTML5 Asp.NET 4.5 web application. I have the HTML and CSS the way I want it for my layout except for one issue.
The theory behind my css is the header and nav are obviously set at the top of the page, with a container with an aside and article, followed by an independent footer that I want always to be at the bottom of the page regardless of how little content there is. Everything works except that when I have the aside set to 100% height, it is 100% of the viewport height, meaning that on pages with little content, you have to scroll 260px (the combined height of the header, nav, and footer) to see it. So, to address that, I set the margins of the aside to 280px top, and 80px bottom thinking that would do the trick. It did not. So I started playing with position and clear as suggested by similar questions on SO and around the web without success.
HTML:
<body>
<form id="form1" runat="server">
<header>
<div id="logo">
</div>
<div id="title">
<h1>Nathan A. Chesebro</h1>
<h2>United States Merchant Marine</h2>
</div>
</header>
<nav>
</nav>
<div id="content">
<aside>
Vessel data
</aside>
<article>
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</article>
</div>
<footer>
</footer>
</form>
</body>
CSS
*
{
margin: 0;
}
body
{
margin: 0px auto;
height: 100%;
}
form, html
{
height: 100%;
}
header
{
margin: 0px auto;
background-color: #1041a2;
background-image: url(../Images/headerHCJ.png);
background-repeat: no-repeat;
background-position-x: right;
height: 150px;
position: relative;
}
nav
{
background-image: url(../Images/nav.png);
font-family: Arial;
color: white;
background-repeat: repeat-x;
height: 30px;
width: 100%;
line-height: 30px;
margin: 0px auto;
}
#content
{
margin: 0px auto;
height: 100%;
}
aside
{
margin: 180px 0px 80px 0px auto;
float: left;
width: 250px;
background-color: gray;
height: 100%;
overflow: hidden;
position: relative;
clear: both;
}
article
{
margin: 0px auto;
padding-left: 250px;
min-height: 100%;
}
footer {
height:80px;
background: black;
clear: both;
}
Is this what you're looking for? It's just a concept so I didn't copy your exact code.
Also, I am using a calc() method in the CSS (which is getting more and more browser support but may still be restrictive on some eg. opera-mini etc.).
Here's the fiddle: http://jsfiddle.net/thePav/A3NCW/1/
CSS
html,
body {height: 100%; margin: 0; padding: 0}
header {height: 150px; background-color: #800}
header #logo {}
header #title {}
nav {height: 30px; background-color: #080}
#content {overflow: hidden; height: calc(100% - 280px)}
#content aside {background-color: #555; height: 100%; float: left; width: 25%}
#content article {float: left; width: 75%}
#footer {width: 100%; height: 100px; position: absolute; bottom: 0; left: 0; background-color: #000}
HTML
<header>
<div id="logo"></div>
<div id="title"></div>
</header>
<nav></nav>
<div id="content">
<aside></aside>
<article>Some content here</article>
</div>
<div id="footer"></div>
You can use display's 'table' and 'table-cell' values.
Check out this fiddle: http://jsfiddle.net/scottmey/j9jrz/
#content {
display: table;
width: 100%;
}
aside {
display: table-cell;
}
article {
display: table-cell;
}
CSS cannot be used to make two items the same height.
You either need to use javascript to set the height, or else use a table tag.
Related
I have this page layout and am trying to make it occupy 100% of the height by expanding the content area and leaving the footer visible at the bottom of the page.
But for some reason the content area is not expanding. Do you know what I need to change in the code?
<body>
<form id="form1" runat="server">
<div>
<div class="main">
<div class="header">
This is the header
</div>
<div class="content">
This is the content
</div>
<div class="footer">
This is the footer
</div>
</div>
</div>
</form>
</body>
And here is the css
html, form
{
height: 100%;
}
body
{
padding: 0px;
margin: 0px;
background-image: url('../back.jpg');
height: 100%;
}
.main
{
margin: 0px auto;
width: 100%;
height: 100%;
}
.header
{
float: left;
width: 100%;
background-color: Yellow;
height: 80px;
}
.content
{
width: 960px;
margin: 0 auto;
background-color: Gray;
height: auto;
min-height: 100%;
}
.footer
{
width: 960px;
background-color: Green;
margin: 0px auto;
height: 50px;
}
Thanks
You need to remove the extra div that has no class specified. Since that div has no height specified, the 100% height you are setting in the div with class main will not work.
<body>
<form id="form1" runat="server">
<div class="main">
<div class="header">
This is the header
</div>
<div class="content">
This is the content
</div>
<div class="footer">
This is the footer
</div>
</div>
</form>
</body>
UPDATE
Okay so fixing your issue with the footer not "sticking" to the bottom of the page, I modified part of your css.
.content
{
width: 960px;
margin: 0 auto;
background-color: Gray;
padding-bottom: 50px;
min-height: 90%;
}
.footer
{
position: fixed;
bottom: 0;
left: 50%;
width: 960px;
margin-left: -480px;
height: 50px;
background-color: Green;
}
.content
padding-bottom: 50px; This is so extra content does not overflow into the space occupied by the footer.
.footer
position: fixed; We need this to force the positioning of the footer.
bottom: 0; This will force the footer to the bottom of the page.
left: 50%; Puts the left side of the footer div in the middle of the page.
margin-left: -480px; Move the div left of half of the width of the footer so it is now centered on the page.
Example 1: http://jsfiddle.net/nG9sm/
Example 2, lots of text: http://jsfiddle.net/9Up5F/
Your code has extra div with no class just remove it, it will fix the issue.
Updated fiddle
Update your .footer CSS:
.footer
{
width: 960px;
background-color: Green;
margin: 0px auto;
height: 50px;
position: absolute;
bottom: 0;
}
or
.footer
{
width: 960px;
background-color: Green;
margin: 0px auto;
height: 50px;
position: fixed;
bottom: 0;
}
Help Link
Make footer stick to bottom of page correctly
I am currently build the front end to a website using 100% height, so each section of the site takes up the viewport of display. (The site should look similar to others that use this technique such as Square Cash.)
The desktop site looks fine, but when making the site responsive the height does not stretch to the content. Making blocks run over the section. This may be because the height is set to 100% so it stops there.
The first welcome section is fine, but the second part of the site consists of 4 boxes (section tags) resting inside of a div tag. I am trying to get the boxes to be responsive staying within the container.
HTML:
<div class="top-section">
<nav>
<div class="nav-logo"><img></div>
Register
</nav>
<div id="center-column">
<h1>WELCOME</h1>
</div>
<div class="text-banner">
<h6></h6>
</div>
</div>
<div class="bottom-section">
<div id="center-box">
<section>
<h6></h6><p></p>
</section>
<section>
<h6></h6><p></p>
</section>
<section>
<h6></h6><p></p>
</section>
<section>
<h6></h6><p></p>
</section>
</div>
</div>
CSS desktop:
html, body{
height:100%;
margin: 0;
padding: 0;
}
.top-section{
height:100%;
background-color: #3498DB;
margin: 0;
padding: 0;
text-align: center;
}
#center-column {
position: relative;
margin: 0;
margin-top: 10%;
margin-bottom: 5em;
padding: 0;
}
.bottom-section{
height:100%;
background-color: #9B59B6;
margin: 0;}
#center-box {
width: 960px;
margin-left: auto;
margin-right: auto;}
section {
text-align: center;
margin: 2%;
float: left;
background-color: #8E44AD;
height: 300px;
width: 400px;
}
CSS MOBILE:
html, body{
height:100%;
margin: 0;
padding: 0;
}
.top-section{
height:100%;
background-color: #3498DB;
margin: 0;
padding: 0;
text-align: center;
}
#center-column {
position: relative;
margin: 0;
margin-top: 10%;
margin-bottom: 5em;
padding: 0;
}
.bottom-section{
min-height:100%;
background-color: #9B59B6;
margin: 0;}
#center-box {
width: 100%;
margin-left: auto;
margin-right: auto;}
section {
text-align: center;
margin: 0;
float: left;
background-color: #8E44AD;
height: 12em;
width: 90%;
}
Try using different percentages which total to 100% or less (including margins, etc.)
I am trying to create 2 side banners (left and right) with fixed positioning, and a centered container for the content.
The problem is that when minimizing the screen, the 2 side banners cover the centered container. I need a CSS solution to set the minimum width of the view to 860px; after which, the window becomes scrollable and divs do not overlap. The perfect solution is:
The HTML I am using is as such:
<div class="left" style="position:fixed; height:100%; background-color:#7fb4dd; top:43px; left:0px; width:180px;">
</div>
<div class="center" style="margin:100px 180px 0 180px;">
<div style="width:100%;">
<div style="width:500px; margin:0 auto;">
</div>
</div>
</div>
<div class="right" style="position:fixed; height:100%; background-color:#7fb4dd; top:43px; right:0px; width:180px;">
</div>
The above code prevents the left bar from overlapping the center container; but the problem is still present with the right bar.
This is a fiddle of the code: preview
You need to wrap the three DIVs in a wrapping DIV and set the min-width to prevent the overlap. This prevents it from getting narrower than the three columns. Add up the widths, set that as the minimum.
Here is a pure HTML/CSS solution for you , tell me if it is not exactly what you needed.
<html>
<head>
<style type="text/css">
body{
margin:0;
padding:0;
line-height: 1.5em;
}
b{font-size: 110%;}
em{color: red;}
#topsection{
background: #EAEAEA;
height: 90px; /*Height of top section*/
}
#topsection h1{
margin: 0;
padding-top: 15px;
}
#contentwrapper{
float: left;
width: 100%;
}
#contentcolumn{
margin: 0 200px 0 230px; /*Margins for content column. Should be "0 RightColumnWidth 0 LeftColumnWidth*/
background-color : red;
width : 400px;
margin-left : auto;
margin-right : auto;
}
#leftcolumn{
float: left;
width: 200px; /*Width of left column*/
margin-left: -100%;
background: #C8FC98;
}
#rightcolumn{
float: left;
width: 200px; /*Width of right column*/
margin-left: -200px; /*Set left marginto -(RightColumnWidth)*/
background: #FDE95E;
}
#footer{
clear: left;
width: 100%;
background: black;
color: #FFF;
text-align: center;
padding: 4px 0;
}
.innertube{
margin: 10px; /*Margins for inner DIV inside each column (to provide padding)*/
margin-top: 0;
height : 700px;
}
.innertubetop{
margin: 10px; /*Margins for inner DIV inside each column (to provide padding)*/
margin-top: 0;
}
</style>
</head>
<body>
<div id="maincontainer" style = "min-width : 800px;"> <!-- this will be sum of width of all three columns-->
<div id="topsection"><div class="innertubetop"><h1>Hello iam navigation bar</h1></div></div>
<div id="contentwrapper">
<div id="contentcolumn">
<div class="innertube"><b>Center Column </b></div>
</div>
</div>
<div id="leftcolumn">
<div class="innertube"><b>Left Column: <em>200px</em></b></div>
</div>
<div id="rightcolumn">
<div class="innertube"><b>Right Column: <em>200px</em></b></div>
</div>
</div>
</body>
</html>
The problem you are in is because of position: fixed; since that object is taken out of the workflow the other objects can't push it away. I was able to get a nice and fully responsive layout to work. (Let me know how it is)
Fixed positioned elements are removed from the normal flow. The
document and other elements behave like the fixed positioned element
does not exist.
Fixed positioned elements can overlap other elements.
Updated answer to better suit his needs (JSFIDDLE, remove the show, in the url, to see code)
Okay what I am doing here is using css media queries to change the layout.
Here is the html,
<div class="wrap">
<nav></nav>
<div class="content"></div>
<section class="lSide"></section>
<section class="rSide"></section>
</div>
Now the media query,
#media only screen and (max-width: 680px) {
.content {
width: 90%;
margin-bottom: 10px;
}
.lSide, .rSide {
position: relative;
width: 90%;
height: 100px;
margin: 10px auto;
bottom: 0;
}
}
Don't forget to add this to your head on your html file,
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0;">
OLD answer
The CSS, (JSFIDDLE, remove the show to see code)
html, body {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
background: tan;
}
.wrap.active {
min-width: 750px;
}
nav {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 20%;
background: brown;
z-index: 101;
}
.lSide {
background: #3b3b3b;
position: fixed;
left: 0;
top: 20%;
width: 200px;
height: 80%;
}
.content {
width: 300px;
height: 600px;
background: #c1c1c1;
margin: 0 auto;
position: relative;
z-index: 100;
top: 20%;
}
.rSide {
background: #3b3b3b;
position: fixed;
right: 0;
top: 20%;
width: 200px;
height: 80%;
}
.rSide.active {
display: none;
}
The JS, (updated)
$(window).resize(function() {
if ($(window).width() < '750') {
$('.wrap, .rSide').addClass('active');
}
else {
$('.wrap, .rSide').removeClass('active');
}
});
One solution I have, refer to fiddle next to css, is to remove the right side when a screen size is to small.
I have a div that I'm trying to position by percent in order for it to stay in place (it kind of floats around not centered on an empty part of the page), while still making it accessible and look good across different screen sizes and not really off to one side.
The problem is that, while I can use left: x% to adjust it accordingly, trying to use top does not do anything unless I'm specifying pixels, not percent. If I try to alter bottom in any way, it latches the div I'm trying to position to up near my header, and altering bottom with px makes it go up the screen from the header area.
Absolutely positioning the content_wrapper actually makes the top attribute work just fine, but it pushes a bunch of space below my footer and adds a scrollbar, pretty much ruining the design beyond the footer.
Here's the HTML:
<body>
<div id="container">
<div id="content_wrapper">
<div id="header">
</div>
<div id="content">
<div class="marquee">
</div>
</div>
</div>
</div>
<div id="footer_wrapper">
<div id="footer">
</div>
</div>
</body>
And here is the CSS:
html, body {
height: 100%;
}
#content {
height: 100%;
position: relative;
width: 100%;
float: left;
}
body {
margin: 0;
padding: 0;
color: #FFF;
/* background: image.jpg; */
background-size: cover;
}
.marquee {
position: absolute;
height: auto;
padding: 10px 5px;
background-color: #F8F8F8;
width: 30em;
left: 15%;
}
#footer_wrapper {
width: 100%;
height: 43px;
}
#container {
width: 100%;
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0px 0px -43px 0px;
}
#content_wrapper {
width: 100%;
margin: 0px 0px -41px 0px;
padding-top: 40px;
height: 100%;
}
#footer {
position: relative;
z-index: 10;
height: 4em;
margin-top: -4.07em;
background-color: #FFF;
clear: both;
background-color: #2A64A7;
border-top: 2px solid #F8F8F8;
}
(There is a float or two in there, like in #content, not necessary to the layout, but which are attempts to fix the issue.)
Any help in this matter would be hugely appreciated. Sorry about all the code, but I feel like the footer bits are necessary simply because of the aforementioned issue with scrolling.
Take out the
height: auto !important;
in #container.
That lets you use % for top or bottom.
I am trying to mimic the layout of having a fixed header and footer with content that fits between the two of them WITHOUT javascript or using a table. You can see what I'm looking for HERE
Actually this is simple. Here is the full code, just copy and paste it.
Credit to Jeremy (http://stackoverflow.com/questions/206652/how-to-create-div-to-fill-all-space-between-header-and-footer-div).
<style type="text/css">
html, body
{
height: 100%;
padding: 0;
margin: 0;
}
#header
{
height: 100px;
color: #FFF;
background: #000;
}
#content
{
min-height: 100%;
height: auto !important; /*Cause footer to stick to bottom in IE 6*/
height: 100%;
margin: 0 auto -100px; /*Allow for footer height*/
vertical-align:bottom;
color: #FFF;
background: #333;
}
#footer
{
height: 100px;
color: #FFF;
background: #000;
}
#divider
{
height: 100px; /*Divider must be same height as Footer */
}
</style>
<div id="content">
<div id="header">
Header
</div>
Content Text
<div id="divider"></div>
</div>
<div id="footer">
Footer
</div>