By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,200 Members | 1,568 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,200 IT Pros & Developers. It's quick & easy.

firefox, ie put different padding in two-column-with-footer layout

P: n/a
I'm pursuing the holy grail of creating a two-column CSS layout with
footer AND where the colors of the columns actually go all the way
down.

The code is below.

Here is a graphic of how it looks in each IE and FIREFOX:
http://www.tanguay.info/web/examples...xIeProblem.png

Does anyone have any idea what I might try to get both IE and FIREFOX
to render this layout similarly? I've noticed that Explorer has
problems with padding many times, but don't know how to fix this one.

Thanks,

Edward Tanguay
All my projects: http:/www.tanguay.info

---

<head>

<style>

#siteWrapper {
position:relative;
text-align:left;
background:lightgreen url("images/rightBackgroundGrey.png") repeat-y
top right;
width:760px;
}

#contentWrapper {
position:relative;
text-align:left;
background:lightgreen url("images/rightBackgroundGrey.png") repeat-y
top right;
width:760px;
}
#rightcol {
position:relative;
float:right;
width:220px; /* for IE5/WIN */
voice-family: "\"}\"";
voice-family:inherit;
width:200px; /* actual value */
}

#centercol {
position:relative;
width:560px;
}
#footer {
position:relative;
background-color:beige;
text-align:center;
clear:both;
}

#main p {
margin: 0;
}

</style>
</head>

<body>

<div id="siteWrapper">

<div id="contentWrapper">

<div id="rightcol">
<p>This can be text that explains things on the right.</p>
</div>

<div id="centercol">
<p>Issues with this layout:</p>
<p>No matter how much texch text you add to this center area, the
columns left and right expand around it, hard to do in CSS actuallyNo
matter how much text you add to this center area, the columns left and
right expand around it, hard to do in CSS actuallyNo matter how much
text you add to this center area, the columns left and right expand
around it, hard to do in CSS actuallyNo matter how much text you add to
this center area, the columns left and right expand around it, hard to
do in CSS actuallyNo matter how much text you add to this center area,
the columns left and right expand around it, hard to do in CSS
actually.</p>
</div>
</div>

<div id="footer">
<p>The is the footer where you can put in some kind of phrase or
more links, etc.</p>
</div>

</div>

</body>
</html>

Aug 3 '06 #1
Share this Question
Share on Google+
2 Replies


P: n/a
On 2006-08-03, Edward wrote:
I'm pursuing the holy grail of creating a two-column CSS layout with
footer AND where the colors of the columns actually go all the way
down.

The code is below.

Here is a graphic of how it looks in each IE and FIREFOX:
http://www.tanguay.info/web/examples...xIeProblem.png

Does anyone have any idea what I might try to get both IE and FIREFOX
to render this layout similarly? I've noticed that Explorer has
problems with padding many times, but don't know how to fix this one.
See: <http://cfaj.freeshell.org/testing/edward.html>
--
Chris F.A. Johnson <http://cfaj.freeshell.org>
================================================== =================
Author:
Shell Scripting Recipes: A Problem-Solution Approach (2005, Apress)
Aug 3 '06 #2

P: n/a
Whenever I have issues with margins and padding I always kick off with
the following code:

margin: 0px;
padding: 0px;
border: 0px;

Basically my first goal is to get them looking the same (which this
should do).

I then build up from there.

One note about an IE bug that might catch you out on these - if you
float and have a margin on the same side as the float (eg float: right;
margin-right: 10px; or float:left; margin-left: 10px;) IE will double
the margin for some reason. To get round this issue use display:inline
in the item in the id/class in question.

Hope that this helps mate!

Regards,

Rick

Aug 4 '06 #3

This discussion thread is closed

Replies have been disabled for this discussion.