Alignment

[antijoke]

So I'm trying to just create a mock up design and I'm having an issue with getting one of my divs to align in the centre

#animation {
width: 903px;
margin-right: auto;
margin-left: auto;
height: 120px;
background-color: #000;
position: fixed; left: 232px;

}

Now I understand the reason it doesn't line up with my nav div which is below because #nav is set to be centered with auto margin, but as you can see here I have other divs with-in the animation div.

#nav {
width: 903px;
text-decoration: none;
background-color: #000;
color: #738791;
margin-right: auto;
margin-left: auto;
height: 40px;
}

How can I get animation div centered so it looks right at any resolution like the nav div without effecting the divs within #animation?

Sorry if this isn't very clear.

 

[GravyMonster]

The problem is because your #animation div is absolutely positioned. The margin: 0 auto trick only works with relative/static divs.

As a workaround you need to wrap #animation in another div which is relatively positioned. Try this:

<div id="animation-wrapper">
    <div id="animation">
        <div id="red"></div>
        <div style="height: 2px;" id="blue"></div>
        <div style="height: 2px;" id="yellow"></div>
        <div style="height: 2px;" id="green"></div>
    </div>
</div>

And this CSS:

#animation-wrapper {
    margin: 0 auto;
    overflow: auto;
    position: relative;
    width: 903px;
}

#animation {
    background-color: #000000;
    height: 120px;
}

Also, as an aside you can massively DRY up your jQuery which deals with the animation like this:

<div id="nav">
    <a class="nav-item" data-column="red" href="index.php">Home</a>
    |
    <a class="nav-item" data-column="blue" href="contact.php">Contact</a>
    |
    <a class="nav-item" data-column="yellow" href="portfolio.php">Portfolio</a>
    |
    <a class="nav-item" data-column="green" href="about.php">About </a>
</div>

jQuery:

$(document).ready(function() {
    $(".nav-item").hover(
        function() {
            $("#" + $(this).data('column')").stop(true, true).animate({
                height: '+=100px'
            });
        },
        function() {
            $("#" + $(this).data('column')").stop(true, true).animate({
                height: '-=100px'
            });
        }
    );
});

Note I've only got 1 document ready handler here - having more than 1 is just a waste of performance.

 

[antijoke]

Awesome. Thank you.

 

[GravyMonster]

No problem. I just updated the post I made with some advice on your jQuery too