This is my CSS code, basically they are all the id of div tags. the bottom two are 2 div tag sitting within the container div. What I am trying to do is to arrange them so the logo stay on the left with float and abstract stay on the right with float.
The goal of these codes are to make sure the heading graphic width is dynamic to the browser width. The logo stay on the left while the abstract portion stays on the right. The middle is filled with repeating graphic. Now the codes work for IE but in Firefox and Safari there is a bug. As I decrease the width of browser, the logo and abstract div would stack on top of each other, making the heading into 2 lines. When I do the same thing in IE, the abstract div would simply stay to the right of the logo. My question is how do I get rid of the stacking for firefox and safari?
Code:
#container {background: url(images/newheading_filler.jpg) repeat; overflow: hidden; width: 100%; z-index:1;}
#logo {background: url(images/newheading.jpg) no-repeat center left; width: 220px; height: 58px; float:left; z-index:1; }
#abstract {background: url(images/newheading.jpg) no-repeat center right; height: 58px; width: 420px; float:right; z-index:1; clear:right; }
