Making sure the height of both divs is =

[csa]

Please could someone advise me what you need to do if for example you have to columns, lets say one contains the mainbody of the page and a right column with news, links etc.

The mainbody stretches longer than the rightcolumn and has a border around it. The right column also has a border but as it doesn't contain as much info this doesn't stretch to line up with the bottom of the main body. If I specify a height on the rightcolumn and preview it in IE it works beautifully, however in FF in messes the page up.

What is the correct procedure of setting this up?

Thanks

[ukgeoff]

Lets have a link to the site so we can see what you see.

[csa]

http://www.wesellfudge.co.uk/pt/upload.htm

[ukgeoff]

If you can always guarantee the main column will be larger that the right, one solution might be to have a container div that surrounds both columns with its background colour set to the same as the lower section of the right-hand column.

Take the right and bottom borders off the right-hand column and place them on the container instead.

This should create the illusion that you have two equal columns.

[csa]

Will give this ago thank you.

[masonbarge]

AFAIK what you want is currently impossible. Uge's method is what I use. If you want a border between columns, put it on the longer one.

Another, dirtier method is to set the text color to the background and add text until the columns are equal.

[herkalees]

http://www.alistapart.com/articles/fauxcolumns/

[csa]

I've amended this now but still have an issue with my borders.

http://www.wesellfudge.co.uk/pt/upload.htm

The right hand border appears in IE but not FF, I've messed about with the padding here and there but it still doesn't make a difference. Any ideas?

Code: Select all

/* CSS Document */
body {
margin:0px; 
padding:0px; 
font: .7em verdana, arial, sans-serif;
background-image:url(images/topline.gif);
}
.cssnav
{
position: relative;
font-family: arial, helvetica, sans-serif;
background: url(images/productsroll.jpg) no-repeat;
white-space: nowrap;
display: block;
width: 72px;
height: 82px;
margin: 0;
padding: 0;
padding: 0;
float:left;
}
.cssnav a
{
display: block;
color: #000000;
font-size: 11px;
width: 72px;
height: 82px;
display: block;
float: left;
color: black;
text-decoration: none;
padding: 0;
float:left;
}
.cssnav img
{
width: 72px;
height: 82px;
border: 0
}
* html a:hover
{
visibility:visible
}
.cssnav a:hover img
{
visibility:hidden
}
.cssnav span
{
position: absolute;
left: 55px;
top: 50px;
margin: 0px;
padding: 0px;
cursor: pointer;
} 
.cssnav2
{
position: relative;
font-family: arial, helvetica, sans-serif;
background: url(images/technologyroll.jpg) no-repeat;
white-space: nowrap;
display: block;
width: 93px;
height: 82px;
margin: 0;
padding: 0;
float:left;
}
.cssnav2 a
{
display: block;
color: #000000;
font-size: 11px;
width: 93px;
height: 82px;
display: block;
float: left;
color: black;
text-decoration: none;
float:left;
}
.cssnav2 img
{
width: 93px;
height: 82px;
border: 0;
float:left;
}
{
visibility:visible;
}
.cssnav2 a:hover img
{
visibility:hidden
}
 
