Reply to thread

Message

<blockquote data-quote="StanleyDev" data-source="post: 328546" data-attributes="member: 9151">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]&lt;!DOCTYPE html&gt;&lt;html&gt;&nbsp; &nbsp; &lt;head&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;title&gt;Home&lt;/title&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;link rel=&quot;stylesheet&quot;&nbsp; href=&quot;css/normalize.css&quot;&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;link rel=&quot;stylesheet&quot;&nbsp; href=&quot;css/sitecss.css&quot;&gt;&nbsp; &nbsp; &lt;/head&gt;&nbsp; &nbsp; &lt;body&gt;&nbsp; &nbsp; &lt;!-- nav bar code --&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;nav class=&quot;nav&quot;&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;a class=&quot;zenitLink&quot; href=&quot;#&quot;&gt;My Zenit Account&lt;/a&gt;|&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;a class=&quot;home&quot; href=&quot;#&quot;&gt;Home&lt;/a&gt; |&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;a class=&quot;imgGal&quot; href=&quot;#&quot;&gt;Photo Gallery&lt;/a&gt; |&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;a class=&quot;video&quot; href=&quot;#&quot;&gt;&nbsp; &nbsp;&nbsp; Video&lt;/a&gt; |&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;a class=&quot;audio&quot; href=&quot;#&quot;&gt;Audio&lt;/a&gt; |&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;a class=&quot;html5&quot; href=&quot;#&quot;&gt;HTML5&lt;/a&gt; |&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;a class=&quot;tblCSS&quot; href=&quot;#&quot;&gt;Tables with CSS&lt;/a&gt; |&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;a class=&quot;forms&quot; href=&quot;#&quot;&gt;Forms&lt;/a&gt; |&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;a class=&quot;cssUsed&quot; href=&quot;#&quot;&gt;CSS Used&lt;/a&gt; |&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;a class=&quot;extra&quot; href=&quot;#&quot;&gt;Extra&lt;/a&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/nav&gt;&nbsp; &nbsp; &lt;!-- end of nav bar code --&gt;&nbsp; &nbsp; &lt;!-- content --&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div id=&quot;mainContent&quot;&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;h3&gt;HTML5 &amp; CSS Normalize&lt;/h3&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;p&gt;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&lt;/p&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div id=&quot;secondaryContent&quot;&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;h3&gt;HTML5 &amp; CSS Normalize&lt;/h3&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;p&gt;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&lt;/p&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt;&nbsp; &nbsp; &lt;!-- end&nbsp; of content --&gt;&nbsp; &nbsp; &lt;!-- side Bar code code --&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;aside id=&quot;sideBar&quot;&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;p&gt;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&lt;/p&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/aside&gt;&nbsp; &nbsp; &lt;!-- end of side bar code --&gt;&nbsp; &nbsp; &lt;!-- social media bar --&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;aside id=&quot;socialMedia&quot;&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;center&gt;&lt;img src=&quot;images/social-media.png&quot;&gt;&lt;/center&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/aside&gt;&nbsp; &nbsp; &lt;!-- end of social media bar --&gt;&nbsp; &nbsp; &lt;/body&gt;&lt;/html&gt;[/HTML]The CSS:[CODE]body{&nbsp; &nbsp; background-color: #A0D8F1;&nbsp; &nbsp; padding: 0px;&nbsp; &nbsp; width: 1280px;}.nav{&nbsp; &nbsp; /*background-image: url(../images/navBG.png);*/&nbsp; &nbsp; background-color: #0A224E;&nbsp; &nbsp; color: white;&nbsp; &nbsp; font-family: Tahoma, Geneva, sans-serif;&nbsp; &nbsp; margin: 0px;&nbsp; &nbsp; padding-top: 20px;&nbsp; &nbsp; width: 1280px;&nbsp; &nbsp; height: 40px;}.zenitLink{&nbsp; &nbsp; color: white;&nbsp; &nbsp; padding: 20px;}.home{&nbsp; &nbsp; color: white;&nbsp; &nbsp; padding: 20px;}.imgGal{&nbsp; &nbsp; color: white;&nbsp; &nbsp; padding: 20px;}.video{&nbsp; &nbsp; color: white;&nbsp; &nbsp; padding: 20px;}.audio{&nbsp; &nbsp; color: white;&nbsp; &nbsp; padding: 20px;}.html5{&nbsp; &nbsp; color: white;&nbsp; &nbsp; padding: 20px;}.tblCSS{&nbsp; &nbsp; color: white;&nbsp; &nbsp; padding: 20px;}.forms{&nbsp; &nbsp; color: white;&nbsp; &nbsp; padding: 20px;}.cssUsed{&nbsp; &nbsp; color: white;&nbsp; &nbsp; padding: 20px;}.extra{&nbsp; &nbsp; color: white;&nbsp; &nbsp; padding: 20px;}#sideBar {&nbsp; &nbsp; width: 280px;&nbsp; &nbsp; height: auto ;&nbsp; &nbsp; float: right;&nbsp; &nbsp; padding-bottom: 15px;&nbsp; &nbsp; padding-top: 15px;&nbsp; &nbsp; background-color: #BF381A;}#sideBar p{&nbsp; &nbsp; margin-top: 16px;&nbsp; &nbsp; height: auto;&nbsp; &nbsp; margin-bottom: 16px;&nbsp; &nbsp; text-align: center;&nbsp; &nbsp; padding-left: 10px;&nbsp; &nbsp; padding-right: 10px;}#socialMedia{&nbsp; &nbsp; width: 280px;&nbsp; &nbsp; height: auto;&nbsp; &nbsp; float: right;&nbsp; &nbsp; clear: both;&nbsp; &nbsp; &nbsp; background-color: #E07628;&nbsp; &nbsp; }#socialMedia img{&nbsp; &nbsp; margin-top: 30px;&nbsp; &nbsp; margin-bottom: 30px;&nbsp; &nbsp; margin-left: 15px;&nbsp; &nbsp; margin-right: 15px;}#mainContent{&nbsp; &nbsp; width: 980px;&nbsp; &nbsp; float: left;&nbsp; &nbsp; clear: both;&nbsp; &nbsp; background-color: #E9AF32;&nbsp; &nbsp; margin-left: 10px;&nbsp; &nbsp; margin-top: 30px;&nbsp; &nbsp; clear: both;}#mainContent h3, p{&nbsp; &nbsp; padding-left: 10px;&nbsp; &nbsp; padding-right: 10px;}#secondaryContent{&nbsp; &nbsp; width: 980px;&nbsp; &nbsp; float: left;&nbsp; &nbsp; clear: both;&nbsp; &nbsp; background-color: #E9AF32;&nbsp; &nbsp; margin-left: 10px;}#secondaryContent h3, p{&nbsp; &nbsp; padding-left: 10px;}[/CODE]</blockquote>

[QUOTE="StanleyDev, post: 328546, member: 9151"] 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 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>   <div id="mainContent"> <h3>HTML5 & CSS Normalize</h3> 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 </div> <div id="secondaryContent"> <h3>HTML5 & CSS Normalize</h3> 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 </div>   <aside id="sideBar"> 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 </aside>   <aside id="socialMedia"> <center><img src="images/social-media.png"></center> </aside>  </body> </html>[/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; }[/CODE] [/QUOTE]

Verification

Reply to thread

Connect with us

Newest members