CODEWITHSUNDEEP
htmlcss
ptf
ptf

Reputation: 3380

Overflow:hidden pushes content right

I'm making a small website.

The problem is:

I have an article tag with a set height and width:

.main-content-wrapper article { color: white; margin: auto; overflow: hidden; }
.main-content-wrapper article { width: 980px; height: 457px; font-size: 20px; }

In firefox and safari, when overflow: hidden is set, the entire article is pushed to the right.

With overflow: hidden: overflow:hidden

Without overflow: hidden: enter image description here

Anyone knows why? In chrome, ie10 and opera its just fine.

Link: link removed

Upvotes: 3

Views: 3286

Answers (2)

Marc Audet
Marc Audet

Reputation: 46825

If we take a look at your markup:

<div class="row">
    <div class="content-menu-wrapper">
        <nav id="content-menu">
            <ul>
                <li><a href="./article.html">HVA ER OUTPUT?</a></li>
                <li><a href="./article.html">HVOR ER OUTPUT?</a></li>
                <li><a href="./article.html">NÅR ER OUTPUT?</a></li>
            </ul>
        </nav> <!-- end content-menu -->
    </div> <!-- end content-menu-wrapper -->
</div>

<div class="row">
    <div class="main-content-wrapper">
        <article>
            <p>I love pudding jelly bear claw I love cookie 
               croissant pie.......</p>
        </article>
    </div> <!-- main-content-wrapper -->
</div>

In the first row, you have your content-menu, which has floated elements (<li>), which causes the width of the row to collapse. As a result, the following element with content (<article>), flows to the right of the menu.

You can fix this by adding the following rule to your CSS:

.content-menu-wrapper {
    background: url("../images/menu_background.png") repeat-x scroll 0% 0% transparent;
    overflow: auto:
}

The overflow: auto will take care of the collapsed width and your layout will work.

Fiddle reference: http://jsfiddle.net/audetwebdesign/NEJKj/

Cross-Browser Comment
Firefox seems to handle floats slightly differently from Chrome, IE, Safari/windows, Opera. Someone else may have some insight about this.

Upvotes: 2

Nomak22
Nomak22

Reputation: 123

try to add

float:left;  /* if you want to float this to left side */
margin: 0px auto; /* if you want to center it horizontaly */

sorry for question but why are you using 2 lines with the same selector? :)

Upvotes: 0

Related Questions