...

View Full Version : Side bar on the right instead of the left?



flyingdutch16
12-15-2009, 11:18 PM
Hi,

I was working on a website, and when i loaded it in FireFox,Safari, and Internet Explorer. the side bar is on the right instead of the left and the text is all the way on the bottum?

Do you guys now how i can fix that?

Thanks
thats my .CSS

/*
Design by Free CSS Templates
http://www.freecsstemplates.org
Released for free under a Creative Commons Attribution 2.5 License
*/

body {
margin-top: 10px;
padding: 0;
background: #787878 url(images/img01.jpg) repeat left top;
text-align: justify;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 12px;
color: #616161;
}

h1, h2, h3 {
margin-top: 0;
text-transform: uppercase;
color: #528DC8;
}

h1 {
font-size: 1.6em;
font-weight: normal;
}

h2 {
font-size: 1.6em;
}

h3 {
font-size: 1em;
}

ul {
}

a {
text-decoration: none;
color: #528DC8;
}

a:hover {
border-bottom: none;
}

a img {
border: none;
}

img.left {
float: left;
margin: 0 20px 0 0;
}

img.right {
float: right;
margin: 0 0 0 20px;
}

#header {
width: 960px;
margin: 0 auto;
height: 150px;
}

/* Header */

#logo {
width: 960px;
height: 100px;
margin: 0 auto;
padding: 0;
}

#logo h1, #logo p {
float: left;
margin: 0;
color: #528DC8;
}

#logo span {
color: #000000;
text-align: center;
}

#logo h1 {
padding: 25px 0 0 0;
letter-spacing: -1px;
text-transform: lowercase;
font-weight: normal;
font-size: 3em;
}

#logo p {
text-transform: uppercase;
padding: 47px 0 0 3px;
font-size: 10px;
color: #110E0F;
text-align: center;
}

#logo a {
border: none;
text-decoration: none;
color: #528DC8;
}

/* Menu */

#menu {
width: 960px;
margin: 0px auto;
padding: 0px;
height: 52px;
background: url(images/img02.jpg) no-repeat left top;
}

#menu ul {
margin: 0px;
padding: 0px;
list-style: none;
}

#menu li {
display: inline;
}

#menu a {
display: block;
float: left;
height: 33px;
margin: 0px;
padding: 19px 30px 0px 30px;
text-decoration: none;
text-transform: capitalize;
background: url(images/img03.jpg) no-repeat right 50%;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 12px;
color: #FFFFFF;
}

#menu a:hover {
color: #FFFFFF;
}

#menu .current_page_item a {
color: #FFFFFF;
}

/* Wrapper */

#wrapper {
}

/* Page */

#page {
width: 960px;
margin: 0px auto;
background: url(images/img05.jpg) repeat-y left top;
}

#page-bgtop {
background: url(images/img04.jpg) no-repeat left top;
}

#page-bgbtm {
background: url(images/img06.jpg) no-repeat left bottom;
}


/* Latest Post */

#latest-post {
padding: 20px;
border: 1px solid #E7E7E7;
float: left;
}

/* Content */

#content {
float: left;
width: 500px;
margin: 0px;
padding: 20px 0px 0px 0px;
}

.post {
padding-bottom: 15px;
line-height: 200%;
}

.post h1 {
font-weight: normal;
}

.title {
height: 50px;
margin: 0px 10px;
padding: 11px 0px 4px 10px;
text-transform: capitalize;
font-weight: normal;
background: url(images/img12.jpg) no-repeat left top;
}

.title a {
border-bottom: none;
color: #528DC8;
}

.title a:hover {
}

.byline {
margin: -10px 20px 20px 20px;
color: #F00;
font-weight: bold;
}

.tag {
padding: 0 15px;
}

.entry {
padding: 0 20px;
font-weight: bold;
font-size: 14px;
}

.links {
padding: 4px 0px;
text-align: right;
font-weight: bold;
}

.links a {
border: none;
}

.links a:hover {
}

/* Sidebars */

#sidebar1 {
float: left;
padding-top;
padding-left;
}

#sidebar2 {
float: left;
}

#sidebar1 ul {
padding-bottom: 20px;
}

#sidebar1 li {
background: url(images/img11.jpg) no-repeat left bottom;
}

#sidebar1 li ul {
background: url(images/img10.jpg) repeat-y left top;
}

#sidebar1 li li {
background: url(images/img08.gif) no-repeat 0 13px;
}

#sidebar1 li h2 {
height: 25px;
padding-top: 15px;
background: url(images/img09.jpg) no-repeat left top;
color: #333333;
}

.sidebar {
float: left;
width: 220px;
padding: 10px 0 0 0;
font-size: 12px;
}

.sidebar ul {
margin: 0;
padding: 0;
list-style: none;
}

.sidebar li {
padding: 0 0 20px 0;
}

.sidebar li ul {
}

