I can't fix the
to the same height as article

Question

So I'm having trouble trying to fix the aside height to be the same as my article class but I haven't found one that fixes my problem? I've tried setting the right to 0 but that just created a gap between the article tag and aside tag. How can I fix this?

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

article {
  float: left;
  width: 60%;
  padding: 20px auto;
  background-color: grey;
}

aside {
  float: right;
  width: 40%;
  height: 100%;
  padding: 20px auto;

  background-color: lightgrey;
  border-left: 3px solid black;
}

<article>
   <section>
    <header><h2>Om CSS</h2></header>
    
    <p>
    Lorem Ipsum är en utfyllnadstext från tryck- och förlagsindustrin. Lorem  ipsum     har varit standard ända sedan 1500-talet, när en okänd boksättare tog att antal     bokstäver och blandade dem för att göra ett provexemplar av en bok. Lorem ipsum     har inte bara överlevt fem århundraden, utan även övergången till elektronisk       typografi utan större förändringar. Det blev allmänt känt på 1960-talet i           samband med lanseringen av Letraset-ark med avsnitt av Lorem Ipsum, och senare     med mjukvaror som Aldus PageMaker.
    </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>
        
   </section>
  </article>

<aside>
 <h1>Bildgalleri</h1>
  <img src="images/html5.png " alt="html5">
  <img src="images/css.png"   alt="css3">
</aside>

score 0 · Accepted Answer · answered Apr 15 '19 at 07:56

You could use flexbox.

Also padding does not have auto property.

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.flexbox {
  display: flex;
  flex-flow: row;
}

article {
  flex: 0 0 60%;
  padding: 20px 0;
  background-color: grey;
}

aside {
  flex: 0 0 40%;
  padding: 20px 0;
  background-color: lightgrey;
  border-left: 3px solid black;
}

<div class="flexbox">
  <article>
    <section>
      <header>
        <h2>Om CSS</h2>
      </header>

      <p>
        Lorem Ipsum är en utfyllnadstext från tryck- och förlagsindustrin. Lorem ipsum har varit standard ända sedan 1500-talet, när en okänd boksättare tog att antal bokstäver och blandade dem för att göra ett provexemplar av en bok. Lorem ipsum har inte bara
        överlevt fem århundraden, utan även övergången till elektronisk typografi utan större förändringar. Det blev allmänt känt på 1960-talet i samband med lanseringen av Letraset-ark med avsnitt av Lorem Ipsum, och senare med mjukvaror som Aldus PageMaker.
      </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>

    </section>
  </article>

  <aside>
    <h1>Bildgalleri</h1>
    <img src="images/html5.png " alt="html5">
    <img src="images/css.png" alt="css3">
  </aside>
</div>

Ok, so that worked but it put my header and to the left and my footer to the right :) — ApolloBeached, Apr 15 '19 at 08:04
Be sure to wrap the content in a `

` to encapsulate the flexbox effects. — Daut, Apr 15 '19 at 08:29
Oh, should've figured that out myself. Works perfectly now. Thank you! — ApolloBeached, Apr 15 '19 at 08:38

score 0 · Answer 2 · answered Apr 15 '19 at 07:57

You can achieve this using CSS flexbox

Here is the updated fiddle using flex

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.container {
  display: flex;
  height: 100%;
}

article {
  float: left;
  width: 60%;
  padding: 20px auto;
  background-color: grey;
}

aside {
  float: right;
  width: 40%;
  padding: 20px auto;
  background-color: lightgrey;
  border-left: 3px solid black;
}

<div class="container">
  <article>
    <section>
      <header>
        <h2>Om CSS</h2>
      </header>

      <p>
        Lorem Ipsum är en utfyllnadstext från tryck- och förlagsindustrin. Lorem ipsum har varit standard ända sedan 1500-talet, när en okänd boksättare tog att antal bokstäver och blandade dem för att göra ett provexemplar av en bok. Lorem ipsum har inte bara
        överlevt fem århundraden, utan även övergången till elektronisk typografi utan större förändringar. Det blev allmänt känt på 1960-talet i samband med lanseringen av Letraset-ark med avsnitt av Lorem Ipsum, och senare med mjukvaror som Aldus PageMaker.
      </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>

    </section>
  </article>

  <aside>
    <h1>Bildgalleri</h1>
    <img src="images/html5.png " alt="html5">
    <img src="images/css.png" alt="css3">
  </aside>
</div>

I can't fix the to the same height as article

2 Answers2

I can't fix the
to the same height as article