I need help in extending my div to the bottom of the page when there is not enough content to do so, when I add a height of 100% to the content and container nothing changes and when I add it to the body everything messes up. I am trying to give as much information as possible and so have provided the CSS and HTML below.
CSS:
(all of it, a lot of it is probably unnecessary in regards to this problem sorry)
body {
background-color: #111014;
background-image: url("images/bg.png");
background-repeat: repeat-x;
color: #dad8df;
font-family: tahoma;
overflow-y: scroll;
}
#container {
height: 100%;
width: 1000px;
margin-left: auto;
margin-right: auto;
}
img{
border-style: none;
}
#banner {
margin-top: 45px;
margin-bottom: 38px;
height: 68px;
width: 1000px;
background-image: url("images/bannerbg.png");
}
#navigation {
height: 36px;
width: 1000px;
margin-left: 49px;
}
#content {
background-image: url("images/contentbg.png");
background-repeat: repeat-y;
height: 100%;
width: 850px;
padding-left:80px;
padding-bottom: 20px;
margin-bottom: -8px;
padding-right: 50px;
overflow: hidden;
}
#title {
height: 90px;
width: 542px;
padding-left: 60px;
padding-top: 36px;
background-image: url("images/titlebg.png");
background-repeat:no-repeat;
font-family: tahoma;
font-size: 2.5em;
color: #dad8df;
margin-left: -80px;
}
#slideshow {
height: 285px;
width: 840px;
margin-left: auto;
margin-right: auto;
background-color: #2e2c35;
float: left;
margin-bottom: 20px;
}
#slideleft {
height: 38px;
width: 23px;
background-image: url("images/slideleft.png");
float: left;
margin-left: -60px;
margin-top: 104px;
}
#slideright {
height: 38px;
width: 23px;
background-image: url("images/slideright.png");
float: right;
margin-right: -50px;
margin-top: 104px;
}
#emailform {
color: #dad8df;
font-family: tahoma;
overflow: hidden;
}
.inputs {
float: right;
width: 200px;
font: .9em tahoma;
}
#largemessage {
float: right;
clear: both;
width: 700px;
height: 150px;
resize: none;
font: .9em tahoma;
}
#submit {
margin-top: 20px;
clear: both;
float: right;
}
hr {
border-width: 3px 0 0 0;
border-style: dotted;
}
.contacterror {
margin-right: 180px;
height: 20px;
width: 300px;
color: red;
float: right;
padding-left: 20px;
}
HTML:
<!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" xml:lang="en" lang="en">
<head>
<title>About :: Lesley Robb Fine Art and Design</title>
<link rel="icon" type="image/png" href="" />
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<link rel="stylesheet" href="design.css" type="text/css"/>
<script src="" type="text/javascript"></script>
</head>
<body>
<div id="container">
<div id="banner">
</div>
<div id="navigation">
<img src="images/nav_home.png" alt="Home" /><img src="images/nav_portfolio.png" alt="Portfolio" /><img src="images/nav_about.png" alt="About" /><img src="images/nav_contact.png" alt="Contact" />
</div>
<div id="content">
<div id="title">
About
</div>
You can edit this section after you Log In to the Control Panel. :)</div>
</div>
</body>
</html>
The Page As it Currently Is
An image of it for future reference once I have fixed the problem
Thanks in advance for your time,
Callum
Try using a technique called Faux Columns.
Usually, if you add
body, html{
height:100%;
}
the container div will inherit from it.
Try setting the height on your #container div to auto.
#container {
height:auto;
That should do it!
As the doc said:
The percentage is calculated with respect to the height of the generated box's containing block. If the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the value computes to 'auto'
http://www.w3.org/TR/CSS2/visudet.html#the-height-property
If adding html,body { height:100%; } mess up, it's certainly because browsers set default margin/padding for these elements.
The simpler solution for your problem is to set for #container min-height the viewport height and set it a background which will fake #content reaches the bottom. Faux columns as Nathaniel said.
Related
I am currently designing a basic website however, after nearly completing my CSS I found that when I opened the webpage on a different computer it looked different and not only that it looked different in different ways depending on the web browser.
Therefore I am unsure whether or not it is a problem with browser or resolution compatibility so my question would be can anyone tell me in which field the problem lies (may be both) and maybe advice on the direction I can go to solve the problem.
The following is a link to an online album of screenshots of the webpage run on the four 'main' browsers on my laptop with a resolution of 1600x900 and the family computer with a resolution of 1440x900. Also if the page is resized or zoomed in then things start moving about.
Thank you in advance for any help or advice, if you want me to provide any further information please just say what you would like to see.
HTML
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso10646"/>
<meta http-equiv="content-language" content="en-GB"/>
<meta name="author" content="###########"/>
<meta name="designer" content="##########"/>
<meta name="description" content="The official website of ##########, promoting her humanist services."/>
<!--<meta name="keywords" content="##########, humanist"/>-->
<meta name="language" content="english"/>
<meta name="robots" content="index, follow"/>
<meta name="googlebot" content="index, follow"/>
<link type="text/css" rel="stylesheet" href="stylesheet lego.css"/>
<title>Home Page</title>
</head>
<body>
<div id="page">
<div class="toparea">
<img src="Client's Logo.png" id="logo"/>
<h1 id="title">Significant Ceremonies by ##########</h1>
<ul>
<li>Tel: ############</li>
<li>E-mail: #######################</li>
</ul>
</div>
<div class="sidearea">
<ul>
<li>Home</li>
<li>About Me</li>
<li>Humanism</li>
<li>Planning</li>
<li>Specialist Areas</li>
<li>Testimonials</li>
<li>Contact Me</li>
</ul>
</div>
<div class="mainarea">
<h2 id="subtitle">Home</h2>
<p>"I would rather live a life based on honesty, compassion and humanity through my own free will instead of it coming from the fear of
divine beings." - ###########</p>
<p>Welcome to my web site, here you can find information about the services I perform and about Humanism itself. Please feel free to
navigate around my site and if you have any questions you can either contact me directly or use the form on the 'Contact Me' page.</p>
</div>
<div class="bottomarea">
<ul>
<li>Tel: ############</li>
<li>E-mail: #######################</li>
</ul>
<img src="BHA logo.jpg" id="bhalogo"/>
</div>
</div>
</body>
</html>
CSS
body
{
background-color: #CCCCCC;
}
#page
{
position: absolute;
left: 25%;
height: 100%;
width: 800px;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
background-color: #E6F5E6;
font-family: vijaya, sakkal majalla, narkisim, monotype corsiva, jasmineupc, gabriola, french script mt, footlight mt light, calisto mt, papyrus;
}
.toparea
{
float: left;
width: 800px;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
}
#logo
{
float: left;
width: 200px;
height: 220px;
margin-top: 10px;
margin-right: auto;
margin-bottom: 0;
margin-left: 10px;
}
#title
{
float: left;
width: 250px;
height: 160px;
margin-top: 70px;
margin-right: auto;
margin-bottom: 0;
margin-left: 80px;
text-align: center;
font-size: 32px;
color: #002E00;
}
.toparea ul
{
float: left;
width: 180px;
height: 220px;
margin-top: 10px;
margin-right: auto;
margin-bottom: 0;
margin-left: 40px;
list-style: none;
}
.sidearea
{
clear: both;
float: left;
width: 200px;
margin-top: 60px;
margin-right: auto;
margin-bottom: 10px;
margin-left: auto;
}
.sidearea ul
{
list-style-type: none;
}
.sidearea ul li
{
margin-top: 0;
margin-right: 20px;
margin-bottom: 10px;
margin-left: 0;
text-align: center;
border-style: solid;
border-radius: 5px 5px 5px 5px;
background-color: #4DB84D;
border-color: #002E00;
font-size: 25px;
}
.sidearea ul li a
{
text-decoration: none;
color: black;
}
#subtitle
{
color: #002E00;
}
.mainarea
{
float: left;
width: 560px;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: 20px;
padding-right: 10px;
padding-left: 10px;
/*background-color: #EEF8EE;*/
}
.bottomarea
{
clear: both;
float: left;
width: 800px;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
}
.bottomarea ul
{
position: fixed;
bottom: 0;
left: 360px;
width: 610px;
margin-top: 0;
margin-right: auto;
margin-bottom: 10px;
margin-left: 10px;
list-style-type: none;
}
#bhalogo
{
position: fixed;
right: 388px;
bottom: 0;
width: 150px;
height: 100px;
margin-top: 0;
margin-right: 10px;
margin-bottom: 10px;
margin-left: auto;
}
Okay so I asked a question earlier on:
How to make a div fill the remaning vertical space using css
got an answer which Ive now been playing around with:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css" media="screen">
html, body{
padding: 0;
margin: 0 auto;
height: 100%;
}
#header {
float: top;
width: 100%;
height: 15%;
background-color: green;
}
#navbar {
float: left;
width: 20%;
height: 70%;
background-color: red;
}
#content {
float: right;
width: 80%;
height: 70%;
background-color: blue;
}
#footer {
float: bottom;
width: 100%;
height: 15%;
background-color: yellow;
}
</style>
</head>
<body>
<div id="header"> Header </div>
<div id="navbar"> Nav Bar </div>
<div id="content"> Body </div>
<div id="footer"> Footer</div>
</body>
</html>
Now ultimatley Id want to achieve this:
in which it covers 100% of the screen but I can choose how those percentages are spread i.e:
html, body{
padding: 0;
margin: 0 auto;
height: 100%;
}
#header {
float: top;
width: 100%;
height: 15%;
background-color: green;
}
#navbar {
float: left;
width: 20%;
height: 70%;
background-color: red;
}
#content {
float: right;
width: 80%;
height: 70%;
background-color: blue;
}
#footer {
float: bottom;
width: 100%;
height: 15%;
background-color: yellow;
}
As you can html and body have a height of 100% thus filling the screen. The header has a height percentage of 15% the nav bar and body have a percentage of 70% and the footer 15% which in total would make up the 100% of the visible screen...
Now everything seems fine except for my footer:
#footer {
float: bottom;
width: 100%;
height: 10%;
background-color: yellow;
}
if I remove height: 15% then I can see my background color of yellow:
if I dont its some greyish color. and looks to take up about 20% of the screen:
So basically how would I get my divs to take up the correct height percentage I assigned them?
I hope Im making sense.
Thanks in advance.
You can't float to top or bottom. That doesn't exist. So you have to remove that from your header and footer.
And clear the footer by doing:
footer {
clear: both;
}
your problem is that there is no:
float:top;
or
float:bottom;
What you need to do is make them both float:left;
here is a copy and paste of your code with the update:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css" media="screen">
html, body{
padding: 0;
margin: 0 auto;
height: 100%;
}
#header {
float: left;
width: 100%;
height: 15%;
background-color: green;
}
#navbar {
float: left;
width: 20%;
height: 70%;
background-color: red;
}
#content {
float: right;
width: 80%;
height: 70%;
background-color: blue;
}
#footer {
float: left;
width: 100%;
height: 15%;
background-color: yellow;
}
</style>
</head>
<body>
<div id="header"> Header </div>
<div id="navbar"> Nav Bar </div>
<div id="content"> Body </div>
<div id="footer"> Footer</div>
</body>
</html>
I have two divs featureText and skillsText one right after the other, I am trying to get the second one to float right of the next one instead of stacking, I have tried position relative on the second one with float left to no avail, the container itself is positioned relative. When I inspect the first div it shows to be super wide yet I have a width set and margins and paddings have been set to 0 to see if that was the problem. This is such a noob problem, but I need help.
live site
html
<!DOCTYPE html>
<html>
<head>
<title>Portfolio of Anders Kitson</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/styles.css">
<script type="text/javascript" src="//use.typekit.net/lfr7txf.js"></script>
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
</head>
<body>
<div id="container">
<header>
<h1>ASK</h1>
<h2>Anders Samuel Kitson, front end web developer.</h2>
</header>
<div id="featureText">
<h1>Recent Works</h1>
</div>
<div id="skillsText">
<h1>Super hero skills</h1>
</div>
<div id="siteThumbs"><!--not sure if this is appropriate use of the section tag-->
<div id="springmethod">
<h1 class="springmethod">Springmethod.com</h1>
</div>
<div id="goodmorning">
<h1 class="goodmorning">goodmorningmoon.ca</h1>
</div>
</div>
</div>
</body>
</html>
css
/*variables*/
/*shared styles*/
#container {
width: 960px;
max-width: 90%;
border: solid 0px #000;
margin: auto;
position: relative; }
header h1 {
background: url("../images/ask.gif");
width: 97px;
height: 96px;
text-indent: -9000px; }
header h2 {
font-family: "brandon-grotesque",sans-serif;
font-weight: 300;
font-size: 2.5em; }
#featureText {
margin-top: 70px;
margin-bottom: 20px;
width: 24%;
background: red; }
#featureText h1 {
font-family: "brandon-grotesque",sans-serif;
font-size: 2.5em;
font-weight: 700; }
#skillsText {
width: 28%;
background: aqua;
position: relative;
float: left; }
#skillsText h1 {
font-family: "brandon-grotesque",sans-serif;
font-size: 2.5em;
font-weight: 700;
margin-top: -10px; }
#siteThumbs {
position: relative;
float: left;
width: 960px; }
#siteThumbs .springmethod {
background: url("../images/springmethod.jpg") no-repeat;
width: 318px;
height: 241px;
text-indent: -9000px;
padding: 0;
margin: 0; }
#siteThumbs .goodmorning {
background: url("../images/goodmorning.jpg") no-repeat;
width: 318px;
height: 241px;
text-indent: -9000px;
padding: 0;
margin: 0; }
#siteThumbs a:hover .springmethod {
background: url("../images/springmethod.jpg") 0 -241px no-repeat; }
#siteThumbs a:hover .goodmorning {
background: url("../images/goodmorning.jpg") 0 -241px no-repeat; }
#springmethod {
width: 318px;
position: relative;
float: left; }
#goodmorning {
width: 318px;
position: relative;
float: left; }
/*media queries*/
/* Smartphones (portrait and landscape) */
#media only screen and (min-width: 0px) and (max-width: 767px) {
header h2 {
font-size: 1.5em; } }
Remove margin-top: 70px; from #featureText and float left #skillsText
#featureText {
margin-bottom: 20px;
width: 24%;
background: red;
float: left;
}
#skillsText { float:left; }
I'm creating a banner at the top of my page. It's built using 3 banners that will have content. When I horizontally shrink the browser window, my green banner component(on the right) moves with the edge of the screen eventually overlapping or going under my blue banner component (on the left).
How do I set a browser(body?) width at which the banner on the right stops moving with the shrinking browser and instead enable the browser scroll bars so the page stops shrinking?
If there's an entirely different/better way to approach this please throw all suggestions at me. Trying to learn as much as possible.
Your help is much appreciated. My code is as follows.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<style media="screen" type="text/css">
.bannerBackground
{
width: 100%;
position: absolute;
top: 0;
height: 27px;
background-color: orange;
}
.rightBanner
{
position: absolute;
top: 0px;
right: 0px;
z-index: 9;
height: 27px;
padding-right: 20px;
width: 200px;
text-align: right;
color: #CCCCCC;
font-size: 20px;
font-family: "Trebuchet MS", Helvetica, sans-serif;
font-weight: bold;
background-color: green;
margin:0;
display: block;
}
.leftBanner
{
white-space: nowrap;
position: absolute;
top: 0px;
left: 0px;
z-index: 10;
white-space: nowrap;
margin-bottom: 0px;
width: 645px;
background-color: blue;
height: 27px;
display: block;
}
body
{
font-family: arial;
margin: 0;
padding: 0;
color: #EEEEEE;
}
</style>
</head>
<body>
<div class="leftBanner">
</div>
<div class="rightBanner">
<div>
Some Title Text
</div>
</div>
<div class="bannerBackground">
</div>
</body>
</html>
When you absolutely position elements you take them out of the flow of the page. You can instead use floats.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<style media="screen" type="text/css">
.bannerBackground
{
width: 100%;
height: 27px;
background-color: orange;
}
.rightBanner
{
z-index: 9;
height: 27px;
padding-right: 20px;
width: 200px;
text-align: right;
color: #CCCCCC;
font-size: 20px;
font-family: "Trebuchet MS", Helvetica, sans-serif;
font-weight: bold;
background-color: green;
margin:0;
float: right;
}
.leftBanner
{
white-space: nowrap;
z-index: 10;
white-space: nowrap;
margin-bottom: 0px;
width: 645px;
background-color: blue;
height: 27px;
float: left;
}
body
{
font-family: arial;
margin: 0;
padding: 0;
color: #EEEEEE;
min-width: 960px;
}
</style>
</head>
<body>
<div class="leftBanner">
</div>
<div class="rightBanner">
<div>
Some Title Text
</div>
</div>
<div class="bannerBackground">
</div>
</body>
</html>
You need to remove the position:absolute . Then you could put it all in a container div and float the banners left and right with the body in the middle . That's how I'd do it.
I'm currently coding my design portfolio and have encountered a problem with the layout.
Here is a link to my website so you can see the problem: http://www.mozazdesign.co.cc/
Basically, I want the contact me and the icons below to appear under the header and navigation. I have put them in separate containers but for some reason where ever I place the contact me div the header follows.
Here's the code:
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<link href="styles.css" rel="stylesheet" type="text/css" />
<title>MozazDesign Portfolio</title>
</head>
<body>
<div id="container">
<div id="header">
<div id="logo">
</div><!--end logo-->
<div id="nav">
<ul id="main_nav">
<li>home</li>
<li>about me</li>
<li>gallery</li>
<li>blog</li>
<li>contact</li>
</ul><!--end main nav-->
</div><!--end nav-->
</div><!--end header-->
<div id="main_content">
<div id="contact">
</div><!--end contact"-->
</div><!--end main content-->
</div><!--end container-->
</body>
body {
padding: 0px;
margin: 0px;
background:url('images/Background.png');
font-family: century gothic;
}
#nav a {
text-decoration: none;
color: white;
}
#container {
margin: 0 auto;
width: 960px;
}
#header {
width: 960px;
}
#logo {
background:url('images/Logo.png') no-repeat;
height: 340px;
width: 524px;
float: left;
margin-left: 0px; <!--check-->
}
#nav {
background:url('images/Nav_Container.png') no-repeat;
width: 435px;
height: 33px;
float: right;
margin-top: 100px;
padding: 0px;}
#main_nav {
padding: 0px;
margin-left: 15px;
margin-top: 5px;
}
#main_nav li {
list-style: none;
display: inline;
font: 18px century gothic, sans-serif;
color: white;
margin-right: 18px;
}
#main_content {
width: 960px;
margin-top: 250px;
}
#contact {
background: url('images/contact.png');
height: 274px;
width: 295px;
}
I would really appreciate any help! Thanks in advance! :)
One of the problems you had was that your floated elements were not being contained inside the parent element (#header). You can use overflow:auto; on the parent element to contain floated elements inside. But, for a header like this, I usually opt to just position everything absolutely, since the content is not dynamic.
I am not sure if this is exactly what you are looking for, but this CSS will make it look like what you are looking for, I think.
body {
padding: 0px;
margin: 0px;
background:url('Images/background.png');
font-family: century gothic;
}
#nav a {
text-decoration: none;
color: white;
}
#container {
margin: 0 auto;
width: 960px;
}
#header {
height:200px;
position:relative;
}
#logo {
background:url('Images/Logo.png') no-repeat;
height: 340px;
width: 524px;
position:absolute;
}
#nav {
background:url('Images/Nav_Container.png') no-repeat;
width: 435px;
height: 33px;
position:absolute;
right:0;
top:100px;
padding: 0px;
}
#main_nav {
padding: 0px;
margin-left: 15px;
margin-top: 5px;
}
#main_nav li {
list-style: none;
display: inline;
font: 18px century gothic, sans-serif;
color: white;
margin-right: 18px;
}
#main_content {
}
#contact {
background:url('Images/Contact.png');
height: 274px;
width: 295px;
margin-left:125px;
}
Looks like you need clear: both on your main_content div.
I think an
#header {
overflow:hidden
}
or anything else that clears the floats of div#nav and div#logo should help.
It take 2 steps:
1) Move <div id="contact">...</div><!--end contact"--> into <div id="logo">...</div><!--end logo-->.
2) Change the #contact style to:
background: url("Images/Contact.png") repeat scroll 0 0 transparent;
height: 274px;
top: 200px;
width: 295px;
position: relative;
float: right;
top: 200px;
You need to set position: relative, otherwise it is not working.