SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Aug 2007
    Location
    Stockholm, Sweden
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    simple 2 column IE problem - box model?

    Hello
    This is my first post in this forum, so Iīll start with a short presentation.

    My name is Tobias Strollo, and I live in Stockholm, Sweden. I have long experience of web-design (about 10 years) but NOT so long, with web-programming. I have been spoiled working with great coders, but now that I started freelancing - I have to do all of that myself :-p. Iīve got some basic skills, but, still, thereīs lots I donīt get. But, from what Iīve seen, there are lotīs of skilled people here, so with some help from you guys (and girls), shortly - Iīll be the one answering questions (instead of asking them :-), ok, now I bored you enough

    QUESTION
    I have a 2 column design. Total width of 710 pixels. One column floats right, , the other one has a 360 right-margin, which gives a space of 10 px inbetween the columns. My problem is in Explorer, when I place the same image I have in the right div, on the left side, the image "slips" down:
    http://www.tobiasstrollo.se/xfyz/index_alt_bg.html

    It must be something with the image, because with only text, it stays where it should be(top aligned):
    http://www.tobiasstrollo.se/xfyz/index_alt_bg2.html

    Any Idea what Iīm doing wrong?
    Thanx
    /Tobi


    The css
    <code>
    /* STANDARD ELEMENTS
    --------------------------------------------------------------------------*/
    * {
    margin: 0;
    padding: 0;
    border: 0;
    }

    body {
    background: #fff url(img/bg.jpg);
    color: #333;
    font: normal 62.5% "georgia", sans-serif;
    margin: 0;
    line-height: 1.7em;
    color: #fff;
    }

    a.frameit {
    padding: 20px 5px;
    background: url(img/bgbild.gif) no-repeat;
    height: 203px;
    display: block;}





    /* TYPOGRAFY
    --------------------------------------------------------------------------*/
    h1 { font-family: georgia, times, sans-serif;
    font-size: 5.0em;
    font-weight: normal;
    line-height: 1em;
    }

    p { font-size: 1.3em;
    font-weight: normal;
    padding: 0 0 10px 0;
    }

    p a { background: #00ccff;
    color: #333;
    text-decoration: none;
    }

    p a:hover { background: none;
    color: #333;
    text-decoration: underline;
    }



    /* PAGE LAYOUT
    --------------------------------------------------------------------------*/

    #page-container {
    width: 710px;
    margin: auto;
    }

    #header {
    background: blue;
    height: 300px;
    }

    #sidebar-a {
    background: darkgreen;
    float: right;
    width: 350px;

    }

    #content {
    background: green;
    margin-right: 360px;

    }

    #footer {
    clear: both;
    background: orange;
    height: 66px;
    }
    </code>

    And the html with the image slipping down
    <code>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
    <head>
    <meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
    <title>CompanyName - PageName</title>
    <meta http-equiv="Content-Language" content="en-us" />



    <meta name="description" content="Description" />
    <meta name="keywords" content="Keywords" />

    <meta name="author" content="Enlighten Designs" />

    <style type="text/css" media="all">@import "master.css";</style>
    </head>

    <body class="services">

    <div id="page-container">



    <div id="header"><h1>Tobias Strollo</h1></div>

    <div id="sidebar-a">
    <a href="#" class="frameit"><img src="img/masen_poster.jpg" width="340" height="160" alt="" /></a>
    </div>

    <div id="content">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam gravida enim ut risus.
    Praesent sapien purus, ultrices a, varius ac, suscipit ut, enim. Maecenas in lectus.
    Donec in sapien in nibh rutrum gravida. Sed ut mauris. Fusce malesuada enim vitae lacus
    euismod vulputate. Nullam rhoncus mauris ac metus. Maecenas vulputate aliquam odio.
    Duis scelerisque justo a pede. Nam augue lorem, semper at, porta eget, placerat eget,
    purus. Suspendisse mattis nunc vestibulum ligula. In hac habitasse platea dictumst.

    </div>

    <div id="footer">Footer</div>

    </div>

    </body>
    </html>
    </code>

  2. #2
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello

    Why not float the content box to the left
    #content {
    float:left;
    background:green;
    width:350px;
    }

  3. #3
    SitePoint Member
    Join Date
    Aug 2007
    Location
    Stockholm, Sweden
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Beautiful!
    It wasnīt harder than that - works just fine! Like I mentioned, Iīm still trying to get my head around this css layout stuff.. (I use to code back in the 90īs - tables - so Iīm trying to forget all about that)

    Really apreciate your answer all4nerds - thanks a million!
    Kindly
    /Tobias


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
  •