SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Member
    Join Date
    Mar 2005
    Posts
    24
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    column dropping - can't see why?

    I hope this is something easy. Column 2 is dropping below column 1, although is spaced properly from left edge. Argh! Neither is floated, so collapsing marging don't seem to be the problem. Perhaps your eye will see my probably silly mistake.

    <!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>markit strategies and pr - client work</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <script language="JavaScript" type="text/JavaScript">
    <!--
    function MM_openBrWindow(theURL,winName,features) { //v2.0
    window.open(theURL,winName,features);
    }
    //-->
    </script>
    <link href="../global/markit_n.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
    <div id="wrapper"> <!-- keep layout tidy -->
    <div id="colorbar"> &nbsp;
    </div> <!-- top green -->
    <div id="topnav"> <!-- navigation as tabs -->
    <ul>
    <li>a list</li>
    <li>goes here</li>
    </ul>
    </div>
    <div id="col1">
    <!-- to the left -->
    <div id="logo">an image
    </div>
    <div id="orange"> some images go in this box<br />
    </div>
    </div>
    <div id="col2"> <!-- to the right -->
    <div id="content">
    <h1>title</h1>
    <p>content</p>
    </div>
    </div>
    <div id="footer">
    <!-- to the bottom -->
    <div class="sidenav">
    <ul>
    <li>a list</li>
    <li>goes here</li>
    </ul>
    <br />
    </div>
    <div id="bottomnav">
    <ul>
    <li>another</li>
    <li>list</li>
    <li>goes here</li>
    </ul>
    <br />
    </div>
    </div>
    </div>
    </body>
    </html>

    some css:
    body {
    margin:0;
    padding:0;
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size: .8em;
    line-height: 1.6em;
    }
    #wrapper {
    position: relative;
    margin: auto;
    background-image: url(../images/colorsb.jpg);
    background-repeat: repeat;
    width: 100%;
    }
    #colorbar {
    background: #898741; /* green top background */
    height: 100px;
    }
    #col1 {
    position: relative;
    width:260px;
    margin: 0;
    padding: 0;
    }
    #logo {
    float: left;
    margin: 24px 0 100px 14px;
    padding: 0;
    }
    #orange {
    width: 130px;
    background-color: #d98927;
    padding: 0;
    margin-left: 145px;
    }
    #orange img {
    padding: 0 0 10px 10px; /* left and bottom so orange shows */
    }
    #col2 {
    min-height: 60%;
    width: 412px;
    background-color: #e9b97f;
    margin-top: -80px;
    margin-left: 278px;
    border: 1px solid #FFFFFF;
    }
    #content {
    margin:12px 24px 0 24px; /* text handling */
    width: 373px;
    }
    #footer {
    background-color:#898741;
    clear:both;
    margin: -40px 0 0 0;
    padding: 0 0 50px 0; /* bottom lets green flow below bottomnav nicely */
    }
    /*
    navigation items
    tabbed now, easier to change in future
    */
    #topnav {
    background: #898741;
    font-size:0.8em;
    text-align:left;
    }
    #topnav ul {
    text-align:left;
    margin: 0;
    padding:10px;
    }
    #topnav ul li {
    list-style-type:none;
    display:inline;
    }
    #topnav ul li a {
    color:#fff;
    padding:3px 10px 3px 10px;
    text-decoration:none;
    text-transform:uppercase;
    }
    #topnav ul li a.this {
    color:#000;
    padding:3px 10px 3px 10px;
    }
    #topnav ul li a:hover {
    padding:3px 10px 3px 10px;
    text-decoration:none;
    }

  2. #2
    Winemaster bronze trophy BonRouge's Avatar
    Join Date
    Oct 2004
    Location
    Sendai, Japan
    Posts
    2,417
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by csleh
    Argh! Neither is floated
    That'll be why they're not positioned side by side.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •