Div seems to clear the float?

On
Charlie and Susan - Home
I| cant understand why the left menu div (which is floated to the left and has a width of 255) isn’t along-side the liquid thing which has a margin-left of 275px. What am missing?
Thanks…

Put float: left; width: 250px; on .shiftcontainer :slight_smile:

did that, it didn’t do anything

Well it should have. At the moment, .shiftcontainer is 100% wide. Even just floating it should work.

What browser are you viewing this in?

PS It’s a good idea to implement suggested changes in the links you provide, so that if it they don’t work, we can see why.

viewing it in FF.
this is the CSS for that class

.shiftcontainer{
position: relative;
left: 5px; /Number should match -left shadow depth below/
top: 5px; /Number should match -top shadow depth below/
width:250px;
float:left
}

i think you may have miscalculated your total size ( I’m unable to peek into your source code at the moment)… to est this try making the width of your element narrower ( just for example: width:100px; if your elements line up… then my theory is probably correct. At which point the most likely cause of the miscalculation ( other than total failure at arithmetic) is forgetting that padding is ADDED to the actual dimensions of an object. In other words, if you sat the width on an element at 600px and then gave it Padding:20px… its actual dimension widthwise is 640px ( 600px +20px left + 20px right)

I hope this helps.

The browser can’t see those styles, because you have those styles wrapped in incorrect IE CCs. You can’t have CCs in a style sheet like that, only in the head of your document, wrapped around a style sheet link.

[COLOR="Red"]<![if !IE 6]>[/COLOR]
.shiftcontainer {

}
[COLOR="Red"]<![endif]>[/COLOR]

So remove the CCs from the style sheet. An TBH, I would never mess up my stylesheet for the sake of IE6 anyway.

I don’t even think that would be the right CC code anyway. You’d use this in the head of your document:

<!--[if !IE 6]>-->

<!--<![endif]-->

If you want conditional comments in your CSS, try


* html .shiftcontainer {

}

Okay it’s not really a conditional comment, but only IE6 understands it.

(for IE7 it’s *+html)

If that is your actual code it is not working because you did not close your style declaration with a semicolon.

float:left

should be:

float:left;

Hopefully this helps.

Sent from my NookColor using Tapatalk

You can leave out the semi colon on the last line in a rule. I wouldn’t recommend it, but it’s allowed :slight_smile:

Ahh, thanks for that. I’ve been a member for all of 20 minutes and I’ve already learned something.

:slight_smile:

I picked up on that right away because I do it all of the time!

The last property and value in the syntax does not need to be closed. It is good to close them though, in case you add more rules it is already closed.

EDIT:
Remon beat me to it :slight_smile:

You appear to have a fixed width layout, but you’re declaring a percentage width next to a px width float – that’s not gonna work… You kind-of have to pick a metric and stick with it, or you’re going to encounter the problem you’re seeing here.

The appropriate name for which is “float drop”.

I’m seeing a lot of the ‘classic early blunders’ in this code too… what are the four div before you even get to the first image even doing that one single div could not? The answer is nothing. What makes that card.png image a heading and/or start of a new subject? Nothing, why is that in a h3? (I’d also advise against positioning it where you did since even 1024 users will just see a broken half-element)… for the “shiftcontainer/shadowcontainer/innerdiv/arrowlistMenu” that’s four div doing two div’s job. The rounded corners appear to use multiple separate images to do one image’s job… div.underLinemenu and div.social aren’t doing anything that couldn’t be done directly to the UL inside them…

I’d also highly advise NOT sending your screen stylesheet to “all”, and choosing some slightly more meaningful names on things (as opposed to the vague “style.css”). You also appear to have the value for a description meta in your keywords meta.

So the first order of business is to clean up the markup. Excuse the XHTML 1.0, it’s what I work best 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"
	lang="en"
	xml:lang="en"
><head>

<meta
	http-equiv="Content-Type"
	content="text/html; charset=utf-8"
/>

<meta
	http-equiv="Content-Language"
	content="en"
/>

<meta
	name="keywords"
	content="coronado,real estate,homes,consultants,california,buy,sell,relocate"
/>

<meta
	name="Description"
	content="Coronado Real Estate, Homes for sale in Coronado, Ca."
/>

<link
	type="text/css"
	rel="stylesheet"
	href="screen.css"
	media="screen,projection,tv"
/>

<link
	rel="shortcut icon"
	href="/favicon.ico"
/>

<title>
	Charlie and Susan - Home
</title>

</head><body>

<div id="pageWrapper">

	<h1>
		<a href="/">
			Coronado Real Estate Consultants
			<span><!-- absolute positioned image --></span>
		</a>
	</h1>

	<div id="columnWrapper">

		<div id="sideBar">

			<div class="shadowWrapper"><div class="subSection">
				<h3>Menu</h3>
				<ul>
					<li><a href="index.php">Home</a></li>
					<li>
						<a href="properties/">Search Properties</a>
						<ul>
							<li><a href="properties/1003TheMeridiqan.php">#1003, The Meridian</a></li>
							<li><a href="properties/13123rdStreet.php">1312 3rd Street</a></li>
							<li><a href="prpertries/631Balboa.php">631 Balboa Avenue</a></li>
							<li><a href="properties/204LasPalmas.php">#204, Las Palmas</a></li>
							<li><a href="properties/1509ElCamino.php">#1509, El Camino</a></li>
							<li><a href="prpertries/904ElMirador.php.php">#904, El Mirador</a></li>
						</ul>
					</li>
					<li><a href="worth.php">What is my home worth</a></li>
					<li><a href="mls.php">Access Multiple Listing Service</a></li>
					<li><a href="mls.php">Coronado, Paradise on earth</a></li>
					<li>
						<a href="info/">Information</a>
						<ul>
							<li><a href="info/neewsletter.php">Newsletter</a></li>
							<li><a href="info/news.php">Real Estate News</a></li>
							<li><a href="info/calc.php">Mortgage Calculator</a></li>
							<li><a href="info/school.php">School info.</a></li>
							<li><a href="info/neighborhood.php">Neighborhood info.</a></li>
						</ul>
					</li>
					<li><a href="about.php">About Us</a></li>
					<li><a href="testimonials.php">Testimonials</a></li>
					<li><a href="contact.php">Contact Us</a></li>
					<li><a href="sitemap.php">Site	Map</a></li>
				</ul>
			<!-- .subSection, .shadowWrapper --></div></div>

		<!-- #sideBar --></div>

		<div id="content">
			<div class="borderTop"><div></div></div>
			<div class="borderSideFirst"><div class="borderSideSecond">
				<h2>Greetings from Charlie and Susan</h2>
				<p>
					You have come to the right place to explore your real estate possibilities! Whether you are planning to buy or sell, relocate, or just browsing, we can guide you through the process from beginning to end.
				</p><p>
					Call ((619) 435-0824) or email (<a href="mailto:'CharlieandSusan@charlieandsusan.com'">CharlieandSusan@charlieandsusan.com</a>) us at any time. We strongly believe in top-notch customer service. Let us prove it to you!
				</p><p>
					Charlie & Susan Ahern<br>
					DRE#01236309 <b>|</b> DRE#01268060
				</p>
				
				<h3>Coronado Real Estate Consultants, Inc.</h3>
				861 Country Club Lane<br />
				Coronado, CA	92118<br />
				<br />
				Call us (619) 435-0824<br />
				Charlie- Realtor of the Year 2006 SRES<br />
				Fax (619) 435-2071<br />
				Susan E-Pro, Womens Council of Realtors<br />
				<a href="mailto:'CharlieandSusan@charlieandsusan.com'">CharlieandSusan@charlieandsusan.com</a>
			<!-- .borderSideSecond, .borderSideFirst --></div></div>
			<div class="borderBottom"><div></div></div>
		<!-- #content --></div>
	<!-- #columnWrapper --></div>
	
<!-- #pageWrapper --></div>

<div id="footerWrapper"><div id="footer">

	<ul id="footerMenu">
		<li><a href="/index.php">Home</a></li>
		<li><a href="/about.php">About us</a></li>
		<li><a href="/properties/">Properties</a></li>
		<li><a href="/mls.php">MLS</a></li>
		<li><a href="/info/">Information</a></li>
		<li><a href="/contact.php">Contact us</a></li>
	</ul>
	
	<ul id="socialNetworking">
		<li class="twitter"><a href="" >Twitter<span></span></a></li>
		<li class="facebook"><a href="" >Facebook<span></span></a></li>
	</ul>
	
	<div>
		Call us (619) 435-0824, Charlie - Realtor of the Year 2006 SRES <span>-</span>
		Charlie & Susan Ahern, DRE#01236309 | DRE#01268060 <span>-</span>
		Web Design: <a href="http://www.fixmysite.us" id="rar">Luke Urtnowski</a>
	</div>
	
<!-- #footer, #footerWrapper --></div></div>

</body></html>

Is roughly how I’d approach that from a HTML perspective. If I have time later I’ll make the CSS that would go with it.

thanks all for the tips, it helped and ill get rid of some of the unnecessary divs and do away with the %