Hi,
this code looks fine in firefox but IE it is messed up it does not put the first div accross.
when i take out the "outer" div it works fine.
Any ideas why?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>3 Column Template - CSS</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
#outer {
height:100%;
min-height:100%;
margin-left:126px;
margin-right:126px;
margin-bottom:-28px; /* same as footer +2 */
color: #000000;
}
html>body #outer {
height:auto; /*for mozilla as IE treats height as min-height anyway*/
}
.centre_boxes {
border:1px solid #6B622E;
background-image:url(images/infoback.gif);
padding:0 5px 3px 5px;
font-family:Arial, Helvetica, sans-serif;
font-size: 11px;
color:#000000;
}
html>body .centre_boxes {
padding:0 5px 3px 8px; /* for mozilla */
}
</style>
</head>
<body>
<div id="outer">
<div class="centre_boxes" style="position:absolute; margin-top:126px; left:131px; right:440px; height:215px;">
<p>text</p>
</div>
<div class="centre_boxes" style="position:absolute; right:130px; width:285px; height:215px; margin-top:126px;">
<p>Text</p>
</div>
</div>
</body>
</html>
Thanks in advancestill no luck my end
You didn't specify a width on the left one.
Why did you use absolute positioning?
Floats are often better.
<!-- m --><a class="postlink" href="http://css.maxdesign.com.au/floatutorial/index.htm">http://css.maxdesign.com.au/floatutorial/index.htm</a><!-- m -->
<!-- m --><a class="postlink" href="http://www.brunildo.org/test/#flo">http://www.brunildo.org/test/#flo</a><!-- m -->
<!-- m --><a class="postlink" href="http://www.csscreator.com/attributes/containedfloat.php">http://www.csscreator.com/attributes/containedfloat.php</a><!-- m -->
<!-- m --><a class="postlink" href="http://www.positioniseverything.net/easyclearing.html">http://www.positioniseverything.net/easyclearing.html</a><!-- m -->
<!-- m --><a class="postlink" href="http://www.quirksmode.org/css/clearing.html">http://www.quirksmode.org/css/clearing.html</a><!-- m -->
<!-- m --><a class="postlink" href="http://css-discuss.incutio.com/?page=ClearingSpace">http://css-discuss.incutio.com/?page=ClearingSpace</a><!-- m -->
You should test in a good browsers like Firefox (<!-- m --><a class="postlink" href="http://www.mozilla.org/products/firefox/">http://www.mozilla.org/products/firefox/</a><!-- m -->) and Opera (<!-- m --><a class="postlink" href="http://www.opera.com/">http://www.opera.com/</a><!-- m -->).I did think that, and I have tested in firefox and it works fine, but the problem is it dont work in IE?
Thanks and if you have any more tips let me know.
Thanks KravvitzIE does not support leaving width off absolute positioning and getting width: auto behaviour (<!-- m --><a class="postlink" href="http://css-discuss.incutio.com/?page=AbsoluteLayouts">http://css-discuss.incutio.com/?page=AbsoluteLayouts</a><!-- m -->).
As Kravvitz stated absolute positioning alone is not a good tool for web page layout, though it has uses combined with other methods.
Regards,
DaiHi all again,
I have still had no luck with this. The reason i am using absolute is because i need the right one a fixed width but i need the left one to adjust with the page.
How can I do it using floats???
Thanks
k0r54Put the right column before the left column in the source, float it right, and apply a right margin to the left column.That is SOOO much easier
Thanks for your help!
this code looks fine in firefox but IE it is messed up it does not put the first div accross.
when i take out the "outer" div it works fine.
Any ideas why?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>3 Column Template - CSS</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
#outer {
height:100%;
min-height:100%;
margin-left:126px;
margin-right:126px;
margin-bottom:-28px; /* same as footer +2 */
color: #000000;
}
html>body #outer {
height:auto; /*for mozilla as IE treats height as min-height anyway*/
}
.centre_boxes {
border:1px solid #6B622E;
background-image:url(images/infoback.gif);
padding:0 5px 3px 5px;
font-family:Arial, Helvetica, sans-serif;
font-size: 11px;
color:#000000;
}
html>body .centre_boxes {
padding:0 5px 3px 8px; /* for mozilla */
}
</style>
</head>
<body>
<div id="outer">
<div class="centre_boxes" style="position:absolute; margin-top:126px; left:131px; right:440px; height:215px;">
<p>text</p>
</div>
<div class="centre_boxes" style="position:absolute; right:130px; width:285px; height:215px; margin-top:126px;">
<p>Text</p>
</div>
</div>
</body>
</html>
Thanks in advancestill no luck my end
You didn't specify a width on the left one.Why did you use absolute positioning?
Floats are often better.
<!-- m --><a class="postlink" href="http://css.maxdesign.com.au/floatutorial/index.htm">http://css.maxdesign.com.au/floatutorial/index.htm</a><!-- m -->
<!-- m --><a class="postlink" href="http://www.brunildo.org/test/#flo">http://www.brunildo.org/test/#flo</a><!-- m -->
<!-- m --><a class="postlink" href="http://www.csscreator.com/attributes/containedfloat.php">http://www.csscreator.com/attributes/containedfloat.php</a><!-- m -->
<!-- m --><a class="postlink" href="http://www.positioniseverything.net/easyclearing.html">http://www.positioniseverything.net/easyclearing.html</a><!-- m -->
<!-- m --><a class="postlink" href="http://www.quirksmode.org/css/clearing.html">http://www.quirksmode.org/css/clearing.html</a><!-- m -->
<!-- m --><a class="postlink" href="http://css-discuss.incutio.com/?page=ClearingSpace">http://css-discuss.incutio.com/?page=ClearingSpace</a><!-- m -->
You should test in a good browsers like Firefox (<!-- m --><a class="postlink" href="http://www.mozilla.org/products/firefox/">http://www.mozilla.org/products/firefox/</a><!-- m -->) and Opera (<!-- m --><a class="postlink" href="http://www.opera.com/">http://www.opera.com/</a><!-- m -->).I did think that, and I have tested in firefox and it works fine, but the problem is it dont work in IE?
Thanks and if you have any more tips let me know.
Thanks KravvitzIE does not support leaving width off absolute positioning and getting width: auto behaviour (<!-- m --><a class="postlink" href="http://css-discuss.incutio.com/?page=AbsoluteLayouts">http://css-discuss.incutio.com/?page=AbsoluteLayouts</a><!-- m -->).
As Kravvitz stated absolute positioning alone is not a good tool for web page layout, though it has uses combined with other methods.
Regards,
DaiHi all again,
I have still had no luck with this. The reason i am using absolute is because i need the right one a fixed width but i need the left one to adjust with the page.
How can I do it using floats???
Thanks
k0r54Put the right column before the left column in the source, float it right, and apply a right margin to the left column.That is SOOO much easier
Thanks for your help!