.sidebar li li {
margin: 0 10px 0 15px;
padding: 8px 0px 8px 20px;
border-bottom: 1px #B5B5B5 dashed;
background: url(images/img08.gif) no-repeat 0 13px;
text-align: left;
}


.sidebar li h2 {
height: 30px;
margin: 0 0 0 0;
padding: 8px 15px 0px 35px;
background: url(images/img07.jpg) no-repeat left top;
font-size: 12px;
color: #FFFFFF;
}

.sidebar a {
}

/* Search */

#searchform {
margin: 0;
padding: 0 0 0 0;
}

#searchform br {
display: none;
}

#searchform h2 {
}

#s {
margin: 10px 0px 0 15px;
padding: 2px 2px;
width: 180px;
height: 18px;
border: 1px solid #949494;
background: #FFFFFF;
font-size: 10px;
color: #000000;
}

#x {
margin: 0;
padding: 2px 5px;
height: 25px;
background: #CA8186;
text-decoration: none;
text-transform: uppercase;
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
color: #CCCCCC;
}
/* Calendar */

#calendar_wrap {
padding: 0 15px;
text-align: center;
}

#calendar_wrap table {
width: 100%;
}

#calendar_wrap th {
}

#calendar_wrap td {
}

#calendar_wrap tfoot td {
border: none;
}

#calendar_wrap tfoot td#prev {
text-align: left;
font-weight: bold;
border: none;
}

#calendar_wrap tfoot td#prev a {
border: none;
}

#calendar_wrap tfoot td#next {
text-align: right;
font-weight: bold;
border: none;
}

#calendar_wrap tfoot td#next a {
border: none;
}

/* Footer */

#footer {
width: 940px;
height: 70px;
margin: 0 auto;
padding-left: 20px;
}

#footer p {
margin: 0;
padding: 25px 0 0 0;
text-align: left;
font-size: smaller;
}

#footer a {
}

#footer .link {
float: right;
}

#footer .copyright {
float: left;
}

This is my index.html


<!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>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>title</title>
<meta name="keywords" content="" />
<meta name="title" content="" />
<link href="default.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body>
<!-- start header -->
<div id="header">
<div class="left" id="logo"></div>
<div id="menu">
<ul id="main">
<li class="current_page_item"><a href="index.html">Homepage</a></li>
<li><a href="movies.html">All Movies</a></li>
<li><a href="genres.html">Genres</a></li>
<li><a href="downloads.html">Downloads</a></li>
<li><a href="contact.html">Contact Us</a></li>
</ul>
</div>

</div>
<!-- end header -->
<div id="wrapper">
<!-- start page -->
<div id="page">
<div id="page-bgtop">
<div id="page-bgbtm">
<div id="sidebar1" class="sidebar">
<ul>
<li>
<h2>Recent Posts</h2>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</li>
<li>
<h2>GenreS</h2>
<ul>
<li><a href="genres/action.html">Action</a></li>
<li><a href="genres/comedy.html">Comedy</a></li>
<li><a href="genres/drama.html">Drama</a></li>
<li><a href="genres/family.html">Family</a></li>
<li><a href="genres/holidays.html">Holidays</a></li>
<li><a href="genres/horror.html">Horror</a></li>
<li><a href="genres/sci-fi.html">SCI-FI</a></li>
<li><a href="genres/war.html">War </a></li>
<li><a href="ipod.html">Ipod</a></li>
</ul>
</li>
</ul>
</div>
<!-- start content -->
<div id="content">
<div class="flower"></div>
<div class="post">
<h1 class="title"><a href="#">Welcome to Our Website!</a></h1>
<p class="byline">&nbsp;</p>
<div class="entry">
<p>&nbsp;</p>
<p class="links">&nbsp;</p>
</div>
</div>
<div class="post">
<h2 class="title">Good Luck and Have Fun!</h2>
</div>
</div>
<div id="sidebar2" class="sidebar">
<ul>
<li>
<form id="searchform" method="get" action="#">
<div></div>
</form>
</li>
<li> </li>
</ul>
</div>
<!-- end sidebars -->
<div style="clear: both;">&nbsp;</div>
</div>
</div>
</div>
<!-- end page -->
</div>
<div id="footer">
<p class="copyright">&copy;&nbsp;&nbsp;2009 All Rights Reserved &nbsp;&bull;&nbsp; Design by Bas de Vries
</div>
</body>
</html>

Excavator
12-16-2009, 12:04 AM
Hello flyingdutch16,
Your box model (http://www.w3.org/TR/CSS2/box.html)is off. That works for heights as well as widths.
You have:

#header set at 960x150

Inside #header you have:

#logo set at 960x100
#menu set at 960x52
That's a total height of 152px wich makes the menu drop below the header by 2px which is what your floated left column bumps up against.

You can see this very obviously if you put a different background color on each element.

To fix it, remove the height from header and let it flow on it's own to enclose it's contents.
Like this -

#header {
width: 960px;
margin: 0 auto;
background: #f00;
}



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum