simple 2 column IE problem - box model?

**tobiass** · Aug 22, 2007 01:21

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>

**all4nerds** · Aug 22, 2007 01:56

Hello

Why not float the content box to the left

#content {
float:left;
background:green;
width:350px;
}

**tobiass** · Aug 22, 2007 02:33

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

User Tag List

Thread: simple 2 column IE problem - box model?

Thread Tools

Display

simple 2 column IE problem - box model?

Bookmarks

Bookmarks

Posting Permissions