CODEWITHSUNDEEP
htmlcssresponsivesidebar
Ginger
Ginger

Reputation: 51

Why is my sidebar stuck in the middle of the page?

My sidebar seems to be stuck right beside my second article on the page and won't move up to float beside the main content. Could someone please take a look at the code and see if they can tell what the problem is? I have been trying to get it unstuck for hours. I truly have no idea why it will not sit next to the content. Here is an image where you can see the problem:

enter image description here

body {
  background-image: url("billeder/bgorange.jpg");
  background-size: cover;
  color: black;
  /* Base font size (14px)? 7%*/
  font-family: sans-serif, arial;
  line-height: 1.5;
  text-align: left;
}

.body {
  width: 95%;
}

.maincontent {
  line-height: 20px;
  border-radius: 5px;
  /* pæne runde hjørner*/
  -moz-border-radius: 5px;
  /* Fox*/
  -webkit-border-radius: 5px;
  /* IE */
}

.content {
  width: 75%;
  float: left;
}

.topcontent {
  background-color: white;
  border-radius: 5px;
  float: none;
  /* pæne runde hjørner*/
  -moz-border-radius: 5px;
  /* Fox*/
  -webkit-border-radius: 5px;
  /* IE */
  margin: 1% 0 1% 0;
  padding: 1% 3% 3% 3%
}

.bottomcontent {
  background-color: white;
  float: none;
  border-radius: 5px;
  /* pæne runde hjørner*/
  -moz-border-radius: 5px;
  /* Fox*/
  -webkit-border-radius: 5px;
  /* IE */
  margin: 2% 0 2% 0;
  padding: 1% 5% 3% 3%
}


/* SIDEBAR!***************************************************************/

.top-sidebar {
  text-align: center;
  width: 20%;
  float: left;
  background-color: white;
  padding: 1% 1% 1% 1%;
  margin: 1% 0 0 1%;
  border-radius: 5px;
  /* pæne runde hjørner*/
  -moz-border-radius: 5px;
  /* Fox*/
  -webkit-border-radius: 5px;
  /* IE */
}

.middle-sidebar {
  text-align: center;
  width: 20%;
  float: left;
  background-color: white;
  padding: 1% 1% 1% 1%;
  margin: 1% 0 0 1%;
  border-radius: 5px;
  /* pæne runde hjørner*/
  -moz-border-radius: 5px;
  /* Fox*/
  -webkit-border-radius: 5px;
  /* IE */
}

.bottom-sidebar {
  text-align: center;
  width: 20%;
  float: left;
  background-color: white;
  padding: 1% 1% 1% 1%;
  margin: 1% 0 0 1%;
  border-radius: 5px;
  /* pæne runde hjørner*/
  -moz-border-radius: 5px;
  /* Fox*/
  -webkit-border-radius: 5px;
  /* IE */
}
<header class="mainheader">

  <nav>
    <ul id="menu">
      <li><a href="index.html" class="active">Forside</a></li>
    </ul>
  </nav>

</header>

<div id="banner"></div>
<div class="maincontent">


  <div class="content">
    <article class="topcontent">
      <header>
        <h2><a href="#" title="first post">Artikel</a></h2>
      </header>
      <footer>
        <p class="post-info"> Info om denne boks</p>
      </footer>
      <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod temporvoluptua. At vero eo </p>
    </article>
  </div>

  <div class="content">
    <article class="bottomcontent">
      <header>
        <h2><a href="#" title="second post">Second post</a></h2>
      </header>
      <footer>
        <p class="post-info"> Info </p>
      </footer>
      <p>takimata sanctus est Lorem ipsum dolor sit amet.
      </p>
    </article>
  </div>
</div>

<aside class="top-sidebar">
  <article>
    <h2>top sidebar</h2>
    <p>ipsum dolor sit amet, com.</p>
  </article>
</aside>

<aside class="middle-sidebar">
  <article>
    <h2>Middle sidebar</h2>
    <p>ipsum dolor sit amet, conserebum.</p>
  </article>
</aside>

<aside class="bottom-sidebar">
  <article>
    <h2>Bottom sidebar</h2>
    <p>ipsum dolor sit amet, conrebum.</p>
  </article>
</aside>

<footer class="mainfooter"></footer>

Upvotes: 0

Views: 808

Answers (1)

hungerstar
hungerstar

Reputation: 21675

The issue you have is the order of your floats. The order goes:

  1. .content
  2. .content
  3. .top-sidebar

When you float elements, if the next element in line won't fit in the space provided, it reflows to the next line (below the previous element).

This is what's happening:

.content is 75% of browser width. Since it's floated the next element will attempt to butt up next to it if there's enough room. The remaining room is 25% of browser width. The second .content is 75% of browser width and cannot fit, so it reflows. The next element is .top-sidebar which is 24% of browser width (after adding up margin and padding percentages) and will fit in the remaining 25%, so the sidebar starts there.

How do we fix it?

Move your properties from .content to .maincontent.

