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

Layout problem that works in IE but not in Firefox

P: 1
I have watered down the layout I intend to achieve, which is 2 columns that are dynamic, 33% and 67% of available width, and a third column that is 200 pixels.

http://www.cs.lewisu.edu/~ongni/usjo...sign/test3.htm

The structure hold in IE, but totally breaks down in Firefox.

Thanks in advance for the help.
Apr 16 '07 #1
Share this Question
Share on Google+
5 Replies


basstradamus
P: 11
Hi there

Try that, it works fine in FF and IE6,7 as well

.co12 {
margin-right:200px;
}

bye
Apr 17 '07 #2

jhardman
Expert 2.5K+
P: 3,405
I have watered down the layout I intend to achieve, which is 2 columns that are dynamic, 33% and 67% of available width, and a third column that is 200 pixels.

http://www.cs.lewisu.edu/~ongni/usjo...sign/test3.htm

The structure hold in IE, but totally breaks down in Firefox.

Thanks in advance for the help.
I can't believe that took me so long!
[html]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>test page</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
#container {
margin: 0px;
padding: 0px;
width: 100%;
clear: both;

}

.co1 {
width: 33%;


background-color: #00CCFF;
}
.co2 {


position: absolute;
top: 0px;
right: 0px;
width: 67%;
background-color: #0066FF;


}
.co3 {
width: 200px;
position: absolute;
right: 0px;
top: 0px;
background-color: #00FFFF;

}
.co12 {
width: auto;
position: absolute;
left: 0px;
top: 0px;
margin-right: 200px;
}

body {
color: #333333;
background-color: #dcebff;
margin: 0;
padding: 0px 5px;
font-size: 0.9em;
}
</style>
</head>
<body>
<div id="container">
<!---containder Start-->
<div id="content">


<div class="co3">
Column 3 width 200 x xx x x x xxx x x x. Column 3 width 200 x xx x x x xxx x x x. Column 3 width 200 x xx x x x xxx x x x. Column 3 width 200 x xx x x x xxx x x x. Column 3 width 200 x xx x x x xxx x x x. Column 3 width 200 x xx x x x xxx x x x. Column 3 width 200 x xx x x x xxx x x x. Column 3 width 200 x xx x x x xxx x x x. Column 3 width 200 x xx x x x xxx x x x. Column 3 width 200 x xx x x x xxx x x x.
</div>

<div class="co12">
<div class="co1">
Column 1 33% content xx x xx xx x xxx. Column 1 content xx x xx xx x xxx. Column 1 content xx x xx xx x xxx. Column 1 content xx x xx xx x xxx. Column 1 content xx x xx xx x xxx. Column 1 content xx x xx xx x xxx. Column 1 content xx x xx xx x xxx. Column 1 content xx x xx xx x xxx. Column 1 content xx x xx xx x xxx. Column 1 content xx x xx xx x xxx. Column 1 content xx x xx xx x xxx.
</div>
<div class="co2">
Column 2 67% content xyz xyzx kjl; udoisf sjdld. Column 2 content xyz xyzx kjl; udoisf sjdld. Column 2 content xyz xyzx kjl; udoisf sjdld. Column 2 content xyz xyzx kjl; udoisf sjdld. Column 2 content xyz xyzx kjl; udoisf sjdld. Column 2 content xyz xyzx kjl; udoisf sjdld. Column 2 content xyz xyzx kjl; udoisf sjdld. Column 2 content xyz xyzx kjl; udoisf sjdld. Column 2 content xyz xyzx kjl; udoisf sjdld. Column 2 content xyz xyzx kjl; udoisf sjdld. Column 2 content xyz xyzx kjl; udoisf sjdld. Column 2 content xyz xyzx kjl; udoisf sjdld.
</div>
</div>


</div><!--content end-->
</div>
</body>

</html>

[/html]
Apr 18 '07 #3

jhardman
Expert 2.5K+
P: 3,405
It seriously felt like it took me an hour. It appears that IE incorrectly interprets "float: right;" as "position: absolute; right: opx;". Any way, I just put the 200px div "position: absolute; right: 0px;" and I put the other two divs inside a secondary container div with a right margin of 200px.

Let me know if it helps.

Jared
Apr 18 '07 #4

basstradamus
P: 11
Positioning in your style is unnescessary. I change only class .co12 in the style definition and layout looks how it should look.

.co12 {
margin-right:200px;
}
Apr 18 '07 #5

drhowarddrfine
Expert 5K+
P: 7,435
This is incorrect:
<style>

Should be:
<style type="text/css">
Apr 18 '07 #6

Post your reply

Sign in to post your reply or Sign up for a free account.