CODEWITHSUNDEEP
htmlcss
Derrick Rose
Derrick Rose

Reputation: 684

Why isn't my section siding up to the right properly?

I am currently making a webpage, which has a side section, such as the one in this photo:

enter image description here

What I currently have is this:

enter image description here

Why is it that my side column isn't showing up like the one in the first picture? I tried to make the side column and test where it would be by putting the words "side column????", however it isn't showing up properly. My code is as follows:

HTML:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>int222_162d16 - Assignment 2 - Home Page</title>
    <link rel="stylesheet" href="css/normalize.css"   type="text/css" media="screen" /> 
    <link rel="stylesheet" href="css/sitecss.css" type="text/css" media="screen" /> 
  </head>
  <body>
    <nav class="fixed-nav-bar">
      <ul class="nav">
        <li class="nav"><a href="../index.html">&spades; My Zenit Account</a></li>
        <li class="nav"><a class="active" href="index.html">Home</a></li>
        <li class="nav"><a href="gallery.html">Gallery</a></li>
        <li class="nav"><a href="video.html">Video</a></li>
        <li class="nav"><a href="audio.html">Audio</a></li>
        <li class="nav"><a href="table.html">Tables With CSS</a></li>
        <li class="nav"><a href="pizza/index.html">Forms</a></li>
        <li class="nav"><a href="css/sitecss.css">CSS Used</a></li>
        <li class="nav"><a href="extra/index.html">Extra</a></li>
      </ul>
    </nav>
    <h1>Welcome To The Home Page!</h1>



    <div class="s">
        <section class="s">
            <h3>HTML5 & CSS Normalize</h3>
            <p>The reason why we use normalize.css is due to it providing cross-browser consistency in the styling of HTML elements.</p>
            <aside><p>SIDE COLUMN???</p></aside>
        </section>

        <aside><p>SIDE COLUMN???</p></aside>

        <section class="s">
            <h3>TEXT</h3>
            <p>
                TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT 
            </p>
        </section>
    </div>

    <hr />
    <footer>
       <script>
          var dt=new Date(document.lastModified);   // Get document last modified date
          document.write('<p>This page was last updated on '+dt.toLocaleString()) + '</p>';
       </script>
    </footer>
  </body>
</html>

CSS:

/*nav.fixed-nav-bar
{
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  width: 100%;
  height: 50px;
  margin-top: 10px;
}
*/
ul.nav
{
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #f3f3f3;
    border: 1px solid #e7e7e7;
    box-shadow: 5px 2px 10px #808080;
}

li.nav 
{
    float: left;
}

li a 
{

    display: block;
    color: #666;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

/* Change the link color on hover*/

li a:hover:not(.active) 
{
    background-color: #ddd;
}

li a.active
{
    color: #ffffff;
    background-color: #9999ff;
}

section.s /*shadow on sections*/
{
    background-color: #ccccff;
    box-shadow: 5px 2px 10px #808080;
    width:63%;


}

/*div.s
{
    box-shadow: 5px 2px 10px #808080;


}
*/
footer  
{

          width:100%;
          background:#ccccff;
          color:#000000;
          border:1px solid #cccccc;
          position:absolute;
          text-align:center; 
          font-weight:bold;
          display:inline-block;
          margin: 0px auto;
          line-height:20px;
          box-shadow: 5px 2px 10px #808080;
          clear: both;
   }
   aside {
  float: right;
  width: 30%;
}

Upvotes: 0

Views: 103

Answers (2)

cssyphus
cssyphus

Reputation: 40106

You can use a framework / structure like this to lay out your page as desired.

Simple Example:

*{position:relative;box-sizing:border-box;font-family:arial;}

nav{position:fixed;height:50px;width:99vw;background:darkcyan;color:white;text-align:center;overflow:auto;font-size:1.2rem;}
  nav div{float:left;width:30vw;}
  nav ul{float:left;width:65vw;height:50px;list-style:none;}
    nav ul li{display:inline-block;padding:0 5vw;}

#wrap{top:50px;overflow:hidden;}
  .both{float:left;min-height:500px;margin-left:2vw;padding:20px;}
  #main{width:60vw;border:1px solid orange;}
  aside{width:29.5vw;border:1px solid blue;}
    .sideDiv{margin-bottom:20px;}
<nav>
  <div id="logo"><img src="http://lorempixel.com/80/48" /></div>
  <ul><li>File</li><li>Edit</li><li>View</li></ul>
</nav>

<div id="wrap">

  <section id="main" class="both">
    PHOTO GALLERY goes in here
  </section>
  
  <aside class="both">
    Side Area
    <div class="sideDiv">Four other wonders</div>
    <div class="sideDiv">Social Media Links</div>
  </aside>
  
</div><!-- #wrap -->

Upvotes: 0

spirit
spirit

Reputation: 3415

I would say, you need to change your HTML to

<div class="s">
    <aside>
        <section class="s">
        <p>SIDE COLUMN???</p>
        </section>
    </aside>

    <section class="s">
        <h3>HTML5 & CSS Normalize</h3>
        <p>The reason why we use normalize.css is due to it providing cross-browser consistency in the styling of HTML elements.</p>
    </section>


    <section class="s">
        <h3>TEXT</h3>
        <p>
            TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT 
        </p>
    </section>
</div>

see, I moved <aside> out of the section, to make it floats to the right

Upvotes: 1

Related Questions