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

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
User avatar
Luke
The Ninja Space Mod
Posts: 6424
Joined: Fri Aug 05, 2005 1:53 pm
Location: Paradise, CA

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

Post 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)
User avatar
John Cartwright
Site Admin
Posts: 11470
Joined: Tue Dec 23, 2003 2:10 am
Location: Toronto
Contact:

Post by John Cartwright »

It helps when you post the relevant code so we don't have to dig through all your source code :wink:
Last edited by John Cartwright on Tue Jan 03, 2006 4:53 pm, edited 1 time in total.
User avatar
Luke
The Ninja Space Mod
Posts: 6424
Joined: Fri Aug 05, 2005 1:53 pm
Location: Paradise, CA

Post 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;
}
User avatar
Chris Corbyn
Breakbeat Nuttzer
Posts: 13098
Joined: Wed Mar 24, 2004 7:57 am
Location: Melbourne, Australia

Post 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
User avatar
Luke
The Ninja Space Mod
Posts: 6424
Joined: Fri Aug 05, 2005 1:53 pm
Location: Paradise, CA

Post 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.
User avatar
John Cartwright
Site Admin
Posts: 11470
Joined: Tue Dec 23, 2003 2:10 am
Location: Toronto
Contact:

Post by John Cartwright »

why not adjust the div width to account for the image width?
User avatar
Luke
The Ninja Space Mod
Posts: 6424
Joined: Fri Aug 05, 2005 1:53 pm
Location: Paradise, CA

Post 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.
User avatar
John Cartwright
Site Admin
Posts: 11470
Joined: Tue Dec 23, 2003 2:10 am
Location: Toronto
Contact:

Post by John Cartwright »

You could set div under the image set to clear: both which will force the container to fit to that div.
matthijs
DevNet Master
Posts: 3360
Joined: Thu Oct 06, 2005 3:57 pm

Post 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
User avatar
neophyte
DevNet Resident
Posts: 1537
Joined: Tue Jan 20, 2004 4:58 pm
Location: Minnesota

Post by neophyte »

overflow: auto; You need that in the tag that the image is sitting in. I think that will take care of it.
Post Reply