column causes footer to move 1

[Jpln]

I have a three column layout with a banner and a footer. Everything looks fine in Mozilla, however in IE, the column pushes the right margin and the footer out to the right so that the footer is detached from the right border and the footer text is pushed over to the left so the beginning text cannot be viewed.

This is my first CSS layout, so it's likely I'm missing something obvious. I have pasted the CSS code below and would be grateful for any help.

Thanks
Amanda

1 body{
2 background-color: #DBE7FB;
3 color: #666666;
4 font-family: Verdana, Arial, Helvetica, sans-serif;
5 margin: 0;
6 padding: 0;
7 text-align: center;
8 font-size:100%;
9 }
10
11 #wrapper{
12 width: 770px;
13 background-color: #FFFFFF;
14 margin: 10px auto;
15 border: 1px solid #000000;
16 text-align:left;
17 }
18
19 #banner{
20 height: 115px;
21 background-image: url(../images/okay_banner_fade.jpg);
22 background-repeat: no-repeat;
23 }
24 #content{
25 background-color: #FFFFFF;
26 color: #000066;
27 margin-left: 20px;
28 margin-bottom: 20px;
29 float:left;
30 width:50%;
31 }
32
33 #content p{
34 font-size: 80%;
35 margin: 20px;
36 }
37
38 #content h1{
39 font-size: 130%;
40 color: #003366;
41 padding: 0;
42 margin: 20px;
43 }
44
45 #content h2{
46 font-size: 130%;
47 color: #003366;
48 padding: 0;
49 margin: /*100px 0 0*/ 20px;
50 }
51
52 .leftimage{
53 float: left;
54 margin-right: 10px;
55 border: 1px solid #000000;
56 }
57
58 .rightimage{
59 margin-bottom: 20px;
60 float: right;
61 margin-left: 15px;
62 border: 1px solid #000000;
63 }
64
65 .clearit{
66 clear: right;
67 /*display: block;*/
68 }
69


70
71 #footer{
72 border-top: 1px solid #000000;
73 background-color: #C9CFE0;
74 color: #000000;
75 clear: both;
76 }
77
78 #footer p{
79 padding: 10px;
80 margin: 0;
81 font-size: 70%;
82 }
83
84 #leftcol{
85 margin: 20px 0px 10px 15px;
86 width: 100px;
87 background-color: #FFFFFF;
88 float: left;
89 }
90 #rightcol{
91 margin-right: 10px;/*was 10)*/
92 margin-top: 10px;
93 width: 240px;
94 background-color: #FFCC00;
95 float: right;
96 }
97
98 #content p.right{
99 float: right;
100 }
101 .container{
102 width: 100%;
103 float:right;
104 background-color: #FFFFFF;
105 }
106
107 /************** #Left column nav **************/
108 #leftcol #nav{
109 background-color:#FFFFFF;
110 font:Arial, Helvetica, sans-serif;
111 font-size: 65%;
112 }
113
114 #leftcol #nav ul{
115 background-color: #EDF2F8;
116 padding: 0;
117 margin: 0;
118 list-style-type: none;
119 }
120
121 #leftcol #nav ul li{
122 padding: 0;
123 margin: 0;
124 border-bottom: 1px solid #ACB1CC;
125 }
126
127 #leftcol #nav ul li a{
128 color: #55649D;
129 display: block;
130 padding: 4px 0 6px 4px;
131 text-decoration: none;
132 height: 1%;
133 }
134
135 #leftcol #nav ul li a:hover, #nav ul li a:focus{
136 color: #FFFFFF;
137 /* background-color:#D6D8E9;*/
138 background-color: #8EAED2;
139 }


140 /************** #Right column nav **************/
141 #rightcol #navr{
142 background-color:#FFFFFF;
143 font:Arial, Helvetica, sans-serif;
144 font-size: 65%;
145 }
146
147 #rightcol #navr ul{
148 padding: 0;
149 }
150
151 .adbox{
152 padding: 0px 2px 2px 20px;/*2px 4px 2px 0px;*/
153 margin: 0 0.5em 10px 0.5em;
154 border:1px dotted #b1b1b1;
155 background-color:#FFFFFF;

 

[dwarfthrower]

it's likely I'm missing something obvious

Yup... the HTML code you're using or a link to the page in action. The CSS only tells half the story, and without seeing how those styles are implemented there's not much anyone can tell you about what could be wrong.

_{Never be afraid to share your dreams with the world.
There's nothing the world loves more than the taste of really sweet dreams.}

 

[Jpln]

Sorry! forgot the HTML code. I won't be in front of the machine with the web design on until later - will I need to repost the message?

 

[dwarfthrower]

Just append it to the bottom of this one and it will bump it to the top of the list.

_{Never be afraid to share your dreams with the world.
There's nothing the world loves more than the taste of really sweet dreams.}

 

[Jpln]

here is the HTML code: Thanks for your help.

<!-- start wrapper -->
<div id="wrapper">
<!-- start banner -->
<div id="banner"></div>
<!--start left col-->
<div id="leftcol">
<!--start side nav-->
<div id="nav">
<ul>
<li><a href="#">xxxxxx</a></li
><li><a href="#">xxxxxx</a></li
><li><a href="#">xxxxxx</a></li
></ul>
<!-- end side nav -->
</div>
<!--end leftcol-->
</div>
<!-- start content -->
<div id="content">
<!-- Begin the content container class div -->
<div class="container">
<h1>Page Header Text</h1>
<p>this is a container test piece of text</p>
<p>this is a container test piece of text</p>
<p>this is a container test piece of text</p>
<!-- End the content container div -->
</div>
<!-- end content -->
</div>
<div id="rightcol">
<br/>
<div class="adbox"><p><img src="images/PicArchives.png" /></p></div>
<div class="adbox"><img src="images/pdf_icon.gif"/></div>
<div class="adbox"><h2>key facts</h2>
<div id="navr">
<ul>
<li><a href="#">xxxxxx</a></li ><li><a href="#">xxxxxx</a></li
><li><a href="#">xxxxxx</a></li
></ul>
</div>
</div>

</div>
<div class="clearit" id="footer">
<p>2005 Test company Ltd | legal notice </p>
</div>
<!-- end wrapper -->
</div>
</body>
</html>

 

[dwarfthrower]

Looks like just an inconsistency between the way different browsers are rendering various things.

Dropping the width of rightcol down to 220px worked for me:

 #rightcol{
 margin-right: 10px;/*was 10)*/
 margin-top: 10px;
 /** width: 240px; **/
 width: 220px;
 background-color: #FFCC00;
 float: right;
 }

_{Never be afraid to share your dreams with the world.
There's nothing the world loves more than the taste of really sweet dreams.}

 

[Jpln]

Excellent. Thanks.