CODEWITHSUNDEEP
csshtml
ANBHOO
ANBHOO

Reputation: 135

Unwanted spacing and aside not positioning properly

I'm making a webpage for an assignment. I'm currently getting the layout done. I have figured out most of the template, but I'm having issues with unwanted spacing. When I enter content into the div container past 1 line the a space is created separating the side bar from the nav bar.

Example here:

undesired look: http://jsfiddle.net/z1pbt8c5/

desired look: http://jsfiddle.net/zckmw9vz/

HTML

<body>
<!-- nav bar code -->
        <nav class="nav">
            <a class="zenitLink" href="#">My Zenit Account</a>|
            <a class="home" href="#">Home</a> |
            <a class="imgGal" href="#">Photo Gallery</a> |
            <a class="video" href="#">  Video</a> |
            <a class="audio" href="#">Audio</a> |
            <a class="html5" href="#">HTML5</a> |
            <a class="tblCSS" href="#">Tables with CSS</a> |
            <a class="forms" href="#">Forms</a> |
            <a class="cssUsed" href="#">CSS Used</a> |
            <a class="extra" href="#">Extra</a>
        </nav>
<!-- end of nav bar code -->
<!-- main content -->
        <div id="container">
            <p>testtest test test testtest test test testtest test test testtest test test testtest test test testtest test test testtest test test testtest test test testtest test test testtest test test testtest test test testtest test test testtest test test testtest test test testtest test test test</p>
        </div>
<!-- end  of main content -->
<!-- side Bar code code -->
        <aside id="sideBar">
            <p>testtest test test testtest test test testtest test test testtest test test testtest test test testtest test test testtest test test testtest test test testtest test test test</p>
        </aside>
<!-- end of side bar code -->
<!-- social media bar -->
        <aside id="socialMedia">
            <center><img src="images/social-media.png"></center>    
        </aside>
<!-- end of social media bar -->
</body>

Upvotes: 0

Views: 47

Answers (1)

mmgross
mmgross

Reputation: 3092

The problem was that you used clear:both; on your #sidebar and #socialMedia. The effect of this was that they actually were positioned below your main content.

You tried to fix that with a negative margin, but that margin actually depends on the height of your main content and as it increased in height, those 2 elements got pushed down again.

Eliminating clear:both; together with margin-top:-90px; solves the problem, take a look at this updated Fiddle

Upvotes: 1

Related Questions