.cssnav3
{
position: relative;
font-family: arial, helvetica, sans-serif;
background: url(images/distributorroll.jpg) no-repeat;
white-space: nowrap;
display: block;
width: 139px;
height: 82px;
margin: 0;
padding: 0;
float:left;
}
.cssnav3 a
{
display: block;
color: #000000;
font-size: 11px;
width: 139px;
height: 82px;
display: block;
float: left;
color: black;
text-decoration: none;
float:left;
}
.cssnav3 img
{
width: 139px;
height: 82px;
border: 0;
float:left;
}
{
visibility:visible;
}
.cssnav3 a:hover img
{
visibility:hidden
}
.cssnav4
{
position: relative;
font-family: arial, helvetica, sans-serif;
background: url(images/aboutusroll.jpg) no-repeat;
white-space: nowrap;
display: block;
width: 73px;
height: 82px;
margin: 0;
padding: 0;
float:left;
}
.cssnav4 a
{
display: block;
color: #000000;
font-size: 11px;
width: 73px;
height: 82px;
display: block;
float: left;
color: black;
text-decoration: none;
float:left;
}
.cssnav4 img
{
width: 73px;
height: 82px;
border: 0;
float:left;
}
* html a:hover
{
visibility:visible
}
.cssnav4 a:hover img
{
visibility:hidden
}
.cssnav5
{
position: relative;
font-family: arial, helvetica, sans-serif;
background: url(images/contactusroll.jpg) no-repeat;
white-space: nowrap;
display: block;
width: 83px;
height: 82px;
margin: 0;
padding: 0;
float:left;
}
.cssnav5 a
{
display: block;
color: #000000;
font-size: 11px;
width: 83px;
height: 82px;
display: block;
float: left;
color: black;
text-decoration: none;
float:left;
}
.cssnav5 img
{
width: 83px;
height: 82px;
border: 0;
float:left;
}
{
visibility:visible;
}
.cssnav5 a:hover img
{
visibility:hidden
} 
.cssnav6 img
{
width: 253px;
height: 82px;
border: 0;
float:left;
}
.cssnav7
{
position: relative;
font-family: arial, helvetica, sans-serif;
background: url(images/homeroll.jpg) no-repeat;
white-space: nowrap;
display: block;
width: 59px;
height: 82px;
margin: 0;
padding: 0;
float:left;
}
.cssnav7 a
{
display: block;
color: #000000;
font-size: 11px;
width: 59px;
height: 82px;
display: block;
float: left;
color: black;
text-decoration: none;
float:left;
}
.cssnav7 img
{
width: 59px;
height: 82px;
border: 0;
float:left;
}
{
visibility:visible;
}
.cssnav7 a:hover img
{
visibility:hidden
}
div#navigationwrapper {
width:772px; margin-left:auto; margin-right:auto; 
background-color:#CFC;
background-image:url(images/topline.gif);
border:#FFF solid;  border-width: 0px 2px  0px 2px;
}
div#mainwrapper {
width:774px; margin-left:auto; margin-right:auto; 
background-color:#8899B5;
border:#FFF solid;  border-width: 0px 0px  0px 0px;
}
div#bodywrapper {
width:774px;
background-color:#8899B5;
border:#FFF solid;  border-width: 0px 2px  2px 0px;
}
/* body content */
div#mainbody{
width: 504px;
background-image:url(images/bodyimage.jpg);
background-color:#D0D1D5;
float:left;
border:#FFF solid;  border-width: 2px 2px  0px 2px;
padding:0 0 5px 0
}
div#sidebody{
width: 266px;
background-color:#8899B5;
float:left;
border:#FFF solid;  border-width: 2px 0px  0px 0px;
}
p{
width: 480px;
padding-top: 0px;
padding: 0px 10px;
color:#333333;
}
h1{
padding-top: 140px;
padding-left: 10px;
font-size:14px;
font-weight:bold;
}
/* footer content */
div#footer{
width:776px;
background-color:#FFFFFF;
clear:both;
font-size:10px;
color:#666666;
text-align:center;
padding: 5px 0px 5px 0px;
}
#footer a:link {
 font-family: Verdana, Arial, Helvetica, sans-serif;
 font-size: 10px;
 color: #666666;
 text-decoration: none;
}
#footer a:visited {
 font-family: Verdana, Arial, Helvetica, sans-serif;
 font-size: 10px;
 color: #666666;
 text-decoration: none;
}
#footer a:hover {
 font-family: Verdana, Arial, Helvetica, sans-serif;
 font-size: 10px;
 color: #666666;
 text-decoration:underline;
}
#footer a:active {
 font-family: Verdana, Arial, Helvetica, sans-serif;
 font-size: 10px;
 color: #666666;
 text-decoration: none;
}
/* right content */
div#logo{
width: 266px;
background-color:#24408D;
}
div#mailinglist{
position:relative;
width: 266px;
background-color:#628676;
}
p#mailinglisttext{
position:relative;
font-weight: bold;
width: 220px;
background-color:#628676;
color:#FFFFFF;
padding-top: 5px;
}
p#mailinglisttext2{
position:relative;
width: 220px;
background-color:#628676;
color:#FFFFFF;
padding-top: 5px;
}
.joinhere{
width: 80px;
padding-left: 10px;
}
div#latestnews{
width: 266px;
background-color:#DCDCDD;
}
p#latestnewstext{
width: 220px;
color:#24408D;
font-weight: bold;
padding-top: 5px;
}
p#latestnewlinks{
width: 220px;
color:#24408D;
}
ul{
}
div#links li{
width: 220px;
text-align:left;
list-style-type: none;
margin:0px 0px 0px -32px;
line-height: 18px;
}
div#flash{
width: 243px;
}

[ukgeoff]

I'm pretty sure what you are experiencing is the difference between how IE and FF & Opera interprit the box model.

You will need to set widths for FF & Opera which will work for other complian browsers as well and then tweak the widths for IE.

BTW. You have some spurious entries in you css file such as

{
visibility:visible;
}

but no class or id name.

I think there is some scope to refine your css as well.