Previously I asked How do I position buttons so they align horizontally with another element?. I need just a little more help with my CSS and HTML until I've completed it to where I like it.
I have everything but the buttons correctly positioned, so, any help is great! Thanks in advance.
Current Output:
Current 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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Aspen Development | Home</title>
<link href="stylesheet.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<div id="navMenu">
<div id="header">
<div id="brand">Aspen Development</div>
<ul>
<li class="navButton">Home</li>
<li class="navButton">Pricing</li>
<li class="navButton">Contact Us</li>
</ul>
</div>
</div>
<div id="content">
<div id="contentContainer">
<p><b>4.21.14</b> Welcome to Aspen Development.</p>
<p><b>4.19.14</b> The website has been created!</p>
</div>
</div>
<div id="footer">
<center><p style="margin-top: 17px; margin-bottom: 20px; font-size: 0.75em; ">Copyright © 2014 Aspen Development | All Rights Reserved</p></center>
</div>
</div>
</body>
</html>
Current CSS:
#charset "utf-8";
body, h1, h2, h3, h4, h5, h6, p, div {
margin: 0;
padding: 0;
}
#header ul {
list-style-type: None;
padding: 0;
margin: 0;
}
#header ul li {
display: inline;
cursor: pointer;
}
body {
font-family: Arial, Helvetica, sans-serif;
background-color: #FFF;
}
#navMenu, #footer {
width: 100%;
height: 50px;
background-color: #F8F8F8;
border: 2px solid #E6E6E6;
margin: 0 auto;
}
#header {
width: 1104px;
height: 50px;
margin: 0 auto;
text-align: right;
}
#menu {
float: right;
padding: 12px 14px 16px;
padding-top: 12px;
}
#brand {
float: left;
}
#brand a {
display: block;
padding-top: 12px;
padding-bottom: 16px;
padding-right: 14px;
color: black;
font-size: 1.25em;
text-align: justify;
text-decoration: none;
}
.navButton {
padding: 0 14px;
margin-top: 50px;
color: black;
font-size: 0.75em;
}
#content {
width: 100%;
}
#contentContainer {
width: 1140px;
margin: 0 auto;
}
#contentContainer p {
margin: 20px;
}
Once again, thanks for all the help! :)
Related
This question already has answers here:
How do you keep parents of floated elements from collapsing? [duplicate]
(15 answers)
Closed 5 years ago.
Trying to apply a background color to my header but why isn't the #header background color visible? I tried
header { background: grey; width: 100%; margin: 0 auto }
I also tried diffrent colors but it doesn't seem to be working. I'm new to this field so any help will be appreciated. I attached the html and css codes.
* {
margin: 0 auto
}
#slogan {
background: #063540;
color: white;
padding: 20px;
font-family: 'Open Sans', sans-serif;
font-size: small;
width: 100%;
padding-left: 8%;
}
#header {
background: grey;
width: 100%;
margin: 0 auto
}
a {
text-decoration: none;
}
#logo a {
color: #063540;
}
#logo {
float: left;
padding-left: 8%;
color: #063540;
margin-top: 20px;
}
.navbar {
float: right;
top: 0px;
padding-right: 20%;
margin-top: 20px;
}
.navbar a {
padding-left: 25px;
color: #063540;
font-size: 14pt;
}
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<title>MyWebsite</title>
</head>
<body>
<p id="slogan">We are creative agency</p>
<div id="header">
<div id="logo">
<a href="/">
<h1>MyWebsite</h1>
</a>
</div>
<div class="navbar">
Home
About
Services
Projects
Pages
Blog
Contact
</div>
</div>
</body>
</html>
It because you have floating element in your header so you need to clear the float element.
The problem happens when a floated element is within a container box, that element does not automatically force the container’s height adjust to the floated element. When an element is floated, its parent no longer contains it because the float is removed from the flow.
Please refer this link for more understanding.
#header:before, #header:after {
content: "";
clear: both;
display: table;
}
*{
margin: 0 auto
}
#slogan {
background: #063540;
color: white;
padding: 20px;
font-family: 'Open Sans', sans-serif;
font-size: small;
width: 100%;
padding-left: 8%;
}
#header {
background: grey;
width: 100%;
margin: 0 auto
}
#header:before, #header:after {
content: "";
clear: both;
display: table;
}
a {
text-decoration: none;
}
#logo a {
color: #063540;
}
#logo {
float: left;
padding-left: 8%;
color: #063540;
margin-top: 20px;
}
.navbar {
float: right;
top: 0px;
padding-right: 20%;
margin-top: 20px;
}
.navbar a {
padding-left: 25px;
color: #063540;
font-size: 14pt;
}
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<title>MyWebsite</title>
</head>
<body>
<p id="slogan">We are creative agency</p>
<div id="header">
<div id="logo"><h1>MyWebsite</h1></div>
<div class="navbar">
Home
About
Services
Projects
Pages
Blog
Contact
</div>
</div>
</body>
</html>
All elements inside #header are float, so #header get out of normal flow of document.
Method 1)
#header:after {
content: '';
display: block;
clear: both;
}
* {
margin: 0 auto
}
#slogan {
background: #063540;
color: white;
padding: 20px;
font-family: 'Open Sans', sans-serif;
font-size: small;
width: 100%;
padding-left: 8%;
}
#header {
background: grey;
width: 100%;
margin: 0 auto;
}
#header:after {
content: '';
display: block;
clear: both;
}
a {
text-decoration: none;
}
#logo a {
color: #063540;
}
#logo {
float: left;
padding-left: 8%;
color: #063540;
margin-top: 20px;
}
.navbar {
float: right;
top: 0px;
padding-right: 20%;
margin-top: 20px;
}
.navbar a {
padding-left: 25px;
color: #063540;
font-size: 14pt;
}
<p id="slogan">We are creative agency</p>
<div id="header">
<div id="logo"><h1>MyWebsite</h1></div>
<div class="navbar">
Home
About
Services
Projects
Pages
Blog
Contact
</div>
</div>
Method 2)
Insert <br style="clear: both"> to html code:
* {
margin: 0 auto
}
#slogan {
background: #063540;
color: white;
padding: 20px;
font-family: 'Open Sans', sans-serif;
font-size: small;
width: 100%;
padding-left: 8%;
}
#header {
background: grey;
width: 100%;
margin: 0 auto;
}
a {
text-decoration: none;
}
#logo a {
color: #063540;
}
#logo {
float: left;
padding-left: 8%;
color: #063540;
margin-top: 20px;
}
.navbar {
float: right;
top: 0px;
padding-right: 20%;
margin-top: 20px;
}
.navbar a {
padding-left: 25px;
color: #063540;
font-size: 14pt;
}
<p id="slogan">We are creative agency</p>
<div id="header">
<div id="logo"><h1>MyWebsite</h1></div>
<div class="navbar">
Home
About
Services
Projects
Pages
Blog
Contact
</div>
<br style="clear: both">
</div>
That is happening because the children from the header have float property, when an element has float property, they are actually not rendered as a block element
https://stackoverflow.com/a/16568504/2894798
That's why by default your header has height 0, so to fix it I would add a clear fix property,
* {
margin: 0 auto;
}
#slogan {
background: #063540;
color: white;
padding: 20px;
font-family: 'Open Sans', sans-serif;
font-size: small;
width: 100%;
padding-left: 8%;
}
#header {
background: grey;
width: 100%;
margin: 0 auto;
}
a {
text-decoration: none;
}
#logo a {
color: #063540;
}
#logo {
float: left;
padding-left: 8%;
color: #063540;
margin-top: 20px;
}
.navbar {
float: right;
top: 0px;
padding-right: 20%;
margin-top: 20px;
}
.navbar a {
padding-left: 25px;
color: #063540;
font-size: 14pt;
}
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<title>MyWebsite</title>
</head>
<body>
<p id="slogan">We are creative agency</p>
<div id="header">
<div id="logo"><h1>MyWebsite</h1></div>
<div class="navbar">
Home
About
Services
Projects
Pages
Blog
Contact
</div>
<div style="clear:both;">
</div>
</body>
</html>
I'm building a website for my DofE expedition but am having some trouble making things work properly. The text that is currently floating on the right of the main container should be sat next to the navigation section but ma attempts to make it do so have been thus far unsuccessful. Any ideas on this?
If it helps, i'd like it to look something like this : W3schools CSS Help Code
#charset "utf-8";
/* CSS Document */
* {
box-sizing: border-box;
}
body {
background-color: #EEE;
}
#header {
background-color: #66CCFF;
margin: auto;
text-align:center;
font-family: Helvetica;
}
#container {
background-color: white;
width: 800px;
margin-left: auto;
margin-right: auto;
font-family: Helvetica;
}
.main {
font-family: Helvetica;
width: 70%;
margin-left: auto;
float: right;
background-color:#f2f2f2;
clear: left;
display: inline;
/*margin: 1px;*/
}
#main2 {
width: 799px;
font-family: Helvetica;
width: 50%;
display: inline;
background-color:#f2f2f2;
/*margin: 1px;*/
}
#nav{
padding: 3px;
font-family: Helvetica;
list-style-type: none;
}
#nav li a:hover {
color: red;
}
#nav li {
text-decoration: none;
display: block;
padding: 5px;
margin: 5px;
margin-left: 0px;
background-color: #dddddd;
width: 25%;
}
#nav ul {
list-style-type: none;
margin: 0;
padding: 0;
fl
}
#content {
padding:10px;
}
#footer{
clear: both;
color: white;
background-color: grey;
text-align: right;
padding: 0.5px;
}
#footer-margin{
margin: 5px;
}
img {
/*margin-left: auto;
margin-right: auto;*/
text-align:center;
border-style: solid;
border-width: 1px;
border-color: black;
clear: right;
}
.clearfix::after {
content: "";
clear: both;
display: table;
}
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>DofE:Expedition Aim</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id = "container"><!--start container-->
<div id = "header">
<h1>DofE Expedition Aim</h1>
</div>
<div id = "content">
<div id = "nav"><!-- start nav tag -->
<ul>
<li>Home</li>
<li>Our Aim</li>
<li>How we acheived it</li>
<li>Extra info (tbd)</li>
</ul>
</div><!-- nav close tag -->
<div class = "clearfix">
<div class = "main">
<p>This page shows what happened on out DofE expedition and the things that we did when not on expedition.</p>
<p>This includes doing map work, fitness and orginising and running events localy.</p>
<p>On the following pages, you can find the various evidence to show you what we did and how it benefited us. (or didn't)</p>
</div><!-- "main" end tag -->
<!--<div id = "main2">
<p>This is a test of a second column that should float to the right of the other.</p>
</div>-->
</div>
<!-- <div id = "img.1">
<img src="logo.jpg" alt="DofE Logo goes here" height="100" width="73">
</div>-->
</div>
<div id = "footer">
<div id = "footer-margin">
<p>Copyright © Dom Brown 2017</p>
</div>
</div>
</div>
</body>
</html>
You'll need to play with the padding and such, but this will get the nav and main content side by side. Basically you had your clearfix container wrapping around just the nav, which was full width. Also I applied float: left; to both nav and main.
#charset "utf-8";
/* CSS Document */
* {
box-sizing: border-box;
}
body {
background-color: #EEE;
}
#header {
background-color: #66CCFF;
margin: auto;
text-align:center;
font-family: Helvetica;
}
#container {
background-color: white;
width: 800px;
margin-left: auto;
margin-right: auto;
font-family: Helvetica;
}
.main {
font-family: Helvetica;
width: 70%;
margin-left: auto;
float: left;
background-color:#f2f2f2;
display: inline;
/*margin: 1px;*/
}
#main2 {
width: 799px;
font-family: Helvetica;
width: 50%;
display: inline;
background-color:#f2f2f2;
/*margin: 1px;*/
}
#nav{
padding: 3px;
font-family: Helvetica;
list-style-type: none;
width: 25%;
float: left;
}
#nav li a:hover {
color: red;
}
#nav li {
text-decoration: none;
display: block;
padding: 5px;
margin: 5px;
margin-left: 0px;
background-color: #dddddd;
}
#nav ul {
list-style-type: none;
margin: 0;
padding: 0;
}
#content {
padding:10px;
}
#footer{
clear: both;
color: white;
background-color: grey;
text-align: right;
padding: 0.5px;
}
#footer-margin{
margin: 5px;
}
img {
/*margin-left: auto;
margin-right: auto;*/
text-align:center;
border-style: solid;
border-width: 1px;
border-color: black;
clear: right;
}
.clearfix::after {
content: "";
clear: both;
display: table;
}
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>DofE:Expedition Aim</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id = "container"><!--start container-->
<div id = "header">
<h1>DofE Expedition Aim</h1>
</div>
<div id = "content" class="clearfix">
<div id = "nav"><!-- start nav tag -->
<ul>
<li>Home</li>
<li>Our Aim</li>
<li>How we acheived it</li>
<li>Extra info (tbd)</li>
</ul>
</div><!-- nav close tag -->
<div class = "main">
<p>This page shows what happened on out DofE expedition and the things that we did when not on expedition.</p>
<p>This includes doing map work, fitness and orginising and running events localy.</p>
<p>On the following pages, you can find the various evidence to show you what we did and how it benefited us. (or didn't)</p>
</div><!-- "main" end tag -->
<!--<div id = "main2">
<p>This is a test of a second column that should float to the right of the other.</p>
</div>-->
<!-- <div id = "img.1">
<img src="logo.jpg" alt="DofE Logo goes here" height="100" width="73">
</div>-->
</div>
<div id = "footer">
<div id = "footer-margin">
<p>Copyright © Dom Brown 2017</p>
</div>
</div>
</div>
</body>
</html>
Set your css like this
#nav{
padding: 3px;
font-family: Helvetica;
list-style-type: none;
position: absolute;
width: 100%;
}
I'm new to web dev and need some help figuring out this simple issue. The menu items move below the name when resized, can some tell me where I messed up?
I've been reading some other solutions and get the idea but just can't find my error.
>
<!doctype html>
<html>
<head>
<title>About</title>
<meta charset="utf-8" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style type="text/css">
* {
font-family: Lucida Sans Unicode, Lucida Grande, sans-serif;
}
body {
background-color: #FAFAFA;
color: #2E2E2E;
}
#topmenu {
float: right;
padding-top: 10px;
position: relative;
}
#topmenu ul {
list-style:none;
width: auto;
}
#topmenu li {
float:left;
padding: 5px 10px 0px 20px;
margin-right: 20px;
border-right: 1px solid #47008F;
text-decoration: underline;
}
a:hover {
font-size: 20px;
}
a:link {
color: #47008F;
}
#name {
margin-bottom: 10px;
padding-left: 20px;
color: #47008F;
display:inline-block;
}
#topcontainer {
width: 100%;
background-color: #A4A4A4;
height: 60px;
margin-bottom: 5px;
font-family: Lucida Grande;
margin-right: 50px;
border-radius: 25px;
float: left;
}
#break {
background-color:#47008F;
height: 1px;
margin-bottom:5px;
clear: both;
}
#midcontainer {
clear:both
padding-left: 50px
}
#midcontainer img {
position: relative;
height:300px;
padding: 20px 200px 50px 200px;
float: left;
padding-right:50px;
}
#bio {
padding-top: 75px;
position: relative;
}
</style>
</head>
<body>
<div id="topcontainer">
<h1 id="name">Robert</h1>
<div id="topmenu">
<ul>
<li>About</li>
<li>Resume</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</div>
</div>
<div id="break"></div>
</div>
<div id="midcontainer">
<img src="images/me.jpg"/>
<div id="bio">
<p>
<h3> Text goes here.............</h3>
<p>
something
</p>
</p>
</div>
</div>
</body>
</html>
I have commented the "height" of top container, and removed an unwanted closing div tag. It works in Chrome.
<!doctype html>
<html>
<head>
<title>About</title>
<meta charset="utf-8" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style type="text/css">
* {
font-family: Lucida Sans Unicode, Lucida Grande, sans-serif;
}
body {
background-color: #FAFAFA;
color: #2E2E2E;
}
#topmenu {
float: right;
padding-top: 10px;
position: relative;
}
#topmenu ul {
list-style:none;
width: auto;
}
#topmenu li {
float:left;
padding: 5px 10px 0px 20px;
margin-right: 20px;
border-right: 1px solid #47008F;
text-decoration: underline;
}
a:hover {
font-size: 20px;
}
a:link {
color: #47008F;
}
#name {
margin-bottom: 10px;
padding-left: 20px;
color: #47008F;
display:inline-block;
}
#topcontainer {
width: 100%;
background-color: #A4A4A4;
/*height: 60px;*/
margin-bottom: 5px;
font-family: Lucida Grande;
margin-right: 50px;
border-radius: 25px;
float: left;
}
#break {
background-color:#47008F;
height: 1px;
margin-bottom:5px;
clear: both;
}
#midcontainer {
clear:both
padding-left: 50px
}
#midcontainer img {
position: relative;
height:300px;
padding: 20px 200px 50px 200px;
float: left;
padding-right:50px;
}
#bio {
padding-top: 75px;
position: relative;
}
</style>
</head>
<body>
<div id="topcontainer">
<h1 id="name">Robert</h1>
<div id="topmenu">
<ul>
<li>About</li>
<li>Resume</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</div>
<div id="break"></div>
</div>
<div id="midcontainer">
<img src="images/me.jpg" />
<div id="bio">
<p>
<h3>Text goes here.............</h3>
<p>
something
</p>
</p>
</div>
</div>
</body>
</html>
I needed to add another div wrapping all my html and set the margins to auto and a width of 960px. Solved!
I need some help with my styling. I'm trying to get a nice looking website, but I just can't seem to do it. I've tried floats, but to no avail. I want to to have the look of the 'Aspen Development' as the brand name, and then have my buttons on the right side of the div. Here's my 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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Aspen Development | Home</title>
<link href="stylesheet.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<div id="navMenu">
<div id="header">
<div id="brand">Aspen Development</div>
<ul>
<li class="navButton">Home</li>
<li class="navButton">Pricing</li>
<li class="navButton">Contact Us</li>
</ul>
</div>
</div>
<div id="content">
<div id="contentContainer">
<p><b>4.21.14</b> Welcome to Aspen Development.</p>
<p><b>4.19.14</b> The website has been created!</p>
</div>
</div>
<div id="footer">
<center><p style="margin-top: 17px; margin-bottom: 20px; font-size: 0.75em; ">Copyright © 2014 Aspen Development | All Rights Reserved</p></center>
</div>
</div>
</body>
</html>
My CSS:
#charset "utf-8";
body, h1, h2, h3, h4, h5, h6, p, div {
margin: 0;
padding: 0;
}
body {
font-family: Arial, Helvetica, sans-serif;
background-color: #FFF;
}
#navMenu, #footer {
width: 100%;
height: 50px;
background-color: #F8F8F8;
border: 2px solid #E6E6E6;
}
#header {
width: 1140px;
height: 50px;
margin: 0 auto;
text-align: right;
}
#brand a {
display: block;
width: 175px;
padding-top: 12px;
padding-bottom: 16px;
padding-left: 14px;
padding-right: 14px;
color: black;
font-size: 1.25em;
text-align: justify;
text-decoration: none;
}
.navButton {
display: block;
width: 175px;
padding-top: 12px;
padding-bottom: 16px;
padding-left: 14px;
padding-right: 14px;
color: black;
font-size: 0.75em;
text-align: justify;
list-style: none;
}
#content {
width: 100%;
}
#contentContainer {
width: 1140px;
margin: 0 auto;
}
#contentContainer p {
margin: 20px;
}
Thanks in advance. :)
Add this CSS classes :
ul{
float:right;
}
#brand {
float:left;
}
Add to .navButton:
display: inline-block;
And add to #header :
overflow:hidden;
Also replace :
width: 1140px;
with
min-width: 1140px;
width: 100%;
in #navMenu, #footer and #header.
Check Fiddle
why don't you easily use float: left and float: right as long as you have given height to your header.
#brand{
float: left;
}
.navButton {
float: right;
}
Its an easy problem. You messed up the css bad. Here is the link and to the changed css and HTML.
Hope it helps... i have updated the css using element id try not to do that, always use classes for css unless you have a really good reason not to.
I've created a fiddle to help you fix the issue.
Use float: left in .navButton class and add clearfix class to the ul containing the .navButton elements. the style definition for the clearfix class is also written in the fiddle. Please try and let us know.
I'd like to have the white background cover content of the page but for some reason it only ends at the navigation menu/#main_content_top. How can I fix this?
HTML Look/Image:
http://img687.imageshack.us/img687/8461/croppercapture12.th.jpg
HTML Code:
<!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>Untitled Page</title>
<link href="StyleSheet.css" rel="stylesheet" type="text/css" />
<style type="text/css">
#Text1
{
width: 77px;
}
#Text2
{
width: 78px;
}
body {
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<div id="container">
<div id="header"><h1>
<img alt="" src="images/tempBanner.jpg" style="width: 747px; height: 75px" /></h1></div>
<div id="sub_header">Facility Booking Registration</div>
<div id="main_content_top">Home | Book a Facility | <a href ="FindBooking.htm" >Find/Delete a
booking</a></div>
<div id="main_content">
<div class="content">
<p class="title">Public Service Announcements</p>
<h2>Vesak Day</h2>
<p>Vesak Day, a public holiday, will fall on 1/5/2011, please note the school will
be closed and no bookings will be allowed on this day.</p>
<h2>Labour Day</h2>
<p>Labour Day, a public holiday, will fall on 1/5/2011, please note the school will
be closed and no bookings will be allowed on this day.</p>
</div>
<div class="menu">
<div class="menu_title">Login</div>
<div>Username:
<input id="Text1" type="text" />
<br />
Password:
<input id="Text2" type="text" />
<br />
<br />
<input id="Button1" type="button" value="Sign In" />
</div>
</div>
</div>
<div id="clear"></div>
</div>
</body>
CSS style sheet:
body {
background: #CACACA url(images/background.png) repeat-x;
font-family: "Trebuchet MS", Verdana, serif, Arial
}
#container {
margin: 0 auto;
width: 750px
}
#header {
width: 100%;
height: 33px;
}
#sub_header {
text-align: right;
font-weight: bold;
font-size: 20px;
color: #FFFFFF;
padding-right: 20px;
padding-bottom: 20px;
}
#main_content {
margin: 0 auto;
width: 100%;
background: #FFFFFF url('images/background_content.gif');
background-repeat: repeat-y;
}
#main_content_top {
height: 30px;
background: #FFFFFF url('images/background_top.gif');
}
#main_content_bottom {
height: 30px;
background: #FFFFFF url('images/background_bottom.gif');
}
.content {
float: left;
width: 510px;
text-align: justify;
padding: 0 30px 0 30px;
font-size: 14px
}
.menu {
width: 139px;
float: right;
padding: 0 20px 0 20px;
border-left: #8C8484 1px solid;
font-size: 12px
}
.menu ul {
margin: 0;
padding: 10px 0 10px 15px
}
.menu il {
list-style-type: disc
}
#header h1 {
margin-bottom: 0px;
font-size: 28px;
font-weight: bold;
color: #A40008
}
.content h2 {
margin-top: 0px;
font-size: 20px;
font-weight: bold;
color: #A40008
}
.menu_title {
font-size: 18px;
font-weight: bold
}
#clear {
display: block;
clear: both;
width: 100%;
height:1px;
overflow:hidden;
}
a {
color: #A40008;
font-weight: bold;
text-decoration: none
}
a:hover {
color: #A40008;
font-weight: bold;
text-decoration: underline
}
.title {
margin: 20px;
text-align: center;
font-weight: bold;
font-style: italic;
height: 18px;
}
.highlight
{
font-weight:bold
}
.update
{
font-weight:bold;
color:Green
}
.confirm
{
font-weight:bold;
color:Red
}
table
{
border-style : dashed
}
Try adding overflow:auto to #main_content.
If i understand correctly, you want to set the background of the body white? If that is your requirement, within the body CSS, remove or comment out the background style.
You have to make it overflow hidden or float left and width..........