SitePoint Sponsor |
|
User Tag List
Results 1 to 5 of 5
-
Jan 21, 2005, 15:37 #1
- Join Date
- Jan 2005
- Location
- Canada
- Posts
- 2
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
2 column layout ~ sidebar DIV content falling below main DIV in IE
I've been working on this for a while and searched the forums for a solution, but my CSS skills are still developing, and I'm not sure what to look for.
In FF and O 7 it works really well, but in IE the left sidebar DIV falls to below the main DIV. Anyone have any idea what I'm missing here?
Take a peek at http://www.jasonprini.com/index3.php
which uses the following css:
/* globals
---------------------------------------------*/
body {
margin:0;
padding:0;
background-color:#000;
font: small "Times New Roman", Times, serif;
min-width:760px;
background: #fff url(../images/b.gif);
font-size: 12px;
}
div#wrap {
background:#fff;
margin:0 auto;
width:760px;
border: 1px solid #999;
border-top: 0px;
background-image: url(../images/bg.gif);
}
/*links
---------------------------------------------*/
a:link {
color: #333333;
}
a:visited {
color: #FF9933;
}
a:hover {
color: #FF9933;
}
a:active {
color: #333333;
}
/* header
---------------------------------------------*/
#header {
background-color:#fff;
background-image: url(../images/jp.jpg);
background-position: right;
background-repeat: no-repeat;
}
#header h1 {
padding:10px 15px 5px;
margin:0;
font-family: Arial, Helvetica, sans-serif;
text-transform: uppercase;
font-weight: bold;
font-size: 22px;
}
/* navigation
---------------------------------------------*/
#nav {
background-color:#fff;
padding:0px;
border-bottom: 1px solid #999;
}
#nav ul{
margin:0;
padding:0;
}
#nav li{
display:inline;
list-style:none;
margin:0;
padding:0;
font-family: Arial, Helvetica, sans-serif;
text-transform: uppercase;
font-size: 12px;
font-weight: bold;
}
#nav a:link, #nav a:visited {
padding: 3px 10px 0px 15px;
color: #000;
background-color: #fff;
text-decoration: none;
}
#nav a:hover {
color: #FF9933;
background-color: #ccc;
}
/* main
---------------------------------------------*/
#main {
padding:0px;
float:left;
width:490px;
}
#main p {
padding: 5px 15px 5px 15px;
}
#main h1 {
padding: 5px 5px 5px 15px;
font-family: Arial, Helvetica, sans-serif;
text-transform: uppercase;
color: #000;
font-weight: bold;
font-size: 22px;
}
/* moblog
---------------------------------------------*/
#moblog {
padding: 10px;
width: 250px;
float:left;
}
/* sidebar
---------------------------------------------*/
#sidebar {
width:267px;
margin-left:490px;
}
/* Correct IE 3px fudge in #sidebar DIV
---------------------------------------------*/
#wrap > #sidebar {
width:270px;
}
/*
---------------------------------------------*/
#sidebar h1 {
padding:5px 10px 0px 0px;
font-family: Arial, Helvetica, sans-serif;
text-transform: uppercase;
text-align:right;
font-weight: bold;
font-size: 12px;
border-bottom: 1px solid #999;
}
#sidebar h3, #sidebar p {
padding:0px 10px;
}
/* footer
---------------------------------------------*/
#footer {
background-color:#fff;
clear:both;
border-top: 1px solid #999;
}
#footer p {
padding:5px;
text-align:center;
margin:0;
}
-
Jan 21, 2005, 15:59 #2
- Join Date
- Feb 2004
- Location
- Scottsdale, Arizona
- Posts
- 909
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
It's because the two things that you're floating next to each other are too wide according to IE. Remember, IE has the broken box model so while things will look fine in browsers that support to correct box model, IE thinks the boxes are too wide to fit in the space you've provided.
Try making them smaller or adding a hack to adjust the width for IE.
-
Jan 21, 2005, 16:46 #3
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
Hi,
maxors right in a way but its not a box model problem its the 3 pixel jog on floats that you haven't fully taken care of.
Code:* html #main{margin-right:-3px} #sidebar { width:270px; margin-left:487px; } /* Correct IE 3px fudge in #sidebar above ---------------------------------------------*/ #wrap > #sidebar { margin-left:490px; } /*
See The FAQ on floats for more info
Paul
-
Jan 21, 2005, 17:15 #4
- Join Date
- Feb 2004
- Location
- Scottsdale, Arizona
- Posts
- 909
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Originally Posted by Paul O'B
-
Jan 22, 2005, 10:23 #5
- Join Date
- Jan 2005
- Location
- Canada
- Posts
- 2
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Thanks a lot for your help! Really apreciate it!
Cheers!
Bookmarks