Having trouble aligning <aside> to the left of <article> using float

Question

tldr; I am trying to put the aside-section to the left of the article-section (like a sidebar/sidecolumn however my "float" does not seem to work at all. How do I do this without editing the HTML-code? I only want to edit it in the CSS-file. I am a beginner so I appreciate the help!

* {
box-sizing: border-box;
}
section {background-color: cornsilk;overflow:auto;float: right;}
article {color: black;float: right;}
article footer {font-style: italic;font-size: 15px;color: black; background-color: cornsilk;text-align: left;}
#wrapper {width: 960px;
margin: 0 auto;}

h1 {
background-color: #666;

text-align: center;
font-size: 35px;
color: white;
}
footer {
background-color: #666;

text-align: center;
font-size: 35px;
color: white;
font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, "sans-serif";
float: right;

}
aside { 
float: left;

}

<div id="wrapper">
  <header><h1>text</h1></header>
  <article>
    <section>
      <header><h2>Om CSS</h2></header>
      <p>text</p> 
      <p>text</p>
      <p class="linktext">Här är en <a href="https://sv.wikipedia.org/wiki/Cascading_Style_Sheets"> artikel om CSS</a> på Wikipedia</p>
      <footer>text</footer>     
    </section>
    <section>
      <header><h2>Om märkspråk</h2></header>
      <p>text</p> 
      <p>text</p>
      <p class="linktext">Här är en <a href="https://sv.wikipedia.org/wiki/HTML5"> artikel om HTML5</a> på Wikipedia</p>
      <footer>text</footer>     
    </section>
  </article>

  <aside> 
    <h1>Bildgalleri</h1>
    <img src="images/html5.png " alt="html5">
    <img src="images/css.png" alt="css3">
  </aside>
  <footer>&#169;</footer>
</div>

Answer 1

I removed all your CSS to simplify it. Of course you can start to re-style everything.

The best overall solution in terms of compability will be the sue of flex-box. CSS-Grid would do the trick too but has limited support for IE11 & 13.

First at all, your main issue is the use of float which should not be sued for styling purpose. float is only intended to be used to float images within a paragraph (simliar to word or newspapers). Unfortunatly it still is repeatly tought as it was a hack befor HTML5 and the development of flexbox and css-grid in 2012. Since 2015 both flexbox and css-grid are a well established technique and there is no further reason to mis-use the float-hack.

Next issue is, your HTML structure. You have multiple footer and headerelements and nested them within the structure. This requires the of the > selector to call only a specific footer or header element and not all of them.

The enxt structure issue is the ordering. Semantically you will display the elements either from top to bottom or from left to right. However your <aside> element is supposed to come befor the <article> element while it comes last within the structure. This requires the use of order(flex-order) within the CSS to change the order.

So what I did was to use #wrapper { display: flex; flex-wrap: wrap } this applies flexbox to the container and tells the elements to wrap instead of nowrap (initial value). The intention is, that the ehaderr gets a width of 100% and the other elements should then be displayed below it instead of overflowing to the right.

Then you see, that the <header>, <footer>, <aside> and <article> elements got order property and value which allows me to reorder the structure within CSS as explained above.

If you need further explantion or information, feel free to ask.

* {
  box-sizing: border-box;
}

#wrapper {
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
}

#wrapper > header {
  width: 100%;
  border: 1px solid red;
  order: 1;
}

#wrapper > aside {
  width: 30%;
  border: 1px solid green;
  order: 2;
}

#wrapper > article {
  width: 70%;
  border: 1px solid blue;
  order: 3;
}

#wrapper > footer {
  width: 100%;
  border: 1px solid yellow;
  order: 4;
}

<div id="wrapper">
  <header>
    <h1>text</h1>
  </header>
  <article>
    <section>
      <header>
        <h2>Om CSS</h2>
      </header>
      <p>text</p>
      <p>text</p>
      <p class="linktext">Här är en <a href="https://sv.wikipedia.org/wiki/Cascading_Style_Sheets"> artikel om CSS</a> på Wikipedia</p>
      <footer>text</footer>
    </section>
    <section>
      <header>
        <h2>Om märkspråk</h2>
      </header>
      <p>text</p>
      <p>text</p>
      <p class="linktext">Här är en <a href="https://sv.wikipedia.org/wiki/HTML5"> artikel om HTML5</a> på Wikipedia</p>
      <footer>text</footer>
    </section>
  </article>

  <aside>
    <h1>Bildgalleri</h1>
    <img src="images/html5.png " alt="html5">
    <img src="images/css.png" alt="css3">
  </aside>
  <footer>&#169;</footer>
</div>

Answer 2

Here's a solution where your HTML is completely unchanged (which I actually would not recommend at all, since the order of elements in there isn't ideal, and neither is the HTML structure in general).

The main thing is that I used display: flex with flex-direction: row-reverse on the #wrapper and applied position: absolute to the header and footer, plus some paddings and margins on other elements to create space for that header and footer. I also deleted all floats. Other details/settings see below.

* {
  box-sizing: border-box;
}
html, body {
  margin: 0;
}
#wrapper {
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
  position: relative;
}
section {
  background-color: cornsilk;
  padding-bottom: 50px;
}

article {
  color: black;
  padding: 60px 0;
}

article footer {
  font-style: italic;
  font-size: 15px;
  color: black;
  background-color: cornsilk;
  text-align: left;
}

header h1 {
  background-color: #666;
  text-align: center;
  font-size: 35px;
  color: white;
  margin: 0;
}
aside h1 {
  margin-top: 60px;
  margin-right: 20px;
}
#wrapper > header {
  position: absolute;
  width: 100%;
  height: 40px;
  margin-right: 20px;
}
section:first-of-type > header {
   margin-top: 40px;
}
footer {
  background-color: #666;
  text-align: center;
  font-size: 35px;
  color: white;
  font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, "sans-serif";
  position: absolute;
  width: 100%;
  bottom: 0;
  left: 0;
}

<div id="wrapper">
  <header>
    <h1>text</h1>
  </header>
  <article>
    <section>
      <header>
        <h2>Om CSS</h2>
      </header>
      <p>text</p>
      <p>text</p>
      <p class="linktext">Här är en <a href="https://sv.wikipedia.org/wiki/Cascading_Style_Sheets"> artikel om CSS</a> på Wikipedia</p>
      <footer>text</footer>
    </section>
    <section>
      <header>
        <h2>Om märkspråk</h2>
      </header>
      <p>text</p>
      <p>text</p>
      <p class="linktext">Här är en <a href="https://sv.wikipedia.org/wiki/HTML5"> artikel om HTML5</a> på Wikipedia</p>
      <footer>text</footer>
    </section>
  </article>

  <aside>
    <h1>Bildgalleri</h1>
    <img src="images/html5.png " alt="html5">
    <img src="images/css.png" alt="css3">
  </aside>
  <footer>&#169;</footer>
</div>

Answer 3

I think you want to do like this

* {
  box-sizing: border-box;
}

section {
  background-color: cornsilk;
  overflow: auto;
  float: right;
}

article {
  color: black;
  float: right;
}

article footer {
  font-style: italic;
  font-size: 15px;
  color: black;
  background-color: cornsilk;
  text-align: left;
}

#wrapper {
  width: 960px;
  margin: 0 auto;
}

h1 {
  background-color: #666;
  text-align: center;
  font-size: 35px;
  color: white;
}

footer {
  background-color: #666;
  text-align: center;
  font-size: 35px;
  color: white;
  font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, "sans-serif";
  float: right;
}

aside {
  position: absolute;
  top: 0;
  float: left;
}