I have a couple of pages that seem to cause some conflicting results. I have a login page that should have a background of gray, and then my inner pages have a background of white.
But the div with id="loginPage" doesn't stretch the entire height of the "container" div. Therefore the loginPage div is gray but the space leftover for the container div is still white.
Now, the main container has a min-height because I have a couple pages with a large amount of content. When I set it to only height:100%, the footer isn't on the bottom of the page. But once I had set it to min-height it drops to the bottom of the page.
Here is my css:
html, body { height: 100%;}
#loginPage {
width:100%;
height:100%;
float:left;
background-color:#F7F7F9!important;
}
#container
{
min-height:95%;
position: relative;
background:white;
}
.footerBg
{
width:100%;
padding-top:10px;
margin:0;
position:relative;
}
and html:
<div id="container">
<div class="topHeader_login">
<form method="post" action="/">
<div id="loginPage">
<div id="login_content">
<div id="login">
<div id="info">
<div style="text-align:center; padding-top:15px; float:left;"> </div>
</div>
</div>
</form>
</div>
<div class="footerBg">
I think you may want to have a look at this: http://ryanfait.com/sticky-footer/
It explains how you can keep your footer always on the bottom of your page, even if the content is smaller, and it never adds scrollbars if they are not nessecary. You could then just add your 'grey' background color to the page wrapper.
If you want to set a height on your web pages to a percentage, you
have to set the height of every parent element of the one you want the
height defined.
source: http://webdesign.about.com/od/csstutorials/f/set-css-height-100-percent.htm
try giving form { height: 100% }
take a look at this fiddle, I cleaned up your html and css
Related
See the HTML and CSS below.
When the h1 tag is uncommented, a scrollbar is added to the page, but I don't know why. I suspect it's because the cards have position:fixed, but I don't know how to get them to look like that any other way besides position:fixed.
I would like the title div to take up 20% of the screen and the card-conveyor-belt div to take up 80% of the screen, regardless of their contents. How can I go about doing this?
HTML:
<body>
<div class="title">
<!--
<h1>
HELLO
</h1>-->
</div>
<div class="card-conveyor-belt">
<div class="card left"></div>
<div class="card center"></div>
<div class="card right"></div>
</div>
</body>
CSS
html,body{
height:100%;
margin:0;
padding:0;
background-color:#ccc;
}
.title{height: 20%;width: 100%;}
.card-conveyor-belt{
height: 80%;
width: 100%;
}
.card{
position:fixed;
width:80%;
height:80%;
background-color:white;
border-radius:5px;
}
.center{
left:10%;
}
.left{
left:-78%;
}
.right{
left:98%;
}
Here is the same code in a jsfiddle if you'd like to run/interact with it.
Simply use margin: 0 to fix your problem:
Jsfiddle: https://jsfiddle.net/dj3mabgz/
h1 {
margin: 0;
}
Like the other answer stated, the issue is with the margin on the <h1> tag. By default (at least in Chrome it is default, not certain about other browsers), all <h1> tags have a default margin top value of 0.67em.
Now, since you didn't define where you wanted to position the block inside your .title block, it automatically positioned it at the top. So the result is as you can see in the picture;
The default margin and the default positioning ends up "pushing" all of the content down and forcing the scrollbar to appear.
If my browser window is large enough, the web page is fine. If it is smaller and I scroll to the right, my backgrounds don't go horizontally across the entire browser window. They stop inside the webpage. I have made the body background blue so you can see where the background is ending. I want to make it so the actual content and background pictures end where the browser window ends and have there be no blue. The site is up at avidest.com/schneer. Here is the CSS:
.main {width:100%; padding:0; margin:0 auto; min-width: 1020px;}
.header { background:url(images/slider_bgpng200.png); background-repeat: repeat-x; padding:0; margin:0 auto; width: 100%; }
.header .headertop{width: 100%; background: #d3e5e8; height: 30px;}
.block_header {margin:0 auto; width:1200px; padding:0; border:none; }
.slider { background: transparent; margin:0 auto; padding:0; height:420px;}
.slider .gallery { margin:0 auto; width:980px; height:420px; padding:0;}
And here is the html:
<div class="header">
<div class="headertop">
<div class="header_text">Email | Client Login </div>
</div>
<div class="block_header">
<div class="slider">
<div class="gallery">
</div>
</div>
</div>
</div>
Thanks.
You have contents that go beyond the .main div.
If you add in your div.main { overflow: hidden; } you will see that it works as expected, because nothing is pushing it to a bigger width than expected.
for 100% height, you need html and body tags to be 100% also
add this to your CSS
html, body { height: 100%; width: 100%; }
you would then have to create a fake background out of a 100% by 100% wrapper div and place your background within that to get the effect you are looking for
Why do you have .main class? Didnt you forgot some elements?
In your .header, you set up background and width 100%. so the width of element with .header class will be 100% of its parent element. Whats the parent element of <div class="header">?
I see a huge amount of variance in your widths. I would think "main" "header" "block_header" all would be the same width. Also note that 100% is not 100% of the parent element it is 100% of the window size especially when the parent element is larger than the window. Set the widths to a definitive numbers. If you want the content to fill the users screen then set the parent to 100% first and then all the child element can be set to 100% to fit the parent elements width.
I am using php to dynamically create webpages. As such I have things more objectified. My generic page creates a header, a mainbody and a footer. The content is the placed inside of my mainbody.
Mainbody has a min-height of 600px.
A div inside of mainbody for one page acts as a menu on the left side of mainbody. I want this div to be 100% of the height of the mainbody.
The div (menu) is floating left, and the rest of the mainbody content is generated dynamically by the php.
What doesn't Work:
height:100%; (It just ends up being the height of the content I have inside the menu, not the height of the mainbody)
min-height:600px; (It just stays 600px, even when mainbody gets larger)
Haven't played with it enough, but position absolute, absurdly large height, and a negative z index, and mainbody overflow...not successful with the little bit I tried.
Any ideas? I'm totally open to doing any kind of weird manipulation, so long as it looks natural.
Here's example code: jsfiddle.net/TButx
http://jsfiddle.net/TButx/56/
The solution is to pad the bottom of the column and hide overflow.
#html{width:400px; height:100%; margin-left:auto; margin-right:auto; background-color:yellow;}
#mainbody {min-height:300px; height:100%; overflow: hidden;}
#menu {width:100px; height:inherit; background-color:blue; float:left; padding-bottom: 700px;margin-bottom: -700px;}
#content {height:100%; width:300px; background-color:red; float:right; padding-bottom: 500px;margin-bottom: -500px;}
#clear {clear: both;}
<div id="html">
<div id="mainbody">
<div id="menu"></div>
<div id="content"></div>
<div id="clear"></div>
</div>
</div>
There must be an error in your code. As you describe it, everything should work.
Like here: http://jsfiddle.net/VxSA3/
HTML:
<div id="Mainbody">
<div id="menu">menu content</div>
<p>some text in the main-body</p>
</div>
CSS:
#Mainbody{height:600px;outline:1px solid green;}
#menu{height:100%;outline:2px solid red;float:left;width:100px;}
A common problem with this is that your main body div isn't wrapping around your floating elements. You have to have a div in it with clear:both and the body div will stretch.
As an alternative method, you can use absolute position to control the stretch of the menu div.
For the main body div:
position:relative;
For the left floated div (no longer left floated in this case):
position:absolute;
left:0px;
bottom:0px;
top:0px;
width:...
I want to have a full header, while a fixed width of the content in the center of the page. Here's my code:
HTML:
<body>
<div class="header">
<div class="wrap">Header</div>
</div>
<div class="content">
content
</div>
</body>
CSS:
.header{
background:yellow;
}
.wrap, .content{
border:1px solid red;
margin:0 auto;
width:500px;
}
I've used .wrap inside the .header so that the content in the header also has same width as the .content.
Problem:
The layout looks fine, however the problem starts when the width of the browser window gets less than the width of the wrap (ie. 500px). In that case when we scroll the page towards the right side, some part of header background goes missing.
JSFiddle:
Here you can see the jsfiddle (http://jsfiddle.net/QS3nS/1/). You can see the problem if you decrease the browser width so that it the width of output window becomes less than 500px.
Set a min width on the header
.header{
background:yellow;
min-width: 500px;
}
I have the following HTML to build a 900 pixel wide, centered page, with a header, footer and content section:
<body>
<div id="mainMaster">
<div id="main">
<form runat="server">
<div id="header">
</div>
<div id="content">
</div>
</form>
</div>
</div>
<div id="footer">
</div>
</body>
The layout is styled with the following (approx) CSS:
html, body
{
height: 100%;
}
#mainMaster
{
min-height: 100%;
background: url(../Images/Background.png);
}
#main
{
width: 930px;
margin: 0 auto;
height:auto !important; /* real browsers */
height:100%; /* IE6: treaded as min-height*/
min-height:100%; /* real browsers */
}
#header
{
}
#footer
{
background-image:none;
background-color:White;
position: relative;
margin-top: -80px; /* negative value of footer height */
margin-left: auto;
margin-right: auto;
width: 930px;
height: 80px;
clear: both;
}
#content
{
position:relative;
overflow:hidden;
height:100%;
background-image:none;
background-color:White;
}
The CSS was originally based on a layout I found on the internet for 'sticky footers'. It worked perfectly with a sticky footer, but then I came across these problems:
1) The 'content' is never stretched to full size. This is a big problem on some of my pages because internal controls are set to a height of 100%. Since content isn't stretched, the controls show up all squeeshed.
2) I just added a background image and colour. This background should not show up in the middle content panes. Because the 'content' isn't fully stretched I get the background image showing in the wrong places.
I prefer a CSS only fix for this (ie. no hacks or JS). Any help?
I would expect removing the #mainMaster <div> and moving its background image into #main's CSS would sort your problem out:
<body>
<div id="main">
<form runat="server">
<div id="header"></div>
<div id="content"></div>
</form>
</div>
<div id="footer"></div>
</body>
The problem you're running into is that #main's parent (#mainMaster) doesn't have an explicit height declared. Percentage heights only work properly when the elements parent has a height defined.
Try using min-height CSS property to set a minimum height for your content.
Adding a specific background color to #content and #header should prevent the background image from displaying in those areas. Not sure why the content isn't filling up the area, when you say "stretched" do you mean to a height of 100%? Browsers won't recognize a height of 100% without using js.