Floating Elements

sarel · #1 (**permalink**) 07-11-2008, 04:10 AM

Need some help if possible with my CSS.

I am using floating properties to arrange objects in my webpage.

Problem:
Placements of objects are good when viewed in I.E but in FireFox it's totally wrong.

Code:

body {
       margin: 0px; 
       font-size: 12px;
       font-family: "trebuchet ms", arial, sans-serif; }


#top  { width: 100%;
    height: 68px;
    background-color: rgb(126,146,186); 
        border-bottom: 3px ridge rgb(126,146,186) }

address { margin-top: 18px; 
          border-top: 1px solid darkorange;
          font-size: smaller; 
          padding-top: 3px;
          font-weight: bold; 
          font-style: normal }

a { color: navy; 
    font-size: 12px;
    font-weight: bold; 
    text-decoration: none }

.copylead { color: black }


h1 { font-size: 20px;
     background-color: #f90; 
     padding-left: 5px;
     letter-spacing: .2em;
     font-variant: small-caps }

h2 { 
     font-size: 18px;
     color: navy;
     font-weight: lighter; }

h3 { margin: 0px; font-size: 12px }


#main { width: 400px;
        padding: 8px;
        border: 1px dashed orange; 
        margin-top: 13px; }

#main img { float:Left;
            padding-right: 8px;}


#nav  {
        margin: 12px;
        width: 100px; 
        padding: 8px;
        border: 1px dashed orange; 
        height: 140px;
        float:left;}

#nav2 {  
        margin: 12px;    
        width: 100px;
        padding: 8px; 
        border: 1px solid black; 
        float:left;
        clear:left;}


#footer { width: 530px;
          background-color: rgb(126,146,186);
          color: white;
          border: 1px solid #000;
          padding: 8px;
          margin-left: 12px;
          margin-top: 20px;
          text-align: center; }


#footer a { color: white }


.other { 
         font-size: 10px;
         padding-left: 2px }

TeraTask · #2 (**permalink**) 07-12-2008, 11:20 PM

Can you include the HTML?

sarel · #3 (**permalink**) 07-14-2008, 12:35 AM

Ok, hope this will help

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">

<html>
<head>
    <title>NewsParrot.com: Home</title>

<link rel="stylesheet" type="text/css" href="parrot.css">

<style type="text/css">

#note { width: 542px;
        height: 134px;
        border: 1px solid black;
    padding: 8px;
        margin-left: 10px;
        margin-top: 12px }


</style>
    
</head>

<body>

<div id="top">
<img src="newsparrot.gif" width="242" height="58" alt="Don't quote us.">
</div>


<!-- Main Nav -->

<div id="nav">

    <h3>&raquo; Main </h3>

    <a href="index.html" class="current">Home</a><br>
    <a href="world.html" title="News from around the world">World News</a><br>
    <a href="us.html" title="News from the U.S.">U.S. News</a><br>
    <a href="business.html" title="Business news">Business</a><br>
    <a href="tech.html" title="Technology news">Technology</a><br>
    <a href="sports.html" title="Sports news">Sports</a><br>
    <a href="politics.html" title="Political news">Politics</a><br>


</div>

<!-- Resource Nav Bar -->

<div id="nav2">

     <h3>&raquo; Resources </h3>
         <a href="#">Search</a><br>
         <a href="#" title="Need help? This site map can help.">Site Map</a><br>
         <a href="#" title="Launches email">Contact Us</a><br>
         <a href="#" title="Get NewsParrot content on your mobile device!">Parrot on       PDA</a><br>
         <a href="#" title="Vote in today's poll.">Today's Poll</a><br>
         <a href="#">News Archive</a><br>

</div>


<div id="main">
    <h1>Top Story...</h1>
        <h2>Nothing New</h2>
    <img src="nothing.jpg" alt="Top Story Image">
<p>Amazingly, there has been nothing that could be reasonably deemed a "top story" for several weeks. This should not be seen as indicative of any failure on our part to cover the news, locate newsworthy stories, or assign reporters promptly. Literally <em>nothing</em> worthy of "top story" status has happened, in our opinion. Unlike other popular news sources, we never resort to "fluff" just to fill the space. We believe that no news is good news, and we hope you find this non-story refreshing.
</p>

<p>Until something does happen that warrants such a headline, feel free to browse through our topical news sections, like sports, technology, and politics.
</p>

<p>Here at <b>NewsParrot</b>, we display the news as it happens, but only when and if it happens.
</p>

</div>

<div id="footer">

<a href="terms.html">Terms of Use</a> | 
<a href="privacy.html">Privacy Policy</a> | 
<a href="advertise.html">Advertise with Us</a> |
<a href="pr.html" title="View Our Most Recent Press Statement">Press</a> |
<a href="custom.html" title="Customize This Site">My Parrot</a> |
<a href="mailto:webmaster@newsparrot.com" title="Launches Email">Feedback</a> 

<address>
Contents &copy; NewsParrot.com ||
500 Canal View Blvd. Rochester, NY 14623
</address>

</div>
<div id="end">
&nbsp;
</div>

</body>
</html>

ccoonen · #4 (**permalink**) 07-16-2008, 08:14 AM

Please just post URL where we can see it

TeraTask · #5 (**permalink**) 07-16-2008, 01:03 PM

That's my fault ccoonen. Just did what I asked. I haven't had a chance to answer the question yet b/c I have a product update going out and have just been swamped.

sarel · #6 (**permalink**) 07-16-2008, 11:49 PM

Sorry, there is no URL, only on my HTDOCS.

Observation:
Floating elements are left to each and every browser to interpret and variations may occur from browser to browser,
where as fixed elements using absolute or relative coordinates always produce good results.

Am I right?

TeraTask · #7 (**permalink**) 07-17-2008, 01:05 AM

Quote:

Originally Posted by sarel

Sorry, there is no URL, only on my HTDOCS.

No problem. You can also upload the file as an attachment.

Quote:

Originally Posted by sarel

Observation:
Floating elements are left to each and every browser to interpret and variations may occur from browser to browser,
where as fixed elements using absolute or relative coordinates always produce good results.

Am I right?

The specification is fairly clear and while I haven't read the technicals on float in awhile, I don't remember it being left much up to the browser. You can check out the latest specification at Visual formatting model

Now, for your problem. I placed a container div around the left column and floated main. That did it for me on both browsers. The file is attached.

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

The Following User Says Thank You to sarel For This Useful Post:
TeraTask (07-16-2008)