|
JBW -> CSS Header Alignment (3/14/2006 7:51:40)
|
Hi All,
I am trying to build a header using CSS (get rid of tables) but am getting variable results between browsers (IE7/FF on Win). No matter what I try, fixing one problem creates another and so on. In short, I am hoping that somebody will be able to point out where I am going wrong in the following code:
<style type="text/css">
#Header {
width: 100%;
border: #000000 2px solid;
}
.HeaderLeft {
float: left;
clear: right;
border: #000000 2px solid;
}
.HeaderRight {
float: right;
clear: left;
border: #000000 2px solid;
}
</style>
<DIV id="Header">
<DIV class="HeaderLeft"><img src="logo.gif" width="50" height="50"></DIV>
<DIV class="HeaderRight"><a href="">LINK</a></DIV>
</DIV>
<DIV class="Content">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam sed dolor quis erat pharetra pretium. Sed vel neque quis ligula ultricies mattis. Praesent mollis vehicula quam. Morbi pulvinar fringilla eros. Nullam sem magna, sagittis quis, mollis vitae, malesuada nec, sem.
</DIV>
The above code works fine in IE, but FF gives me a totally different result whereby the main header div is collapsed. Which browser is rendering the code correctly and how do I correct the discrepancies? All I am trying to do is create a header with the logo on the left and some links on the right and have all other content fall under the main header div. I have included the border on each div so as to illustrate how each browser renders the pages...
Any help would be greatly appreciated.
John.
|
|
|
|
