Question

So I’ve been playing around with web development and I’ve noticed that in Firefox, my elements are getting pushed to the right versus down, which is what it should be (which happens in Chrome).

I am by no means a Guru. Is there any way to prioritize wrapping versus pushing? I have tried inserting line breaks and setting both to display:block. That does not seem to be the problem.

This is the CSS for the bar:

.tiq-editor-bar
{
    z-index:1;
    overflow:hidden;
    float:left;
    width:100%;
    border-top: solid 1px #AAA;
    text-align:center;
    display:none;
    position:relative;
    color:#AAA;
    font-weight:normal;
    font-size:14px;
}

This is the CSS for the gallery wrapper (the white out-lined thing)

#tiq-ui-gallery-wrapper
{
    min-height: 500px;
    background:url(../img/portfolio/empty.png) center no-repeat;
    overflow:hidden;
}

And for the gallery itself:

.tiq-theme-gallery
{
    width:600px;
    height:400px;
    resize:vertical;
    border:solid 1px #eee;
    overflow:auto;
}

Thanks!

EDIT: The gallery is positioned relatively, BTW. I am using Galleria and that gives the container:

.galleria-container {
    position: relative;
    overflow: hidden;
    background: #000;
    display:block;
}

EDIT EDIT:

Here is a JSFiddle:

http://jsfiddle.net/RyBz9/2/

Answer 1

Change

.tiq-editor-bar
{
    float:left;
}

to

.tiq-editor-bar
{
    float:none;
}