body {
  background-image: url("billeder/bgorange.jpg");
  background-size: cover;
  color: black;
  /* Base font size (14px)? 7%*/
  font-family: sans-serif, arial;
  line-height: 1.5;
  text-align: left;
}

.body {
  width: 95%;
}

.maincontent {
  width: 75%;
  float: left;
  line-height: 20px;
  border-radius: 5px;
  /* pæne runde hjørner*/
  -moz-border-radius: 5px;
  /* Fox*/
  -webkit-border-radius: 5px;
  /* IE */
}

.content {
}

.topcontent {
  background-color: white;
  border-radius: 5px;
  float: none;
  /* pæne runde hjørner*/
  -moz-border-radius: 5px;
  /* Fox*/
  -webkit-border-radius: 5px;
  /* IE */
  margin: 1% 0 1% 0;
  padding: 1% 3% 3% 3%
}

.bottomcontent {
  background-color: white;
  float: none;
  border-radius: 5px;
  /* pæne runde hjørner*/
  -moz-border-radius: 5px;
  /* Fox*/
  -webkit-border-radius: 5px;
  /* IE */
  margin: 2% 0 2% 0;
  padding: 1% 5% 3% 3%
}


/* SIDEBAR!***************************************************************/

.top-sidebar {
  text-align: center;
  width: 20%;
  float: left;
  background-color: white;
  padding: 1% 1% 1% 1%;
  margin: 1% 0 0 1%;
  border-radius: 5px;
  /* pæne runde hjørner*/
  -moz-border-radius: 5px;
  /* Fox*/
  -webkit-border-radius: 5px;
  /* IE */
}

.middle-sidebar {
  text-align: center;
  width: 20%;
  float: left;
  background-color: white;
  padding: 1% 1% 1% 1%;
  margin: 1% 0 0 1%;
  border-radius: 5px;
  /* pæne runde hjørner*/
  -moz-border-radius: 5px;
  /* Fox*/
  -webkit-border-radius: 5px;
  /* IE */
}

.bottom-sidebar {
  text-align: center;
  width: 20%;
  float: left;
  background-color: white;
  padding: 1% 1% 1% 1%;
  margin: 1% 0 0 1%;
  border-radius: 5px;
  /* pæne runde hjørner*/
  -moz-border-radius: 5px;
  /* Fox*/
  -webkit-border-radius: 5px;
  /* IE */
}
<header class="mainheader">

  <nav>
    <ul id="menu">
      <li><a href="index.html" class="active">Forside</a></li>
    </ul>
  </nav>

</header>

<div id="banner"></div>
<div class="maincontent">


  <div class="content">
    <article class="topcontent">
      <header>
        <h2><a href="#" title="first post">Artikel</a></h2>
      </header>
      <footer>
        <p class="post-info"> Info om denne boks</p>
      </footer>
      <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod temporvoluptua. At vero eo </p>
    </article>
  </div>

  <div class="content">
    <article class="bottomcontent">
      <header>
        <h2><a href="#" title="second post">Second post</a></h2>
      </header>
      <footer>
        <p class="post-info"> Info </p>
      </footer>
      <p>takimata sanctus est Lorem ipsum dolor sit amet.
      </p>
    </article>
  </div>
</div>

<aside class="top-sidebar">
  <article>
    <h2>top sidebar</h2>
    <p>ipsum dolor sit amet, com.</p>
  </article>
</aside>

<aside class="middle-sidebar">
  <article>
    <h2>Middle sidebar</h2>
    <p>ipsum dolor sit amet, conserebum.</p>
  </article>
</aside>

<aside class="bottom-sidebar">
  <article>
    <h2>Bottom sidebar</h2>
    <p>ipsum dolor sit amet, conrebum.</p>
  </article>
</aside>

<footer class="mainfooter"></footer>

Now the order is:

  1. .maincontent
  2. .top-sidebar

This is what you want with your floats, have two high-level containers that you place the real content in and mimimze the floats.

Ultimately I would use flexbox if you're beginning to build a site today.

Basic example:

body {
  margin: 0;
}

.content {
  display: flex;
}
.content section {
  margin: 15px;
  padding: 10px;
  background-color: rgba( 255, 255, 255, 0.8 );
  border-radius: 3px;
  overflow: hidden;
}

main {
  width: 75%;
  background-color: gold;
}

sidebar {
  width: 25%;
  background-color: rebeccapurple;
}

footer {
  padding: 10px;
  background-color: indianred;
}
<div class="content">

  <main>
    <section>
      <h2>Heading</h2>
      <p>
        Lorem ipsum dolor.
      </p>
    </section>
    <section>
      <h2>Heading</h2>
      <p>
        Lorem ipsum dolor.
      </p>
    </section>
  </main>
  
  <sidebar>
    <section>
      <h3>Heading</h3>
      <h2>Heading</h2>
      <p>
        Lorem ipsum dolor.
      </p>
    </section>
  </sidebar>
  
</div>

<footer>Site footer</footer>

Upvotes: 2

Related Questions