Problem with Columns using HTML and CSS

Collapse
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • fatgoth
    New Member
    • Feb 2008
    • 5
    #1

    Problem with Columns using HTML and CSS

    I am rather new to CSS and have created a CSS two column layout that works fine in IE but Firefox very kindly places the 'column' div right below the first 'main' div instead of beside each other.

    Here is the code of the html page:

    [html]<body>
    <div id="main_block" >
    <div id="banner"></div>
    <div id="menu_top">
    <ul id="menu_list_t op">
    <li>&nbsp;&nbsp ;<script language=javasc ript>dispDate(0 )</script>
    </li>
    </ul>
    </div>

    <div id="main">

    <form method="get" action="http://www.google.com/search">
    <div id="search">
    <input tpe="text" name="q" size="25" maxlength="255" value="" /><input type="submit" value="Search" /><br />
    <input type="checkbox" name="sitesearc h" value="xx.co.uk " checked /> Only search xx.co.uk
    </div>

    </form>

    <br />
    <br />
    <br />

    <h3>Welcome</h3>
    <p>Welcome.<b r />
    Text.<br />
    Text<br />
    <br />
    <br />
    For more information <a href="xx.php">C ontact Us</a> here.
    </p>
    </div>
    <div id="column">
    <br />
    <p><a href="#"><img src="x.gif" alt="x" border="0" /><br />
    Text.</a></p>
    <p><a href="x.com" target="_blank" ><img src="x1.jpg" alt="x" border="0" /><br />
    Text.</a></p>
    <p><a href="#"><img src="x3.jpg" alt="x" border="0" /><br />
    Text.</a></p>
    <p><a href="x.com" target="_blank" ><img src="x3.jpg" alt="x" border="0" /><br />
    text.</a></p>
    <br />
    </div>
    </div>
    <div id="clear"></div>
    </div>
    <div id="footer">
    </div>
    <div id="copyright"> &copy; xxx. &nbsp;</div>
    <div id="copyright"> &nbsp;</div>
    </body>[/html]


    and the CSS file :

    [code=css]html, body {
    margin:0;
    padding:0;
    text-align:center;
    }

    body {
    background-color:#EAEAEA;
    }

    #main_block {
    text-align:left;
    margin:0 auto;
    padding:10px 15px;
    width:706px;
    height:auto;
    background:url( "../x2.gif") repeat-y;
    font:12px Verdana,Arial,H elvetica,sans-serif;
    color:#666;
    }

    #banner {
    font:6px Desyrel,Bordeau xMedium;
    margin:5px;
    background:url( "../x4.jpg") no-repeat;
    width:662px;
    height:105px;
    padding:10px 0 0 10px;
    }

    #content {
    width:676px;
    }

    #main {
    width:465px;
    height:auto;
    float:left;
    padding:10px;
    }

    #main a {
    text-decoration:none ;
    font-weight:bold;
    color:#000000;
    }

    #main a:hover {
    background-color:#ADD8E6;
    color:#000000;
    }


    #mail_error {
    color:#FF0000;
    text-align:left;
    }

    #main p{
    color:#181818;
    }


    #box {
    width:156px;
    height:auto;
    padding:0 10px;
    border:1px dotted #FC6;
    }

    #menu {
    list-style:none;
    margin:4px;
    text-align:center;
    width:670px;
    height:15px;
    background-color:#ADD8E6;
    font:11px Verdana,Arial,H elvetica,sans-serif;
    text-decoration:none ;
    }

    #menu a {
    font-weight:bold;
    text-decoration:none ;
    color:#666;
    }

    #menu a:hover {
    font-weight:bold;
    background-color:#99CCFF;
    color:#000000;
    }


    #menu_top {
    margin:5px;
    width:662px;
    background-color:#ADD8E6;
    padding:0 0 0 5px;
    }

    #menu_list_top {
    font-weight:bold;
    list-style:none;
    margin:5px 0;
    padding:0 0 2px 0;
    }



    #column {
    float:none;
    list-style:none;
    margin:5px 0;
    padding:0;
    width:170px;
    text-align:center;

    }

    #column a {
    text-decoration:none ;
    padding:5px;
    width:170px;
    display:block;
    color:#666;
    }

    #column a:hover {
    color:#666;

    }

    #noLine a {
    border-bottom:0;
    }

    h1 {
    font-size:28px;
    margin:0;
    color:#000000;
    }

    h2 {
    font-size:12px;
    margin:0 0 0 5px;
    color:#FFF;
    }

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

    #clear {
    clear:both;
    }


    p {
    line-height:1.5em;
    color:#585858;
    }

    #copyright, #copyright a {
    padding-top:5px;
    text-decoration:none ;
    text-align:center;
    font:10px Verdana,Arial,H elvetica,sans-serif;
    color:#666;
    }

    #copyright a:hover {
    color:#369;
    }

    #footer {
    margin:0 auto;
    height:10px;
    width:736px;
    background:url( "../xc.gif") no-repeat;
    }

    #search {
    font:9px Verdana,Arial,H elvetica,sans-serif;
    }[/code]


    Many thanks.
    Tags: None
    • Death Slaught
      Top Contributor
      • Aug 2007
      • 1137
      #2
      Please use proper code tags when posting code, refer to the box on the right when posting, and/or read the Posting Guidelines (there's a link in my signature).

      Just incase you didn't know IE is the one displaying the browser incorrectly (you need to add a doctype to keep IE out of quirks mode).

      In your column rule you can add this:

      [CODE=css] display:inline;[/CODE]

      This will move your copyright but that's easy to move back.

      ^_^ Hope it helps, Thanks, Death

        Comment

        • fatgoth
          New Member
          • Feb 2008
          • 5
          #3
          Originally posted by Death Slaught
          Please use proper code tags when posting code, refer to the box on the right when posting, and/or read the Posting Guidelines (there's a link in my signature).

          Just incase you didn't know IE is the one displaying the browser incorrectly (you need to add a doctype to keep IE out of quirks mode).

          In your column rule you can add this:

          [CODE=css] display:inline;[/CODE]

          This will move your copyright but that's easy to move back.

          ^_^ Hope it helps, Thanks, Death
          Many thanks for your help. I will read the instructions next time.

          I added the line into my column code in the CSS but it made no difference at all.

          Do you have any other ideas?

          Many thanks, Fatgoth

            Comment

            • Death Slaught
              Top Contributor
              • Aug 2007
              • 1137
              #4
              Strange it worked fine for me. Try removing the 'float:none'.

              [CODE=css]
              #column {
              display:inline;
              list-style:none;
              margin:5px 0;
              padding:0;
              width:170px;
              text-align:center;
              }
              [/CODE]

              ^_^ Hope it helps, Thanks, Death

                Comment

                • fatgoth
                  New Member
                  • Feb 2008
                  • 5
                  #5
                  Originally posted by Death Slaught
                  Strange it worked fine for me. Try removing the 'float:none'.

                  [CODE=css]
                  #column {
                  display:inline;
                  list-style:none;
                  margin:5px 0;
                  padding:0;
                  width:170px;
                  text-align:center;
                  }
                  [/CODE]

                  ^_^ Hope it helps, Thanks, Death

                  Thanks again, but still no luck. Removed the float line, no luck. Deleted all column section and readded yours, but still the same.

                  Thanks, Fatgoth

                    Comment

                    • drhowarddrfine
                      Recognized Expert Expert
                      • Sep 2006
                      • 7434
                      #6
                      As always, the problem is IE. It is mishandling floats. Never use IE as a reference for how things should work. It is 10 years behind web standards and wrong.

                      Instead of float:none; (which is the default) make it float:left;

                        Comment

                        • fatgoth
                          New Member
                          • Feb 2008
                          • 5
                          #7
                          Originally posted by drhowarddrfine
                          As always, the problem is IE. It is mishandling floats. Never use IE as a reference for how things should work. It is 10 years behind web standards and wrong.

                          Instead of float:none; (which is the default) make it float:left;
                          Ok, that has sort of worked.

                          The column is now on the right hand side. The page itself has a central pane which uses images top, bottom, left and right. Into this pane is added the 'main' and 'column' columns. With the answer you have given above it looks like main and column overlap the edges and the images on the left and right have disappeared and the white backgound to the centre pane has been replaced with grey, which was the page background.

                          Thanks

                          Fatgoth

                            Comment

                            • fatgoth
                              New Member
                              • Feb 2008
                              • 5
                              #8
                              Originally posted by fatgoth
                              Ok, that has sort of worked.

                              The column is now on the right hand side. The page itself has a central pane which uses images top, bottom, left and right. Into this pane is added the 'main' and 'column' columns. With the answer you have given above it looks like main and column overlap the edges and the images on the left and right have disappeared and the white backgound to the centre pane has been replaced with grey, which was the page background.

                              Thanks

                              Fatgoth

                              Ok guys i think i have fixed it. I have added the following:

                              Code:
                              #column {
list-style:none;
margin:5px 0 0 485px;
padding:0;
width:170px;
text-align:center;
}
                              Many thanks to both of you for all your help.

                              Fatgoth

                                Comment

                                Previous template Next
                                Working...