Page structure not arranged as expected

Question

I'm having issue with CSS (first time experience), trying to align the sections I have created. I have a main <section>, and sitting within several other nested <section>'s and an <aside>. I'm trying to get the <aside> to the right hand side of the page, whilst staying within in the coloured borders. Pictures attached show what im going for.

I've tried using float:left & float:right for the aside and "blogcontainer" sections in my CSS sheet, as well as just trying float:right for the aside, but am not getting what I intended. I managed to get the aside to were i want it, but this then messes with my main <section>. Can anybody help? The 'intended.png' is what im shooting for. Code below. Help much appreciated.

index.php:

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="myStyle2.css" type="text/css" media="screen" />
    <title>Page Title</title>

    <!--[if lt IE 9]>

    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->

</head>
<body>
    <!--Page header goes here-->
    <section id="top">
        <header>
            <!--Logo here -->
        </header>

        <!--Navigation Menu here -->
        <nav>
            <?php include('menu.php'); ?>
        </nav>
    </section>

    <section id="main">
        <section id="blogcontainer">

            <section id="blogpost">
                <article>
                    <header>
                        <h2>Blog Post Title Here</h2>
                    </header>
                    <p>Blog post contents here</p>
                <article>
            </section>



            <section id="comments">
                <article>
                    <header>
                        <h2>Comment Title 1</h2>
                    </header>
                    <p>Comment content 1</p>
                </article>
                <article>
                    <header>
                        <h2>Comment Title 2</h2>
                    </header>
                    <p>Comment content 2</p>
                </article>
                <article>
                    <header>
                        <h2>Comment Title 3</h2>
                    </header>
                    <p>Comment content 3</p>
                </article>
            </section>

            <section id="commentsform">

                <form action="#" method="post">
                    <h3>Post a comment</h3>
                    <p>
                        <label for="name">Name:</label>
                        <input name="name" id="name" type="text" required />
                    </p>
                    <p>
                        <label for="email">E-mail:</label>
                        <input name="email" id="email" type="email" required />
                    </p>
                    <p>
                        <label for="website">Website:</label>
                        <input name="website" id="website" type="url" />
                    </p>
                    <p>
                        <label for="comment">Comment:</label>
                        <textarea name="comment" id="comment" required></textarea>
                    </p>
                </form>
            </section>

        </section>

        <aside id="rightaside">
                <section>
                    <header>
                        <h3>Recent Posts</h3>
                    </header>
                    <ul>
                        <li><a href="#">Post 1</a></li>
                        <li><a href="#">Post 2</a></li>
                        <li><a href="#">Post 3</a></li>
                        <li><a href="#">Post 4</a></li>
                    </ul>
                </section>

                <section>
                    <header>
                        <h3>Recommended Sites</h3>
                    </header>
                    <ul>
                        <li><a href="http://www.stackoverflow.com">StackOverflow.Com</a></li>
                    </ul>
                </section>
            </aside>

    </section>

    <footer>

    </footer>

</body>
</html>

CSS:

/* Makeshift CSS Reset */
{
    margin: 0;
    padding: 0;
}

/* Tell the browser to render HTML 5 elements as block. Add more tags as needed. */
header, footer, aside, nav, article {
    display: block;
}

img.displayed {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

nav {
    margin: 1%;
    padding: 1%;
    border: 5px solid purple;
}

nav li {
    display: inline;
}

#main {
    margin: 1%;
    padding: 1%;
    border: 5px solid black;
}

#blogcontainer {
    width: 60%;
    margin: 1%;
    padding: 1%;
    border: 5px solid gold;
}

#blogpost {

    margin: 1%;
    padding: 1%;
    border: 5px solid green;
}
#comments {
    margin: 1%;
    padding: 1%;
    border: 5px solid grey;
}

#comments  > article  {
    margin: 1%;
    padding: 1%;
    border: 5px solid red;
}

#commentsform {
    margin: 1%;
    padding: 1%;
    border: 5px solid yellow;
}

#rightaside {
    float: right;
    width: 20%;
    margin: 1%;
    padding: 1%;
    border: 5px solid blue;
}

float: left and floar:right

float: right This is what is intended below. Above are the adverse results. intended result

Try setting display:inline-block on the two things you want to be next to each other. — Reasurria, Jun 10 '15 at 12:35

score 2 · Accepted Answer · edited Nov 11 '19 at 13:54

2

You only need to float #blogcontainer left. The reason is, a block element will take the full width of the page. Floating it will collapse its width to just its content allowing the aside to rise up to the position you want.

To get #main to contain the elements, you add overflow:auto; The purpose there is that parent elements will not expand to contain floated elements. Overflow says the elements should expand to contain elements that overflow it.

edited Nov 11 '19 at 13:54

Suresh Karia

17,550
18
67
85

answered Jun 10 '15 at 12:34

Rob

14,746
28
47
65

I tried this initially Rob and got the aside to go to the right which was fine, however, if you look at the second picture, it has the unintended effect of shrinking down #main (black borders). I can get rid of #main from index, but its not really what I want. – Dave0504 Jun 10 '15 at 12:39
1

