2 replies [Last post]
Jack_mcs
Offline
newbie
Last seen: 18 years 9 weeks ago
Timezone: GMT+5
Joined: 2004-09-26
Posts: 5
Points: 0

I'm trying to create a page with a header and three columns. I want the entire page centered in a box with borders. It looks pretty good in NetScape but in IE (at 800x600), the width of the page is too large and the center text doesn't display. In IE at 1024x768, the text in the right column is displayed outside of the border. Can someone please point out where my mistake is at? I'm trying to learn css and use it when possible. Am I wasting my time setting up a site this way? I know how to do it with tables. Is css, in this case, better or worse than tables? I would appreciate any thoughts on the matter. In my stylesheet I have

#wrapper{
  width: 790px;
  margin: 0 auto;
  text-align: left;
}
#center_Shop_outer {
  background-color: #f8f8f9;
  font-family: Verdana, Arial, sans-serif;
  font-size: 10px;
  border: 2px outset blue;
  padding: 2px;
  text-align: left;  
  margin:0 auto;
}	 

#centerShop_inner {
  background-color: #f8f8f9;
  font-family: Verdana, Arial, sans-serif;
  font-size: 10px;
  border: 2px outset green;  
  text-align: left;  
  margin:0 auto;
}
#header {
  margin: 0;
  color: #000;
  border-bottom: 1px solid #333;
}
#leftcol {
  float: left;
  width: 125px;
  margin-left: 10px;
  margin-top: 0px;
  color: #000;
  padding: 3px;
}
#rightcol {
  position: absolute;
  left: 77%;
  top: 65px;
  width: 140px;
  padding-left: 10px;
  z-index: 3;
  color: #000;
  padding: 3px;
}
#content {
  margin: 0px 25% 0 165px;
  padding: 3px;
  color: #000;
}
and my code appears as
<body >
<div id="wrapper">
<div id="centerShop_outer">
<div id="centerShop_inner">
 
<div id="header">Header
</div>

<div id="leftcol">This is the left column and it's width is set to 125 px's.
</div> 
<div id="content">This is the center column. Place all important information here.  It's width is relative to the size of the screen.
</div> 
<div id="rightcol">This is the right column and it's width is set to 140 px's.
</div> 

</div>
</div>
</div>
 
</body>

Jack

indy_jones
indy_jones's picture
Offline
Regular
USA
Last seen: 18 years 15 weeks ago
USA
Timezone: GMT-5
Joined: 2004-08-16
Posts: 11
Points: 0

Border with div doesn't work

Without seeing your page it sounds like you are suffering from IE's botched handling of the box model.

What happens is IE renders padding as within any element. That is to say that instead of expanding the container based on the padding (as it should) IE keeps the stated width & height and condenses the content.

Here are two tutorials that I have found helpful:
The Box Model Hack
The Mid Pass Filter

Jack_mcs
Offline
newbie
Last seen: 18 years 9 weeks ago
Timezone: GMT+5
Joined: 2004-09-26
Posts: 5
Points: 0

Border with div doesn't work

I was afraid that was the problem. I think I will go back to regular tables for things such as this for now. I appreciate the input and the links. Smile

Jack