Search code examples
htmlcssalignmentcss-floatwindow-resize

Float right only works after window resize

It's just incomprehensible! I have a div in the right side (DIV1) and another div next to it on the left (DIV2) and I want to put some elements in DIV2 aligned right.
Here's the image : Floating problem

Here's the HTML :

<section id='main-container'>
    <aside id='main-side'>

    </aside>
    <nav id='main-nav'>
        hello
    </nav>
    <section id='main-content'>

    </section>
</section>

And the CSS :

#main-side {
    width:250px;
    min-height:450px;
    border:1px solid silver;
    float:right;
}
#main-nav {
    width:770px;
    height:50px;
    text-align:right;
    border:1px solid silver;
    margin-right:251px;
}

The problem as you see in the image is that when I open the page or reload the page the content of DIV2 doesn't go to the right but when I resize the window it goes to the right as I expect. By the way the browser is Chrome and the problem is not in Firefox. Any idea what's the problem?

Solution

  • When I was testing it from your site, I was getting the same issue. By removing width: 770px; from your #main-nav section, I was able to get it working properly.