@Dave0504 Sorry. I missed that. In that case, add 'overflow:auto' to main. – Rob Jun 10 '15 at 12:46
Thanks @Rob, explanation about overflow:auto appreciated – Dave0504 Jun 10 '15 at 12:53

Suresh Karia · Answer 2 · 2015-06-10T12:45:54.043

Try using this updated css.. changed style in several places.

what i have changed in css

added * , it is universal selector , it will reset all elemnts margin and padding to 0.

* {
   margin: 0;
   padding: 0;
 }

added box-sizing: border-box; , because all border will occupy exra pixels in you any div or section. this will calculate border size inside perticualar div's width

header, footer, aside, nav, article {
                display: block;
                box-sizing: border-box;
            }

and added overflow:auto to

#main {
                margin: 1%;
                padding: 1%;
                border: 5px solid black;
                overflow: auto;
            }

finally added float and display:inline-block

  #blogcontainer {
                width: 60%;
                margin: 1%;
                padding: 1%;
                border: 5px solid gold;
                float: left;
                display: inline-block;
            }

 /* Makeshift CSS Reset */
 * {
   margin: 0;
   padding: 0;
 }
 /* Tell the browser to render HTML 5 elements as block. Add more tags as needed. */
 header,
 footer,
 aside,
 nav,
 article {
   display: block;
   box-sizing: border-box;
 }
 img.displayed {
   display: block;
   margin-left: auto;
   margin-right: auto;
 }
 nav {
   margin: 1%;
   padding: 1%;
   border: 5px solid purple;
 }
 nav li {
   display: inline;
 }
 #main {
   margin: 1%;
   padding: 1%;
   border: 5px solid black;
   overflow: auto;
 }
 #blogcontainer {
   width: 60%;
   margin: 1%;
   padding: 1%;
   border: 5px solid gold;
   float: left;
   display: inline-block;
 }
 #blogpost {
   margin: 1%;
   padding: 1%;
   border: 5px solid green;
 }
 #comments {
   margin: 1%;
   padding: 1%;
   border: 5px solid grey;
 }
 #comments > article {
   margin: 1%;
   padding: 1%;
   border: 5px solid red;
 }
 #commentsform {
   margin: 1%;
   padding: 1%;
   border: 5px solid yellow;
 }
 #rightaside {
   float: right;
   width: 20%;
   margin: 1%;
   padding: 1%;
   border: 5px solid blue;
 }

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="myStyle2.css" type="text/css" media="screen" />
  <title>Page Title</title>

  <!--[if lt IE 9]>
    
        <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->

</head>

<body>
  <!--Page header goes here-->
  <section id="top">
    <header>
      <!--Logo here -->
    </header>

    <!--Navigation Menu here -->
    <nav>
      <?php include( 'menu.php'); ?>
    </nav>
  </section>

  <section id="main">
    <section id="blogcontainer">

      <section id="blogpost">
        <article>
          <header>
            <h2>Blog Post Title Here</h2>
          </header>
          <p>Blog post contents here</p>
          <article>
      </section>



      <section id="comments">
        <article>
          <header>
            <h2>Comment Title 1</h2>
          </header>
          <p>Comment content 1</p>
        </article>
        <article>
          <header>
            <h2>Comment Title 2</h2>
          </header>
          <p>Comment content 2</p>
        </article>
        <article>
          <header>
            <h2>Comment Title 3</h2>
          </header>
          <p>Comment content 3</p>
        </article>
      </section>

      <section id="commentsform">

        <form action="#" method="post">
          <h3>Post a comment</h3>
          <p>
            <label for="name">Name:</label>
            <input name="name" id="name" type="text" required />
          </p>
          <p>
            <label for="email">E-mail:</label>
            <input name="email" id="email" type="email" required />
          </p>
          <p>
            <label for="website">Website:</label>
            <input name="website" id="website" type="url" />
          </p>
          <p>
            <label for="comment">Comment:</label>
            <textarea name="comment" id="comment" required></textarea>
          </p>
        </form>
      </section>

    </section>

    <aside id="rightaside">
      <section>
        <header>
          <h3>Recent Posts</h3>
        </header>
        <ul>
          <li><a href="#">Post 1</a>
          </li>
          <li><a href="#">Post 2</a>
          </li>
          <li><a href="#">Post 3</a>
          </li>
          <li><a href="#">Post 4</a>
          </li>
        </ul>
      </section>

      <section>
        <header>
          <h3>Recommended Sites</h3>
        </header>
        <ul>
          <li><a href="http://www.stackoverflow.com">StackOverflow.Com</a>
          </li>
        </ul>
      </section>
    </aside>

  </section>

  <footer>

  </footer>

</body>

</html>

score 0 · Answer 3 · edited May 23 '17 at 12:19

The reason it is not working is because #blogcontainer is not floating. You have two solutions :

Either you move #rightaside above #blogcontainer in your html so that #blogcontainer can fill the free space to the left.

Either you add a float: left rule to your #blogcontainer so that both of your containers are taken out from the normal flow, problem is your parent container will collapse because of its floating childs. One of the solutions is to add the rule overflow: auto; to your #main container.

You can go further about collapse problem with floating childs in this post.

Page structure not arranged as expected

3 Answers3

what i have changed in css