I've only been practicing HTML and CSS for a little over a year. I obviously have a lot to learn. When I started the re-design of my site, I used an available template. I've changed nearly everything except the sidebar. It has the sidebar on the left, and I want it on the right, because I figure it'll look nicer. I've changed the float from left to right for the sidebar. I've changed the float from right to left for the content. This just causes a lot of problems that I can't explain, and I don't know how to fix it. I've toyed with a lot of the css. Please help me understand what I'm doing wrong, and what I'm not thinking of changing that needs to be changed. I've played with this on a fiddle, and here it is with my changes (as you can see, I didn't get anywhere): The Fiddle
Here's my original:
HTML
<body>
<div id="wrapper">
<div id="header">
<!-- end div#logo -->
<div id="menu">
<ul style="
overflow: hidden;
width: 892px;
/* text-align: center; */
margin: 0 auto;
">
<li id="logo"></li>
<li>Home</li>
<li>Games</li>
</ul>
</div>
<!-- end div#menu -->
</div>
<!-- end div#header -->
<div id="page">
<div id="page-bgtop">
<div id="content">
<!-- InstanceBeginEditable name="Page Content" --><div class="post">
<h2 class="title">New Site Update!</h2>
<p class="byline">Posted by Nicholas Maguire</p>
<div class="entry">
<p> This is the editable area.</p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</div>
</div><!-- InstanceEndEditable -->
</div>
<!-- end div#content -->
<div id="sidebar">
<ul>
<li id="search">
<h2>Search</h2>
<form method="get" action="">
<fieldset>
<input type="text" id="seach-text" name="s" value="" />
<input type="submit" id="search-submit" value="Search" />
</fieldset>
</form>
</li>
<li>
<h2>Newest Games</h2>
<ul>
<li>ATV Destoyer</li>
<li>Army Driver</li>
<li>Arkanoid</li>
<li>Amazing Football</li>
<li>Alien Vs Predator</li>
<li>Airport Madness</li>
<li>Age of War</li>
</ul>
</li>
<li>
<h2>Contact Me</h2>
<ul>
<li>Contact Form</li>
<li>Requests</li>
</ul>
</li>
</ul>
</div>
<!-- end div#sidebar -->
<div style="clear: both; height: 1px"></div>
</div>
</div>
<!-- end div#page -->
</div>
<!-- end div#wrapper -->
<div id="footer">
<p id="legal">Copyright © 2014 Crazy Block. All Rights Reserved. </p>
<p id="links">Privacy Policy | Terms of Use</p>
</div>
<!-- end div#footer -->
</body>
CSS
{
margin: 0;
padding: 0;
}
body {
background: #E9E9E9;
text-align: justify;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
color: #757E82;
margin: 0;
}
h1, h2, h3 {
color: #AA2808;
}
h1 {
}
h2 {
}
h3 {
}
p, blockquote, ul, ol {
margin-bottom: 20px;
line-height: 2em;
}
p {
}
blockquote {
}
ul, ol, li {
margin: 0px;
padding: 0px;
list-style: none;
}
a {
text-decoration: underline;
color: #1692ef;
}
a:hover {
text-decoration: none;
color: #165bef;
}
/* Wrapper */
#wrapper {
}
/* Header */
#header{
width: 100%;
height: 91px;
margin: 0;
top: 0;
}
/* Logo */
#logo {
float: left;
width: 270px;
height: 76px;
margin: 0px;
padding: 15px 0px 0px;
margin-left: 27%;
}
#logo h1 {
margin: 0;
padding: 0;
font: normal 36px Georgia, "Times New Roman", Times, serif;
}
#logo h2 {
margin: -2px 0 0 0;
padding: 0;
text-transform: uppercase;
letter-spacing: 2px;
font-size: 10px;
font-weight: bold;
color: #444444;
}
#logo h2 a {
color: #9AA9B1;
}
#logo a {
text-decoration: none;
color: #165bef;
}
/* Menu */
#menu {
float: right;
width: 100%;
height: 54px;
margin-top: 0;
background: #ffffff url("/images/menu_bar.jpg") repeat-x left top;
position:fixed;
}
#menu ul {
overflow: hidden;
width: 892px;
margin: 0 auto;
padding: 0 30px;
list-style: none;
line-height: normal;
}
#menu li {
display: inline;
text-align: center;
}
#menu a {
display: block;
float: left;
height: 36px;
padding: 18px 20px 0px 20px;
text-decoration: none;
text-align: center;
text-transform: uppercase;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: bold;
color: #ffffff;
}
li#logo {
height: 52px;
width: 52px;
background: url('/images/cb_logo.png') no-repeat;
margin-top: 1px;
margin-right: 1px;
margin-left: 1px;
}
#menu a:hover, #menu .active a {
background: #1687ef;
color: #FFFFFF;
}
/* Search */
#search {
height: 45px;
padding: 0px 0px 40px 0px;
}
#search form {
margin: 0;
padding: 12px 0px 0 0;
}
#search fieldset {
margin: 0;
padding: 0;
border: none;
}
#search input {
float: left;
font: 12px Georgia, "Times New Roman", Times, serif;
}
#search-text {
width: 120px;
height: 18px;
padding: 3px 0 0 5px;
border: 1px solid #000000;
color: #000000;
}
#search-submit {
height: 21px;
margin-left: 10px;
padding: 0px 2px;
border: none;
background: #000000;
color: #FFFFFF;
}
/* Page */
#page {
width: 892px;
margin: 0 auto;
}
#page-bgtop {
padding: 0px 30px;
}
/* Content */
#content {
float: right;
width: 564px;
padding-top: 30px;
}
.post {
margin: 0px 0px 30px 0px;
}
.post .title {
margin: 0px;
padding: 0px 0px 5px 0px;
color: #1f201d;
}
.post .title a {
padding: 4px 35px 4px 15px;
background-color: #1535EF;
text-decoration: none;
font-weight: normal;
color: #FFFFFF;
}
.post .entry {
}
.post img {
float: left;
padding: 15px 0px;
}
.post .meta {
text-align: right;
padding-top: 20px;
border-bottom: 1px solid #E5E5E5;
font-weight: bold;
color: #202020;
}
.post .byline {
float: right;
margin-top: -30px;
font-size: 12px;
color: #5E5E5E;
}
/* Sidebar */
#sidebar {
float: left;
width: 208px;
padding-top: 30px;
background-color:#D2D2D2;
margin-left:initial;
position: fixed;
}
#sidebar ul {
margin: 0;
padding: 10px;
list-style: none;
line-height: normal;
}
#sidebar li {
margin-bottom: 1px;
}
#sidebar li ul {
margin: 0px;
padding: 0px 0px 40px 0px;
}
#sidebar li li {
margin: 0;
padding: 9px 0px;
border: none;
background: url(images/img07.jpg) repeat-x left bottom;
}
#sidebar h2 {
margin: 0px;
padding: 0px;
border-bottom: 2px solid #EBEBEB;
font-size: 160%;
font-weight: normal;
color: #454E55;
}
#sidebar h3 {
font-size: 77%;
color: #454E55;
}
#sidebar p {
margin: 0;
line-height: normal;
color: #0038ff;
}
#sidebar a {
border: none;
text-decoration: none;
}
#sidebar a:hover {
text-decoration: underline;
}
/* Submenu */
#submenu {
}
/* News */
#news {
}
#news a {
font-size: 85%;
}
Try this,
#sidebar {
float: left;
width: 208px;
padding-top: 30px;
background-color:#D2D2D2;
margin-left:initial;
/*position: fixed;*/ //remove it
}
#content {
float: left; // change right to left
width: 564px;
padding-top: 30px;
}
Fiddle
When you used Position attribute in css float attribute won't work. So instead of float used right:0; see below code.
#sidebar {
/* float: left;*/
width: 208px;
padding-top: 30px;
background-color:#D2D2D2;
margin-left:initial;
position: fixed;
right:0;
}
#content {
float: left;
width: 564px;
padding-top: 30px;
}
And provide 100% width to inside (p, h2, div) so they wrap inside the #content div.
Related
I'm designing a tv show page for my web design class I'm taking.
I added tabs to my web page to be used as top menu following a tutorial, but now I'm not sure how to center the tabs even using the center tag.
body {
font: 0.8em arial, helvetica, sans-serif;
}
#header ul {
list-style: none;
padding: 0;
margin: 0;
}
#header li {
float: right;
border: 1px solid #bbb;
border-bottom-width: 0;
margin: 0;
padding: 0;
}
#header a {
text-decoration: none;
display: block;
background: #eee;
padding: 0.24em 1em;
color: #00c;
width: 8em;
text-align: center;
}
#header a:hover {
background: #ddf;
}
#header #selected {
border-color: black;
}
#header #selected a {
position: relative;
top: 1px;
background: white;
color: black;
font-weight: bold;
}
#content {
border: 1px solid black;
clear: both;
padding: 0 1em;
}
h1 {
margin: 0;
padding: 0 0 1em 0;
}
<div id="header">
<center>
<ul>
<li style="font-family: DFKai-SB;">Home
</li>
<li style="font-family: DFKai-SB;">Shows
</li>
<li style="font-family: DFKai-SB;">Classic
</li>
<li style="font-family: DFKai-SB;">More
</li>
</ul>
</center>
</div>
<div id="content">
</div>
add this div with class .centeer to your tabs instead of <center> :
.centeer {
display: table;
margin: 0px auto 0px auto;
}
Live Demo
The float has more priority so that's why your content floats to one side instead of align. In your css at li elements use some inline variant to avoid stacking.
body {
font: 0.8em arial, helvetica, sans-serif;
}
#header ul {
list-style: none;
padding: 0;
margin: 0;
}
#header li {
display: inline-flex;
border: 1px solid #bbb;
border-bottom-width: 0;
margin: 0;
padding: 0;
}
#header a {
text-decoration: none;
background: #eee;
padding: 0.24em 1em;
color: #00c;
width: 8em;
text-align: center;
}
#header a:hover {
background: #ddf;
}
#header #selected {
border-color: black;
}
#header #selected a {
position: relative;
top: 1px;
background: white;
color: black;
font-weight: bold;
}
#content {
border: 1px solid black;
clear: both;
padding: 0 1em;
}
h1 {
margin: 0;
padding: 0 0 1em 0;
}
<div id="header">
<center>
<ul>
<li style="font-family: DFKai-SB;">Home
</li>
<li style="font-family: DFKai-SB;">Shows
</li>
<li style="font-family: DFKai-SB;">Classic
</li>
<li style="font-family: DFKai-SB;">More
</li>
</ul>
</center>
</div>
<div id="content">
</div>
I want to achieve this:
I have achieved this:
Why are the margins set on #members-content-box not working correctly? The page is live at http://goo.gl/e7yiAf
<section id="members-content">
<div id="members-menu">
<ul>
<li>My Items</li>
<li>Submit Items</li>
<li>Account Settings</li>
</ul>
<div id="menu-line">
</div>
</div>
<div id="members-content-box">
hello
<br /><br /><br />
</div>
</section>
My CSS:
/* members menu*/
#members-content { width: 100%; margin: 0 auto;}
#members-menu { width: 100%; text-align: left; margin-bottom: 30px;}
#members-menu ul { list-style: none;}
#members-menu li { background-color: #FFF; width: 127px; height: 25px; text-align: center; float: left; margin-right: 7px; padding-top: 8px}
#members-menu li a { font-family: Verdana, Geneva, sans-serif; font-size: 12px; font-weight: normal; color: #2e2e2e; text-decoration: none;}
#members-menu li a:hover { color: #ffbe00;}
#members-menu li a:active { color: #ffbe00;}
#menu-line { height: 5px; background-color: #FFF; float:left; min-width: 100%; margin-left:0 40px 0 40px;}
/* members-content-box */
#members-content-box { background-color:#FFF; padding: 35px; float: left; width:100%; border: 1px solid grey;}
Use margin instead of padding - padding will just enlarge the div from inside including its background
#members-content-box { background-color:#FFF; margin: 35px; float: left; width:100%; border: 1px solid grey;}
To Achieve the above one put the padding-bottom for members-menu ul
#members-menu{
padding-bottom:30px;
}
And change members-content-box css like this
#members-content-box {
background-color: #FFF;
padding: 35px;
float: left;
width: 90%;
border: 1px solid grey;
margin-left:30px;
}
I think this one helpful to you.
So i have a simple website.
Where a have an header, then a site_content, that contains the div content and sidebar, and then a sticky footer.
here is my code:
Html:
<!DOCTYPE HTML>
<html>
<head>
<title>Turismo Murtoseiro</title>
<meta http-equiv="content-type" content="text/html; charset=windows-1252" />
<link rel="stylesheet" type="text/css" href="style.css" title="style" />
</head>
<body>
<div class="wrapper">
<div id="header">
<div id="logo"></div>
<div id="menubar">
<ul id="menu">
<!-- put class="selected" in the li tag for the selected page - to highlight which page you're on -->
<li class="selected">Home</li>
<li>Cafés</li>
<li>Restaurantes</li>
<li>Hotéis</li>
<li>Pensões</li>
<li>Contacto</li>
</ul>
</div>
</div>
<div id="site_content">
<div id="sidebar">
<!-- insert your sidebar items here -->
trujytkyukliyluilouiluiol </div>
<div id="content">
<!-- insert the page content here -->
<h1>Pedro Fidalgo - freelancer</h1>
<div>
<p> O meu nome é Pedro Fidalgo, e estudo na área de Multimédia, na escola Padre António Morais da Fonseca, na Murtosa.</p>
</div>
</div>
</div>
<div class="push"></div>
</div>
<div id="footer" class="footer">
Copyright © Pedro Fidalgo 2011</div>
</body>
</html>
CSS:
* {margin:0;
padding:0;
}
html, body {height: 100%;
font: normal .80em 'trebuchet ms', arial, sans-serif;
}
p
{
padding: 0 0 20px 0;
line-height: 1.7em;
color: #666;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
background: #F0EFE2;
margin: 0 auto -30px; /* the bottom margin is the negative value of the footer's height */
}
.footer, .push {
height: 30px; /* .push must be the same height as .footer */
clear: both;
}
h1, h2, h3, h4, h5, h6
{ font: normal 175% 'century gothic', arial, sans-serif;
color: #43423F;
margin: 0 0 15px 0;
padding: 15px 0 5px 0;}
a, a:hover
{ outline: none;
text-decoration: underline;
color: #A4AA04;}
a:hover
{ text-decoration: none;}
.left
{ float: left;
width: auto;
margin-right: 10px;}
.right
{ float: right;
width: auto;
margin-left: 10px;}
.center
{ display: block;
text-align: center;
margin: 20px auto;}
blockquote
{ margin: 20px 0;
padding: 10px 20px 0 20px;
border: 1px solid #E5E5DB;
background: #FFF;}
ul
{ padding: 2px 0 22px 17px;}
ul li
{ list-style-type: circle;
padding: 0 0 4px 5px;}
ol
{ padding: 8px 0 22px 20px;}
ol li
{ padding: 0 0 11px 0;}
#logo, #menubar
{
margin-left: auto;
margin-right: auto;
}
#header
{
height: 150px;
background-color: #708B1A;
}
#logo
{
width: 877px;
position: relative;
height: 100px;
background-color: #003;
background-image: url(images/logo.png);
background-repeat: no-repeat;
}
#menubar
{ width: 877px;
height: 50px;
padding: 0;
background: #29415D url(images/menu.png) repeat-x;}
ul#menu, ul#menu li
{ float: left;
margin: 0;
padding: 0;}
ul#menu li
{ list-style: none;}
ul#menu li a
{ letter-spacing: 0.1em;
font: normal 100% 'lucida sans unicode', arial, sans-serif;
display: block;
float: left;
height: 24px;
padding: 20px 26px 6px 26px;
text-align: center;
color: #FFF;
text-transform: uppercase;
text-decoration: none;
background: transparent;}
ul#menu li a:hover, ul#menu li.selected a, ul#menu li.selected a:hover
{ color: #FFF;
background: #1C2C3E url(images/menu_select.png) repeat-x;}
#site_content
{ width: 837px;
overflow: hidden;
color #000;
height: 100%;
margin: 0 auto 0 auto;
padding: 20px 24px 20px 37px;
background: #FFF url(images/content.png) repeat-y;}
#content
{ text-align: left;
width: 595px;
min-height: 100%;
}
#sidebar
{
float: right;
width: 200px;
padding-top: 0;
padding-right: 15px;
padding-bottom: 30px;
padding-left: 15px;
}
#footer
{ width: 878px;
font: normal 100% 'lucida sans unicode', arial, sans-serif;
height: 30px;
text-align: center;
margin: 0 auto 0 auto;
background: #29425E url(images/footer.png) repeat-x;
color: #FFF;
}
And i cant put my site_content (with content and sidebar) at 100%.. what am i missing?
Remove all your specified width such as width: 878px;, width: 837px;, width: 877px;... and you'll make it render as 100% width.
Demo
I have a .page <div> that surrounds all of the content inside. When the content stretches, so does the .page <div>.
My main issue is that the .leftBannerBackground <div> does not extend with the .page <div>.
Is there anything I can do to make the height of the .leftBannerBackground <div> extend with the .page <div>?
Short version of HTML:
<div class="page">
<div class="header">
<div class="top_banner">
</div>
<div class="title">
<h1 class="siteColor centeredText">
Header </h1>
</div>
</div>
<div class="leftBanner">
</div>
<div class="leftBannerBackground">
</div>
<div class="main">
<!-- Content goes here -->
<div class="leftSide">
</div>
<div class="rightSide" style="margin-top: 35px;"></div>
</div>
<div class="bottomFiller"></div>
<div class="footer">
</div>
</div>
CSS:
/* DEFAULTS
----------------------------------------------------------*/
body
{
background: #ffffff;
font-size: .80em;
font-family: "Helvetica Neue", "Lucida Grande", "Segoe UI", Arial, Helvetica, Verdana, sans-serif;
/*margin: 0px;*/
text-align:justify;
padding: 0px;
color: #000000;
/*height: auto !important;
height: 100%;
min-height: 100%;*/
}
p
{
margin-bottom: 10px;
line-height: 1.2em;
}
/* HEADINGS
----------------------------------------------------------*/
h1, h2, h3, h4, h5, h6
{
font-size: 1.5em;
color: #666666;
font-variant: small-caps;
text-transform: none;
font-weight: 200;
margin-bottom: 0px;
}
h1
{
font-size: 1.6em;
padding-bottom: 0px;
margin-bottom: 0px;
}
h2
{
font-size: 1.5em;
font-weight: 600;
}
h3
{
font-size: 1.2em;
}
h4
{
font-size: 1.1em;
}
h5, h6
{
font-size: 1em;
}
/* this rule styles <h1> and <h2> tags that are the
first child of the left and right table columns */
.rightColumn > h1, .rightColumn > h2, .leftColumn > h1, .leftColumn > h2
{
margin-top: 0px;
}
/* PRIMARY LAYOUT ELEMENTS
----------------------------------------------------------*/
.page
{
width: 960px;
background-color: #fff;
/* margin: 20px auto 0px auto;*/
border: 1px solid #496077;
position: absolute;
top: 20px;
left: 50%;
margin-left: -480px;
}
.header
{
position: relative;
margin: 0px;
padding: 0px;
background: #FFFFFF;
width: 100%;
}
.header h1
{
font-weight: 700;
margin: 0px;
padding: 0px 0px 0px 20px;
color: #f9f9f9;
border: none;
line-height: 2em;
font-size: 2em;
}
.main
{
position:relative;
padding: 4px 12px 8px 6px;
margin: 220px 0px 0px 150px;
width: 790px;
min-height:390px;
top: 10px;
overflow: auto;
}
.bottomFiller
{
min-height: 0px;
}
.leftCol
{
padding: 6px 0px;
margin: 12px 8px 8px 8px;
width: 200px;
min-height: 200px;
}
.footer
{
position: relative;
color: #ffffff;
padding: 8px 0px 0px 0px;
margin: 0px auto;
text-align: center;
line-height: normal;
background-color: #9B0707;
min-height: 20px;
/*margin-bottom: 40px;*/
}
.partners
{
position: relative;
width: 126px;
height: 46px;
bottom: 20px;
z-index:6800;
}
/* TAB MENU
----------------------------------------------------------*/
div.hideSkiplink
{
width:100%;
}
div.menu
{
position: relative;
padding: 0px 0px 0px 16px;
margin-top: 275px;
margin-bottom: 0%;
height: 100%;
/*top: 200px;
margin: 275px 0px;*/
}
div.menu ul li a, div.menu ul li a:visited
{
color: #FCE756; /* text color */
font-size:medium;
display: block;
list-style: none;
line-height: 1.95em;
padding: 4px 5px;
text-decoration: none;
white-space: nowrap;
}
div.menu ul li a:hover
{
color: #ffffff;
text-decoration: none;
}
/* FORM ELEMENTS
----------------------------------------------------------*/
fieldset
{
margin: 1em 0px;
padding: 1em;
border: 1px solid #ccc;
}
fieldset p
{
margin: 2px 12px 10px 10px;
}
fieldset.login label, fieldset.register label, fieldset.changePassword label
{
display: block;
}
fieldset label.inline
{
display: inline;
}
legend
{
font-size: 1.1em;
font-weight: 600;
padding: 2px 4px 8px 4px;
}
input.textEntry
{
width: 320px;
border: 1px solid #ccc;
}
input.passwordEntry
{
width: 320px;
border: 1px solid #ccc;
}
div.accountInfo
{
width: 42%;
}
/* MISC
----------------------------------------------------------*/
.siteColor
{
color: #9B0707 !important;
}
.centeredText
{
text-align: center;
}
.clear
{
clear: both;
}
.leftBannerSpaceFiller
{
position: relative;
float:left;
background-color:#9B0707;
height: 100%;
width:132px;
}
.title
{
display: block;
float: right;
text-align: left;
right: 250px;
width: auto;
position: absolute;
margin-top: 8px;
}
.top_banner
{
background-image: url('../Images/topBanner.png');
top: 66px;
left:50px;
height: 164px;
width: 911px;
position: absolute;
z-index: 6900;
}
.leftSide {
float:left;
width:468px;
}
.leftSidecont {
float:left;
width:790px;
}
.leftSideteam {
float:left;
width:540px;
}
.leftSideliens {
float:left;
width:268px;
}
.rightSide {
float:right;
width:300px;
}
.rightSidecont {
position: absolute;
width:400px;
}
.rightSideteam {
float:right;
width:228px;
}
.rightSideliens {
float:right;
width:500px;
}
.leftBanner
{
background-image: url('../Images/leftBanner.png');
height: 592px;
width: 52px;
margin-top: 30px;
position: absolute;
z-index: 3600;
}
.leftBannerBackground
{
position:relative;
background-color: #9B0707; /* #a40a0a; */
width:132px;
z-index: 1600;
float:left;
height: 100%;
margin-bottom: 0%;
}
.loginDisplay
{
font-size: 1.1em;
display: block;
text-align: right;
padding: 10px;
color: White;
}
.bold
{
font-weight: bold;
}
You have two options:
Use absolute positioning on .leftBannerBackground and set top: 0px; and bottom: 0px;. Demo: http://jsfiddle.net/ZXLNk/
Use height: 100%; on .leftBannerBackground (as you are already). But in order to get that to work you need to set the height of all containing elements to 100% as well: .page, <body>, and <html>. Of course that also means you won't be able to use absolute positioning on .page. Demo: http://jsfiddle.net/gLzcK/
I am trying to get start a web site for fun but I am having issues with CSS styles and tags with aligning I have a container, horizontal nav, left Nav, right Nav, Header and footer.
They are all in the container element but I can not align them properly. The header and norz nav are fine and so are the footers. The problem I am having is that the left body and right do not align properly can any one help. below is the coding for the HTML
<body>
<div id="container">
<div id="header">
</div>
<div id="horizontalnav">
<div class="navlinks ">
<ul>
<li>Facebook</li>
<li>Gaia</li>
<li>Roblox</li>
<li>Adventure Quest</li>
<li>Anime Freak</li>
<li>Youtube</li>
</ul>
</div>
</div>
<div id="leftnav">
<p>Left Nav </p>
</div>
<div id="body">
</div>
<div id="rightnav">
<p>right Nav </p>
</div>
<div id="footer">
this is the footer
</div>
</div>
</body>
and now for the css yes i use the one off of 2createawebsite.com and try to manipulate it
#container {
width: 100%;
}
#header {
width: 89%;
height: 15%;
position: relative;
background-image: url(Header.jpg);
border-bottom: 2px solid #000000;
}
#header a {
color: #ffffff;
text-decoration: underline;
font-weight: bold;
font-family: Verdana;
font-size: 14px;
}
#header a:visited {
color: #000000;
text-decoration: underline;
font-weight: bold;
}
#header a:hover {
color: #cc0000;
text-decoration: none;
font-weight: bold;
}
#horizontalnav {
width: 89%;
height: 30px;
position: relative;
background-color: #F2D6AF;
border-bottom: 2px solid #000000;
}
.navlinks {
position: absolute; top: 4px; left:240px;
}
.navlinks ul {
margin: auto;
}
.navlinks li {
margin: 0px 18px 0px 0px;
list-style-type: none;
display: inline;
}
.navlinks li a {
color: #000000;
padding: 5px 12px 7px;
text-decoration: none;
font-size: 16px;
font-family: Verdana;}
.navlinks li a:hover{
color: #ffffff;
background-image: url(Header.jpg);
text-decoration: underline;
}
#header p {
color: #000000;
font-family: Arial;
font-weight: bold;
}
.smalltext {
font-size: 9px;
font-family: Arial;}
#leftnav {
float: left;
width: 10%;
height: 70%;
background-color: #F8AA3C;
border-right: 1px dashed #694717;}
#rightnav {
float: right;
width: 10%;
height: 70%;
background-color: #F8AA3C;
border-left: 1px dashed #694717;}
#body {
margin-left :0px ;
width : 50% ;
padding: 0px 0px 0px 0px;
}
#body p {
word-wrap : true ;
font-family : courier new ;
}
#footer {
clear: both;
background-color: #D1C0A7;
}
If you change #header and #horizontalnav to 100% this makes everything expand to the width of the page; I assume this is what you wanted to accomplish
#header {
/* existing code */
width: 100%;
}
#horizontalnav {
/* existing code */
width: 100%;
}
As for the left column, body column and right column, these can be set to inline-block (float is not needed then) and their widths can be set to 10%, 80%, 10% respectively. In general this should fix the layout.