division sometimes follows another when I want them side-by-side

Discussion in 'CSS' started by DaleEMoore, Aug 15, 2007.

  1. #1
    Hi All

    Please pardon my first question about CSS. I've validated http://daleemoore.dyndns.org/~dalem/css/so2.html and http://w3.org tells me it's good code.

    I want two divisions to be side-by-side but sometimes one follows the other. Internet Explorer displays the way I want but prints wrong. Firefox displays the way IE prints.
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" >
    <head><title>division sometimes follows another when I want them side-by-side</title>
    <style type="text/css">
    /* From http://DaleEMoore.DynDNS.Org/~dalem/css/so1.html */
    body,
    html {
    margin:0;
    padding:0;
    }
    body {
    min-width:750px;
    }
    #header {
    }
    #header h1 {
    padding:5px;
    margin:0;
    }
    #main {
    float:left;
    width:500px;
    }
    #main h2, #main h3, #main p {
    padding:0 10px;
        }
    #sidebar {
    float:right;
    width:240px;
    }
    #sidebar ul {
    margin-bottom:0;
        }
        #sidebar h3, #sidebar p {
    padding:0 10px 0 0;
        }
    #footer {
    clear:both;
    }
    #footer p {
    padding:5px;
    margin:0;
        }
    </style>   
    </head>
    <body>
        <div id="header">
    I've trimmed this code down to the essentials from some created automatically by Visual Studio DataList objects.
    I have no control over the two tables present.
    <br />
    <br />
    Internet Explorer displays the way I want but prints wrong.
    Firefox displays the way IE prints.
    <br />
    <br />
    There are two divisions below and the division on the right ("sidebar") <b>should be on the same line</b> as the division on the left ("main"), <b>not be below</b> it.
    When I remove the "img src" in the "footer" division the "sidebar" division moves up to where it belongs; wether the image file exists, or not; I get the problem.
    If I add another "123456789." in the "footer" division the problem will go away.
    
    <br />
    <br />
        </div>
        <table>
    <tr>
    <td>
                <div id="main">
    "main" division.
                    <br />
                </div>
                <div id="sidebar">
    "sidebar" division should be to right of "main" but follows when there is an image in the "footer" division, below.
                    <br />
                </div>
                <div id="footer">
                    <table>
    <tr>
    <td>
    "footer" division.
    123456789.
    123456789.
    123456789.
    123456789.
    123456789.
    123456789.
                        <br />
                        <img src="NoneHere.png" alt="Image file not found."/>
                    </td>
    </tr>
    </table>
                    <br />
                </div>
            </td>
    </tr>
        </table>
    </body>
    </html>
    Code (markup):
    Any help you can provide is very much appreciated,
    Dale E. Moore
     
    DaleEMoore, Aug 15, 2007 IP
  2. DaleEMoore

    DaleEMoore Peon

    Messages:
    2
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Hi All,

    The following corrected my problem:

    #footer {
    clear:both;
    width:750px;
    }

    Many thanks to all whom spent their time considering my problem,
    Dale E. Moore
     
    DaleEMoore, Aug 15, 2007 IP