I've tried several suggestions online, making my html and body tags have a height of 100% as well as a min-height of 100%. I've set my div tag as the same as well.. It just isn't expanding to the bottom of the screen.
Also I can't get a second floating div to fill 100% of the space not filled up by another div beside it. It will only fill 100% of the screen (under the other smaller div) or enough to allow for the text.
I guess it should be noted that I tried viewing in IE9 as well as Firefox 16.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
body {
margin: 0px;
padding: 0px;
height: 100%;
min-height: 100%;
overflow:hidden;
}
div#topbar {
width: 100%;
height:133px;
background-image :url(bkgnd_header_tile.jpg);
}
div#logo {
width: 187px;
height: 133px;
background-image:url('headerlogo_home.jpg');
float: left;
}
div#text {
width: 1;
height: 133px;
float: right;
}
div#campuses {
height: 68px;
padding-top: 10px;
color: White;
text-align: right;
}
div#title {
height: 41px;
color: White;
text-align: right;
padding-top: 14px;
}
div#sidebar {
height: 100%;
width: 250px;
float: right;
background-color: Black;
}
div#body {
height: 100%;
width: 100%
float: right;
font-family: Segoe UI;
}
span.text {
padding-left: 15px;
padding-right: 15px;
font-family: Sans-Serif;
font-size: small;
}
span.name {
padding-left: 15px;
padding-right: 15px;
font-family: Sans-Serif;
font-size: x-large;
}
</style>
</head>
<body>
<div id="topbar">
<div id="logo"></div>
<div id="text">
<div id="campuses">
<span class="text">St. John's Campus</span>
<span class="text">Grenfell Campus</span>
<span class="text">Marine Institute</span>
<span class="text">Harlow Campus</span>
<span class="text">Distance Education</span>
</div>
<div id="title"><span class="name">Memorial Self Service</span></div>
</div>
</div>
<div id="sidebar">
</div>
<div id="body">
asdf</div>
</body>
</html>
Setting position:relative to body will take body's height into account and stretch absolutely positioned content along body completely
Note that height property specified in percentage is calculated with the respect to the containing block
or you can also try overflow:hidden; in body tag
I would try setting the position to absolute as always I had these kind of weird behaviour, the absolute came to rescue, on top of that I would also set left and top to 0
Basically, following Ravindra's suggestion, and modifying it a bit, I got this to work. I set the body with the following style settings
body {
position: absolute;
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
}
and used these for my two DIV sections:
div#body {
position: relative;
height: 100%;
overflow:scroll;
}
div#sidebar {
position: fixed;
background-color : #EFEFEF;
height: 100%;
width: 300px;
overflow: hidden;
}
div#content {
height: 100%;
float: left;
margin-left: 300px;
<div id="body"></div> is a parent container for the other two div's, id="sidebar" and id="content". I did this because I also had a top bar in its own div 133px high just above the "body" div.
Related
I've been doing the codeacademy HTML/CSS course and understood it fine right up until the end where I had to 'Build a Resume'. I've compared my code to the example at the start of the exercise but I just can't understand why my .right class is sitting at the far right and not lining up correctly. Also the header and the footer are the same width (95%) but the footer is noticeably smaller and doesn't stretch as far across the screen as the header.
Any idea's?
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="style.css"/>
<title></title>
</head>
<body>
<div id="header"></div>
<div class="left"></div>
<div class="right"></div>
<div id="footer"></div>
</body>
</html>
div {
border-radius: 5px;
}
#header {
width: 95%;
height: 50px;
background-color: lightblue;
position: fixed;
z-index: 1;
}
.left {
position: relative;
background-color: lightgreen;
height: 400px;
width: 20%;
float: left;
margin-top: 60px;
}
.right {
position: relative;
background-color: lightgray;
height: 400px;
width: 74%;
float: right;
margin-top: 60px;
margin-bottom: 10px;
}
#footer {
position: relative;
background-color: gray;
width: 95%;
height: 60px;
clear: both;
}
your .right is sitting at the far right because of float: right;, telling the div to float to the right until it hits something(screen/browser edge or another div). If you want it to connect snugly against your left div, try float: left;, which will float that div towards and against your existing .left div.
I have a web page with one big container for the entire page. Inside that <div> I have another <div> with float:left. Then, floating to the right of that child <div> I have a second container that will contain other <div>s. The secondary container is collapsing. I have searched and tried other solutions, but they didn't solve anything. BTW this is an html5 page <!DOCTYPE html>. Any ideas?
CSS:
body {
border: 0px;
padding: 0px;
margin: 0px;
background: white;
overflow: hidden;
height: 100%;
font-family: Hanuman;
}
#container {
margin: 0 auto;
background: red;
height: 100%;
width: 100%;
overflow: hidden;
}
#bibletree {
padding: 0;
margin: 0;
height: 100%;
width: 15%;
float: left;
background: blue;
overflow: auto;
white-space:nowrap;
}
#container2 {
margin: 0 auto;
height: 100%;
width: 85%;
background: gray;
float: right;
overflow: auto;
}
html:
<div id="container">
<div id="bibletree">
stuff here
</div>
<div id="container2">
there will be two other divs here as well. This one is collapsing.
</div>
</div>
Hi now give to body and html height 100%
As like this
body, html{
height:100%;
}
Demo
Does This solve the problem?
(adding overflow:hidden to #container2's rules?)
I'm trying to make some decoration outside the main content div,
that would be getting hidden if the window size is small.
I thought for a while and came up with the following markup, (you can copy paste and see it),
and that's best I could think of right now. The problem however is that because I used percentage margins, the decoration gets unstable and shaky while resizing, and sometimes is even stepping on the content div.
Here's the code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style>
body {
padding: 0px;
margin: 0px;
width: 100%;
height: 100%;
background-color: yellow;
}
div.content {
display: block;
width: 958px;
height: 400px;
background-color: #CCC;
margin: 0px auto;
}
div.wrap {
margin: 0px auto;
min-width: 958px;
max-width: 1058px;
overflow: hidden;
position: relative;
background-image: url(http://www.ephotobay.com/image/ooo-ml.png);
background-position: center;
}
div.left, div.right {
background-image: url(http://www.laserpros.com/images/site/HP_Circle_Logo_Vector1_small.jpg);
width: 50px;
display: block;
height: 50px;
bottom: 0px;
position: absolute;
}
div.left {
right: 479px;
margin-right: 50%;
}
div.right {
left: 479px;
margin-left: 50%;
}
</style>
</head>
<body>
<div class="wrap">
<div class="left"></div>
<div class="right"></div>
<div class="content">
<-- Content
</div>
</div>
</body>
</html>
So, could you recommend guys for some other way around without using percentage margins, to make it more flexible..? Thanks!
EDIT:
This is what happens in Google Chrome on resize:
As the browser has to re-calculate the margins based on the parent's width changes, this is kind of expected behaviour.
If you want to keep content centralized on the screen without playing with max-width, min-width and margins as percentage, and there won't be any element that should be affected by the .wrap position in the document flow, you could do something like this:
div.wrap {
width: 1058px;
overflow: hidden;
position: absolute;
left: 50%;
top: 0;
margin-left: -529px; /* 1058/2 * -1 */
background-image: url(http://www.ephotobay.com/image/ooo-ml.png);
background-position: center;
}
This will centralize the content horizontally in every situation.
Hope it helps.
Clear your floats:
<div>
<div class="left"></div>
<div class="right"></div>
<div class="clear"></div>
</div>
<style>
.clear{clear:both;}
</style>
Given this HTML:
<div id="div1">
<div id="div1a"></div>
<div id="div1b"></div>
<div id="div1c"></div>
<div id="div1d"></div>
</div>
<div id="div2a"></div>
Can I get this structure using CSS display property?
Sure, it can be done with the following CSS:
/* Height of the top box. Change as needed to suit your layout */
#div1a {
height: 50px;
}
/* 3 left side boxes. Again, alter the height/width as needed. If you change
the width, you'll need to update the margin-left on #div2a as well. */
#div1b, #div1c, #div1d {
width: 100px;
height: 60px;
/* This bit causes them to float to the left in a vertical row of boxes */
float: left;
clear: both;
}
/* Increased height of the last box on the left */
#div1d {
height: 200px;
}
/* Main content box on the right. min-height can be changed as needed.
The margin makes room for the 3 boxes floating down the left side.
You read its properties as margin: top right bottom left; */
#div2a {
min-height: 365px;
margin: 0 20px 0 140px;
}
/* Generic margin/padding for all <div>'s */
div {
margin: 5px;
padding: 5px;
}
/* Remove the generic margin for #div1 */
#div1 {
margin: 0;
}
Demo of it in action.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type='text/css'>
.mask{
position: relative;
overflow: hidden;
margin: 0px auto;
width: 100%;
background-color: #f4f4f4
}
.header{
float: left;
width: 100%;
background-color: #f4f4f4
}
.colleft{
position: relative;
width: 100%;
right: 84%;
background-color: #f4f4f4
}
.col1{
position: relative;
overflow: hidden;
float: left;
width: 82%;
left: 101%;
background-color: #e6e6e6
}
.col2{
position: relative;
overflow: hidden;
float: left;
width: 14%;
left: 3%;
background-color: #e6e6e6
}
.footer{
float: left;
width: 100%;
background-color: #b4caf7
}
body {
padding: 0px;
margin: 0px;
font-size: 90%;
background-color: #e7e7de
}
</style>
</head>
<body>
<div class="mask">
<div class="header">
DIV1A
</div>
<div class="colleft">
<div class="col1">
DIV2A
</div>
<div class="col2">
<div id="div1b">DIV1B</div>
<div id="div1c">DIV1C</div>
<div id="div1d">DIV1D</div>
</div>
</div>
<div class="footer">
footer
</div>
</div>
</body>
</html>
I'm trying to get my page to occupy 100% of the screen, with a footer, which needs to always be on the bottom of the page.
The div's should expand when the page resizes, with the right background color.
The bugs I have at the moment are :
- Footer stays at bottom of the screen not of the page.
- div (menu) is bigger than the div (content)
- the div doesn't resize properly
Here's my code:
Div stucture
<div id="container"><br />
<div id="header">CMS</div>
<div id="menu"><?php include ('includes/menu.php');?></div>
<div id="content">
<?php include $include_page?>
</div>
<div id="footer">CMS</div>
</div>
CSS
body {
height: 100%;
color: #0b0b0b;
background-color: #696060;
margin: 0px;
padding: 0px;
font-family: Tahoma, sans-serif;
font-size: 12.5px;
}
#container {
margin-left: auto;
margin-right: auto;
width: 1000px;
background-color: #f1f1f1;
border-left: 1px solid #8f8f8f;
border-right: 1px solid #8f8f8f;
height: 100%;
}
#header {
height: 100px;
width: 100%;
background-color: #a31f00;
color: #fcfcfc;
text-align: center;
}
#menu {
width: 210px;
background-color: #e0e0e0;
float: left;
padding: 10px 10px 10px 10px;
height: 100%;
}
#content {
width: 750px;
height: 100%;
float: left;
padding: 10px 10px 10px 10px;
}
#footer {
position: absolute;
bottom: 0;
width: 1000px;
height: 20px;
background-color: #a31f00;
color: #fcfcfc;
text-align: center;
font-size: 11px;
}
You might be thinking about a sticky footer. A sticky footer sticks to the bottom of the page when there isn't enough content to push it down, but when the content starts overflowing the page, it goes along with it.
To make one, you basically want to wrap everything which is not the footer within a <div> tag, like so:
<div id="wrap">
<div id="header">
...
</div>
<div id="main">
<!-- All you page content goes here -->
</div>
</div>
<div id="footer">
I am a footer.
</div>
Now, for the magic CSS:
html, body
{
height: 100%;
}
#wrap
{
min-height: 100%;
}
#main
{
overflow: auto;
padding-bottom: 150px; /* must be same height as the footer */
}
#footer
{
position: relative;
margin-top: -150px; /* negative value of footer height */
height: 150px;
clear: both;
}
/* Opera Fix */
body:before
{
content: "";
height: 100%;
float: left;
width: 0;
margin-top: -32767px;/
}
And on your HTML page you will need this conditional style for IE6 and earlier and for IE8 (!IE7 means not 7, but all others):
<head>
...
<!--[if !IE 7]>
<style type="text/css">
#wrap
{
display: table;
height: 100%;
}
</style>
<![endif]-->
...
</head>
I'd try putting the content div inside the menu div. That way the menu is always the height of it's content, while content div can push the menu - and it's content down where applicable. Remove the height 100%.
Why pos:abs on the footer? Have you tried relative?
You may want to read this for aligning your footer at the bottom of the screen, regardless of content above; http://www.zymic.com/tutorials/html/effective-footers/