Grow your CSS skills. Land your dream job.

float div element without stacking them

  • # September 8, 2008 at 4:51 pm

    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; }
    # August 10, 2010 at 3:02 pm

    Set the logo and abstract divs to overflow:hidden. Also, get rid of the z-indexes. You don’t need them.

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".