Forum Moderators: not2easy
This works fine, in both firefox and IE, the problem is when I try and add a border using border-style: ridge; it looks fine in IE, but in firefox it adds a few pixals to the divs and makes them larger then they should be. (meaning they overlap where they shouldn't)
it also pushes my floats so they don't fit next to each other when I put a border around the floats, What would be the best way to remedy this? also would it be better to use a table? (i'm trying to go tableless but it's not a necessity)
#maincontent {
background-color: #666666;
width:80%;
height:100%;
}
#rightside{
background-color:#666666;
width:33%!important;
height:100%!important;
border-color:#666666;
float:right;
}
#leftside{
background-color:#666666;
width:67%!important;
height:100%!important;
border-color:#666666;
float:left;
}
#largearea{
background-color:#666666;
border-color:#666666;
width:100%!important;
height:25%!important;
}
<DIV ID=largearea>
<DIV ID=rightside><!-- PICTURE UNDER HERE -->
A Picture will go here
</DIV>
<DIV ID=leftside><!-- START INFO UNDER HERE -->
This is where a news thing for the website will go
</DIV>
</DIV>
A couple of things. You only really need to float one container and put a margin on the other just to ensure it clears that space.
Also make sure you put the id/class names in quotes.
with regard to adding a few pixels to the div thats the w3c spec. so your problem is that ie is in whats called quirks mode and will keep your div the same width but firefox renders it in standards mode so the border is added to the div. you will need a proper doctype to ensure ie 6 renders the site in standards and unfortunately you will need to use one of the various box model hacks to make it work in ie 5/5.5
I am still relatively new to all this so forgive me if i am not to clear or slightly inaccurate.
