Advertisement

01.23.2008 at 11:21PM PST, ID: 23107013 | Points: 250
[x]
Attachment Details

Small indent on center column of 3 column css layout

Asked by dragboatrandy in Cascading Style Sheets (CSS), JavaScript, Internet Explorer Web Browser

Tags: , ,

I am having a problem with a layout that I am trying to accomplish.  The problem only shows up in IE6.  Basically I have a 3 equal columns in a layout, one that floats left, one that floats right, and the other is set by margins in order to float in the middle.  All works fine in both IE7 and FF, but in the center column in IE6, the paragraph portion of the center column appears to have a margin, but I can't seem to remedy it without screwing it up in the newer browsers.

Here is the Layout code for this page.

<div id="contentWrapper">
    <div id="fullColumn">
      <div class="fullcolumnHeadings"><h2>WHATS HOT</h2></div>
      <p>This is the text that is going to be in this box. This is just to see if I can get this stupid thing to work the way I want.</p>
      <div class="fullcolumnFooters"></div>
    </div>      
    <br class="clearFloat" />
  <div id="leftColumn">
      <div class="columnHeadings"><h2>HEADER TEXT HERE</h2></div>
            <p>This is the text that is going to be in this box. This is just to see if I can get this stupid thing to work the way I want.</p>
            <div class="columnFooters"></div>
      </div>
    <div id="rightColumn">
      <div class="columnHeadings"><h2>HEADER TEXT HERE</h2></div>
            <p>This is the text that is going to be in this box. This is just to see if I can get this stupid thing to work the way I want.</p>
        <div class="columnFooters"></div>
      </div>
    <div id="content">
      <div class="columnHeadings"><h2>HEADER TEXT HERE</h2></div>
            <p>This is the text that is going to be in this box. This is just to see if I can get this stupid thing to work the way I want.</p>
        <div class="columnFooters"></div>
      </div>
    <br class="clearFloat" />
  </div>Start Free Trial
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
#contentWrapper p {
	margin: 0px 30px 0px 30px;
	padding: 0 0 0 0;
}
#outerWrapper #contentWrapper #leftColumn {
  float: left;
  margin: 0px 0px 0px 35px; /* Sets the padding properties for an element using shorthand notation (top, right, bottom, left) */
  width: 303px;
  background:url(../images/3rd_back.png);
  background-repeat: repeat-y;
  display: inline;
}
.columnHeadings {
  background:url(../images/3rd_top.png);
  background-position: top;
  background-repeat: no-repeat;
  height: 39px;
  margin: 0px 0px 0px 0px;
  padding: 0px;
}
.columnFooters {
  background:url(../images/3rd_btm.png);
  background-position: bottom;
  background-repeat: no-repeat;
  margin: 0px 0px 0px 0px;
  height: 18px;
}
#outerWrapper #contentWrapper #rightColumn {
  float: right;
  margin: 0px 35px 0px 0px; /* Sets the padding properties for an element using shorthand notation (top, right, bottom, left) */
  width: 303px;
  background:url(../images/3rd_back.png);
  background-repeat: repeat-y;
  display: inline;
}
#outerWrapper #contentWrapper #content {
	margin: 0px 343px 0px 344px;
	padding: 0px 0px 0px 0px;
	background-position: left center;
	background-repeat: repeat-y;
	background-image: url(../images/3rd_back.png);
}
[+][-]01.24.2008 at 02:08AM PST, ID: 20731940

At Experts Exchange, members can ask their questions to thousands of technology professionals, also known as Experts. Experts compete and collaborate to answer those questions by leaving comments like this one.

Start your 7-day free trial to view this Expert Comment or ask the Experts your question.

 
[+][-]01.24.2008 at 09:05AM PST, ID: 20734850

Often, when Experts are collaborating with members who have asked questions, they will request additional information about the problem. Askers respond with an author comment like this one.

Start your 7-day free trial to view this Author Comment or ask the Experts your question.

 
 
Loading Advertisement...
20080716-EE-VQP-32 / EE_QW_2_20070628