1 reply [Last post]
lkmoves
lkmoves's picture
Offline
newbie
Philadelphia
Last seen: 2 years 48 weeks ago
Philadelphia
Timezone: GMT-4
Joined: 2011-09-26
Posts: 1
Points: 2

Hello,
I have what I think may be a simple answer, but something that has evaded me for some time!

I have essentially 3 parts to my webpage, all styled with CSS, no tables or flash or whatnot.

A top header with Logo
A horizontal navigation bar
A large maincontent div.

Depending on the size of the open browser (also immediately dependent on the size of the screen.) The maincontent stays put, whereas the top 2 elements/divs move about according to the size.

I've been trying to add in a left side navigation bar (with facebook buttons, extra nav and buy now buttons etc.) But once I add and fit in a div to sit beside my main content, it stays for awhile, then once the screen changes size, the left div stays put and the main content gets shoved down below it. Arghh.

Ive included the CSS here, for all three sections. It is easily viewable at www.thrivepilatesphiladelphia.com/test.css
Bear in mind I've made this among others from scratch on only 1 semester of coding classes!

Top Header CSS

#banner_wrapper {
width: 100%;
	position:relative;
}
 
#bannerhome {
	width:900px;
	height:160px;
	margin:0px auto;
	margin-top: 0px;
	position: center;
}
 
 
#bannerhome img {
	float:center;
	width:500px;
	height:140px;
}

Top Header HTML

<div id="banner_wrapper">  
    <div id="bannerhome">
    	    <a href="http://www.thrivepilatesphiladelphia.com">	<img src="/images/mainlogo.png" width="668" height="185" alt="Thrive Logo" /> </a>
	</div>
	</div>

Nav CSS

#wrapperpages {
	margin: 0 auto;
	position: relative;
	width: 920px;
}
 
 
/*Nav bar styles*/
 
ul {
	list-style: none;
	padding: 20px 20px;
	margin: 0px;
	font-size: 14px;
}
 
#nav a {
	font-weight: bold;
	color: #3B6B9C;
}
 
#nav a {
	text-decoration: none;
}
 
 
#nav li a:hover {
	padding: 0.2em 5px;
	border: 1px solid #3B6B9C;
	border-width: 0 5px;
	opacity: 0.6;
	color: #ff3300;
}
 li {
	float: left;
	position: relative;
	width: 10em;
	text-align: center;
	padding-top: 6px;
	padding-bottom: 6px;
	cursor: default;
	background-color: white;
	border: 1px solid #194E84;
	border-width: 1px 0;
	color: 194E84
}
 
li#first {
	border-left-width: 1em;
}
 
li#last {
	border-right-width: 1em;
}
 
 li ul {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
 
	font-weight: normal;
	background-color:  #0066cc;
	opacity: 0.88;
	bottom left no-repeat;
	padding: 0.5em 0 1em 0;
	border-right: solid 1px #194E84;
	font-weight: bold;
}
 
 li>ul {
	top: auto;
	left: auto;
}
 
 li li {
	display: block;
	float: none;
	background-color: transparent;
	border: 0;
}
 
 li:hover ul, li.over ul {
	display: block;
}

Nav HTML
(no need to include basically a block list)

Main Content CSS

#mainContentpages {
float: left;
height: 850px;
	width: 850px;
	margin-left: 150px;
   *margin-left: 100px;
	margin-top: 20px;
	padding-right: 8px;
	padding-left: 10px;
	font-family: Arial, Helvetica, sans-serif;
	font-size:14px;
	color: #5E715E;;
	line-height:16px;
	background-color: white;
	border-right: 2px solid #60BB22;
		border-left: 2px solid #60BB22;
 
	border-padding: 10px;
 
	} 

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 6 hours 4 min ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5108
Points: 2704

Hi lkmoves, The values

Hi lkmoves,
The values available to float are: left, right and none. No float:center;
In the how to section there are some articles on centering: how to
If you have an image in a link, it's probably better to center the link not the image.

It would be good to see more of the html so we can see how things fit together.
Your problem is most likely incorrectly calculated width values. Make sure you take into consideration padding, margin and borders. When floating it is a good idea to leave a little extra space for browser to round values when the need to.

Hope that helps