Hello
I have actually found a solution here:-
http://www.positioniseverything.net/articles/onetruelayout/equalheight
Best regards
David
Hello
I wonder if there is a way - using CSS only - to get FF to display the page correctly.
A very simple design: a container has left column + middle column + 2 right columns.
IE displays it as required:- all columns are equal in length, stretching to the longest one.
In FF, the middle column crosses all the other columns and the page frame.
I have tried google and found a suggested method called "clearfix:after" but it didn't work for me - having tried to put the "clearfix.after" div in different places. It is not ioncluded in the code below.
Please note that the colours are there just to illustrate the problem.
Any suggestion please?
........................................
// the code //
........................................
<html>
<style>
html, body{height:100%;}
body{padding:0px;margin:0px; text-align: center;}
.mainFrame{
/* width: 780px; */
width: 1000px;
min-height:100%;
height: 100%;
background: white;
border: 5px solid #CCCCCC;
margin:auto;
}
html>body .mainFrame {width:994px; height: auto;}
.wrapper {
position: relative;
width:960;
height: auto;
background: gray;
}
.container {
height:100%;
}
.left{
position: relative;
float:left;
width:93px;
height:100%;
background:blue;
min-height:100%;
}
.middle{
position: relative;
float:left;
width:770px;
margin-left:3px;
background:red;
}
.right2{
position: relative;
float:left;
width:53px;
margin-left:3px;
height:100%;
background:yellow;
}
.right1{
position: relative;
float:left;
width:10px;
margin-left:2px;
min-height:100%;
height:100%;
background:cyan;
}
</style>
<DIV class=mainFrame align=center>
<div class='wrapper'>
<div class='container'>
<div class='left'> </div>
<div class ='middle'>
content ......... <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
content ......... <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>
<div class='right2'> </div>
<div class='right1'> </div>
</div>
</div>
</div>
</body>
</html>
[Non-text portions of this message have been removed]
web-design@yahoogroups.com is sponsored, owned, and founded by Technogypsie Designs (formerly Wandering Leaf Designs)
~etching your presence on the web
leafworks@yahoo.com
To unsubscribe or change your settings:
Please go to http://www.yahoogroups.com
- login, - choose group to modify, - change to unsubscribe,
web only, digest, or single post mode
By email: send a email from your email address receiving this
post to web-design-unsubscribe@yahoogroups.com
0 comments:
Post a Comment