Page 1 of 1

I still can't quite grasp this horizontal css float stuff

Posted: Tue Jan 03, 2006 3:47 pm
by Luke
I am an old-fashioned table web designer who is desperately trying to change his ways. I am putting together a photo album for my home town at the following url:

http://www.paradisedirect.com/otr_photos.php

It renders EXACTLY how I want it to in IE, but in Mozilla Suite it is funky. I am having the hardest time figuring out how to line things up horizontally in CSS. I can't figure out why I can't make it look right.

I can't test it in Firefox because it is disabled on my computer because of god knows why... I am very frustrated.

EDIT: doesn't look right in opera either (does the same as Mozilla)

Posted: Tue Jan 03, 2006 4:12 pm
by John Cartwright
It helps when you post the relevant code so we don't have to dig through all your source code :wink:

Posted: Tue Jan 03, 2006 4:52 pm
by Luke
Oh yeah hehe, sorry 'bout that... here's the html:

Code: Select all

<a name="top"></a>
     <img src="images/photo_album.jpg" alt="Paradise Ridge Photo Album" style="border: 1px solid black;" />
     <p><strong>Paradise Ridge Photo Album </strong><br />
      <b>Take a virtual tour</b> of the stunning scenery above and below our beloved Paradise.</p>      
     <p><b>We rely solely on visitor photography</b> for this section of the site. If you have any Ridge photos you would like to see on this page, email them to <a href="mailto:webdesigner@sierra-tech.com">webdesigner@sierra-tech.com</a> or drop them off at our store located at 6390 Clark Road.</p>
      <br class="clearboth" />
     <div class="photo_float_left"><img src="images/skyway_thumb.jpg" alt="Spatulastic!" class="photo_album" /><br /><b>Lower Ridge Area</b></div>
     <div class="graybox"><p><strong>Breath-taking views</strong> of Butte Creek Canyon, Lookout Point and Lower Skyway<br /><br /><span><small style="font-size: 8pt">Skyway photo compliments of <a href="mailto:cheryl@basisdesign-marketing.com" style="font-size: 8pt">Cheryl Hawkins</a></small></span></p></div>
     <br style="clear: both" />
     <div class="photo_float_left"><img src="images/spacer.gif" width="200" height="150" alt="Spatulastic!" /><br /><b>Paradise Area</b></div>
     <div class="graybox"><p>Explore all of the unique parks, buildings and people of Paradise, California</p></div>
     <br style="clear: both" />
     <div class="photo_float_left"><img src="images/spacer.gif" width="200" height="150" alt="Spatulastic!" /><br /><b>Upper Ridge Area</b></div>
     <div class="graybox"><p>Take a look at the Beautiful lakes, green landscapes and other places just a little above Paradise</p></div>
     <br style="clear: both" />
     <div class="photo_float_left"><img src="images/spacer.gif" width="200" height="150" alt="Spatulastic!" /><br /><b>Stirling City and Beyond</b></div>
     <div class="graybox"><p>Take a look at Merlo Park and Stirling City's unique buildings</p></div>
     <br style="clear: both" />
     <div class="photo_float_left"><img src="images/spacer.gif" width="200" height="150" alt="Spatulastic!" /><br /><b>Around Butte County</b></div>
     <div class="graybox"><p>Explore Butte County</p></div>
     <a href="#top">Back to top</a>
And here's the CSS:

Code: Select all

.floatleft{
	float: left;
	margin: 10px;
}
.floatright{
	float: right;
	margin: 10px;
}
.graybox{
	background-color: #EEEEEE;
	color: #333333;
	border: 1px solid #333333;
}
.photo_float_left{
	float: left;
	width: 220px;
	margin: 10px;
	background-color: #FFFFFF;
	padding: 10px;
	border: 1px solid #666;
}
.photo_album{
	margin: 0;
	padding: 0;
	border: 1px solid black;
}

Posted: Tue Jan 03, 2006 5:14 pm
by Chris Corbyn
Is it the overlapping <div>'s that's the issue?

That's normal but it won't happen in IE because (I'd love to say something offensive about MS here but I wont) IE doesn't implement the box model correctly.

In standards compliant browsers floating div's are permitted to extend beyond the boundaries of their parent div's. IE simply stretches them.

You'll either have to set a height and width for the parent div's in the CSS, or apply a float attribute to them. ;)

Perhaps that's not the issue.... you just said it looks funky :P

Posted: Tue Jan 03, 2006 5:49 pm
by Luke
Once again, I'm sorry I should have been more clear. My problem with it is that the image is not all the way in the box. It overlaps.

Posted: Tue Jan 03, 2006 10:58 pm
by John Cartwright
why not adjust the div width to account for the image width?

Posted: Thu Jan 05, 2006 11:28 am
by Luke
Well I suppose I could do that... but I want to learn how to do things like this without having to set a width.

I am really trying hard to change my table-happy ways. Once I saw css zen garden I decided I need to get with the times.

Posted: Thu Jan 05, 2006 11:32 am
by John Cartwright
You could set div under the image set to clear: both which will force the container to fit to that div.

Posted: Sat Jan 07, 2006 5:35 pm
by matthijs
Instead of trying to explain it myself, I'll point to a good read about this issue:
http://orderedlist.com/articles/clearing-floats-fne/

Also, maxdesign has some nice tutorials about css and floats:
http://maxdesign.com.au/presentation/bu ... /index.htm

Posted: Sat Jan 07, 2006 6:25 pm
by neophyte
overflow: auto; You need that in the tag that the image is sitting in. I think that will take care of it.