CODEWITHSUNDEEP
htmlcsslayout
NullBy7e
NullBy7e

Reputation: 546

Floating Div Breaks out on Zoom

I have a sidebar with float: left, in that sidebar is a box with some text in it. Right next to the sidebar is a wrapper that has content in it. If I zoom in everything gets sized nicely but the sidebar breaks and jumps to the middle of the wrapper if I zoom it to max. Actually with my navbar, the last item also breaks and appears under the navbar...

Check out a demo here ( sorry if this is not allowed ): http://www.ascendvault.com

HTML

<div id="navbar">
    <div id="navbar_items">
        <div class="navbar_item"><a href="#">HOME</a></div>
        <div class="navbar_item"><a href="#">GUIDES</a></div>
        <div class="navbar_item"><a href="#">NPC</a></div>
        <div class="navbar_item"><a href="#">ENEMIES</a></div>
        <div class="navbar_item"><a href="#">ITEMS</a></div>
        <div class="navbar_item"><a href="#">SPELLS</a></div>
        <div class="navbar_item"><a href="#">COMMUNITY</a></div> <!-- this falls under #navbar on max zoom -->
    </div>
</div>  
<div id="sidebar"><!-- the sidebar appears on the content_wrapper on max zoom -->
    <div class="side_box"> 
        <div class="side_box_title"><span>VAULT FEED</span></div>
        <div class="side_box_content"></div>
    </div>
</div>
<div id="content_wrapper">
    <div id="content_wrapper_middle">
        <%content%>
    </div>
    <div id="content_wrapper_bottom">
        <div id="footer"></div>
    </div>
</div>

CSS

#navbar {
    height: 30px;
}


.navbar_item {
    float: left;
    padding-top: 5px;
    padding-left: 10px;
    padding-right: 10px;
}

#sidebar {
    max-width: 200px;
    margin-top: 1%;
    margin-left: 1%;
    float: left;
}

#content_wrapper {
    margin-left: 230px;
    margin-right: 25px;
    margin-top: 1%;
}

Upvotes: 1

Views: 2743

Answers (2)

Giovanni Silveira
Giovanni Silveira

Reputation: 1281

Your problem is lying on your measurements. You are using some margins in %, some in px, and a width in px. At some point, 1% + 200px will be more than the margin of 230px you have for your #content_wrapper. Why is that a block without a width? And why not make them all use % if you want a responsive site?

Upvotes: 0

Jason Aller
Jason Aller

Reputation: 3652

It is the content of the navbar overflowing that causes the left floated sidebar to "catch" on the overflow and jump over. Making the navbar able to handle increased height, or hide the overflow (less desirable), would fix this.

Upvotes: 1

Related Questions