I still can't quite grasp this horizontal css float stuff
Moderator: General Moderators
I still can't quite grasp this horizontal css float stuff
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)
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)
- John Cartwright
- Site Admin
- Posts: 11470
- Joined: Tue Dec 23, 2003 2:10 am
- Location: Toronto
- Contact:
It helps when you post the relevant code so we don't have to dig through all your source code 
Last edited by John Cartwright on Tue Jan 03, 2006 4:53 pm, edited 1 time in total.
Oh yeah hehe, sorry 'bout that... here's the html:
And here's the CSS:
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>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;
}- Chris Corbyn
- Breakbeat Nuttzer
- Posts: 13098
- Joined: Wed Mar 24, 2004 7:57 am
- Location: Melbourne, Australia
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
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
- John Cartwright
- Site Admin
- Posts: 11470
- Joined: Tue Dec 23, 2003 2:10 am
- Location: Toronto
- Contact:
- John Cartwright
- Site Admin
- Posts: 11470
- Joined: Tue Dec 23, 2003 2:10 am
- Location: Toronto
- Contact:
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
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