HTML CSS help for assignment

S

StanleyDev

Member
Nov 13, 2011
35
0
I'm trying to create a template for my assignment before I start making the webpages, and Im currently stuck, When I insert multiple content box's my sidebar moves down, I'm not sure how to fix this, with just one content box it's fine, but when I insert more the sidebar shifts down.

The HTML:
HTML: 
<!DOCTYPE html>
<html>
    <head>
        <title>Home</title>
        <link rel="stylesheet"  href="css/normalize.css">
        <link rel="stylesheet"  href="css/sitecss.css">
    </head>

    <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 -->
    <!-- content -->
            <div id="mainContent">
                <h3>HTML5 & CSS Normalize</h3>
                <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>
            <div id="secondaryContent">
                <h3>HTML5 & CSS Normalize</h3>
                <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 content -->
    <!-- side Bar code code -->
            <aside id="sideBar">
                <p>testtest testttest test test testtest test test testtest test test testttest test test testtest test test testtest test test testttest test test testtest test test testtest test test testttest test test testtest test test testtest test test testttest 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>
</html>

The CSS:
Code: 
body{
    background-color: #A0D8F1;
    padding: 0px;
    width: 1280px;
}

.nav{
    /*background-image: url(../images/navBG.png);*/
    background-color: #0A224E;
    color: white;
    font-family: Tahoma, Geneva, sans-serif;
    margin: 0px;
    padding-top: 20px;
    width: 1280px;
    height: 40px;

}

.zenitLink{
    color: white;
    padding: 20px;

}

.home{
    color: white;
    padding: 20px;

}

.imgGal{
    color: white;
    padding: 20px;

}

.video{
    color: white;
    padding: 20px;

}

.audio{
    color: white;
    padding: 20px;

}

.html5{
    color: white;
    padding: 20px;
}

.tblCSS{
    color: white;
    padding: 20px;
}

.forms{
    color: white;
    padding: 20px;

}

.cssUsed{
    color: white;
    padding: 20px;

}

.extra{
    color: white;
    padding: 20px;

}


#sideBar {
    width: 280px;
    height: auto ;
    float: right;
    padding-bottom: 15px;
    padding-top: 15px;
    background-color: #BF381A;

}

#sideBar p{
    margin-top: 16px;
    height: auto;
    margin-bottom: 16px;
    text-align: center;
    padding-left: 10px;
    padding-right: 10px;

}

#socialMedia{
    width: 280px;
    height: auto;
    float: right;
    clear: both;
  
    background-color: #E07628;

    }
#socialMedia img{
    margin-top: 30px;
    margin-bottom: 30px;
    margin-left: 15px;
    margin-right: 15px;

}

#mainContent{
    width: 980px;
    float: left;
    clear: both;
    background-color: #E9AF32;
    margin-left: 10px;
    margin-top: 30px;
    clear: both;

}

#mainContent h3, p{
    padding-left: 10px;
    padding-right: 10px;

}

#secondaryContent{
    width: 980px;
    float: left;
    clear: both;
    background-color: #E9AF32;
    margin-left: 10px;
}

#secondaryContent h3, p{
    padding-left: 10px;

}
 
Sort by date Sort by votes
Sysode

Sysode

Front-End Developer
Dec 11, 2012
1,673
848
You're floating them both left, float one right and left. Normally I'd write up an example for you but I'm on a mobile so its a little trickier.

I'd recommend looking up CSS box-object model and the "display" properties - they will benefit you later on. Adding "inline-block" will come in pretty handy as well!

Best if luck, if you still have any issues when I'm on a PC, feel free to reply here and I'll try giving a better description.
 
Upvote 0 Downvote
S

StanleyDev

Member
Nov 13, 2011
35
0
Sysode said:
You're floating them both left, float one right and left. Normally I'd write up an example for you but I'm on a mobile so its a little trickier.

I'd recommend looking up CSS box-object model and the "display" properties - they will benefit you later on. Adding "inline-block" will come in pretty handy as well!

Best if luck, if you still have any issues when I'm on a PC, feel free to reply here and I'll try giving a better description.
Click to expand...
I'm kinda confused about what you said about floating one to the left and one to the right, if I did that, wouldn't that put one content box to the left and one to the right? I'm looking further into the inline-block stuff right now, it seems very useful, if you have free time could you explain me how to use them on skype or something? if I haven't figured it out by whenever you read this?

thank-you, stanley
 
Upvote 0 Downvote
Sysode

Sysode

Front-End Developer
Dec 11, 2012
1,673
848
StanleyDev said:
I'm kinda confused about what you said about floating one to the left and one to the right, if I did that, wouldn't that put one content box to the left and one to the right? I'm looking further into the inline-block stuff right now, it seems very useful, if you have free time could you explain me how to use them on skype or something? if I haven't figured it out by whenever you read this?

thank-you, stanley
Click to expand...
Sure thing. I'll be available tomorrow so I'll whip something up and explain it a little better - apologies for the brief description prior. I'll update this post tomorrow :)
 
Upvote 0 Downvote
S

StanleyDev

Member
Nov 13, 2011
35
0
Sysode said:
Sure thing. I'll be available tomorrow so I'll whip something up and explain it a little better - apologies for the brief description prior. I'll update this post tomorrow :)
Click to expand...
okay cool i'll try figuring it out by then, and no worries I'm trying to learn it aswell so not getting handed the answer lets me expand my knowledge trying to figure out how to do things :)
 
Upvote 0 Downvote
JayC

JayC

Always Learning
Aug 8, 2013
5,505
1,401
<!-- content -->
<div id="mainContent">
<h3>HTML5 & CSS Normalize</h3>
<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>
Code: 
#mainContent{
    width: 980px;
    float: left;
    clear: both;
    background-color: #E9AF32;
    margin-left: 10px;
    margin-top: 30px;
    clear: both;

}
<div id="secondaryContent">
<h3>HTML5 & CSS Normalize</h3>
<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>
Code: 
#secondaryContent{
    width: 980px;
    float: right;
    clear: both;
    background-color: #E9AF32;
    margin-left: 10px;
}
<!-- end of content -->
<!-- side Bar code code -->
<aside id="sideBar">
<p>testtest testttest test test testtest test test testtest test test testttest test test testtest test test testtest test test testttest test test testtest test test testtest test test testttest test test testtest test test testtest test test testttest test test testtest test test testtest test test test</p>
</aside>
<!-- end of side bar code -->
 
Upvote 0 Downvote

Users who are viewing this thread

Total: 3 (members: 0, guests: 3)
☀️  Switch to Light Theme

Latest posts

Top