CODEWITHSUNDEEP
htmlcssposition
Benas Lengvinas
Benas Lengvinas

Reputation: 424

Positioning section and aside

Heyo, so I'm having a bit of hard time making aside and section to position correctly when making the screen smaller. What happens is the section drops below the aside when shrinking the screen. Here the pen: https://codepen.io/anon/pen/gxjbyg

Here's the code:

#container {
width:90%;
margin: 0 auto;
background:pink;
height:300px;
}
aside {
width:12%;
height:100px;
background:green;
border-radius:20px;
display:inline-block;
margin-right:20px;
}
section {
width:86%;
height:100px;
background:purple;
border-radius:20px;
display:inline-block;
}

Upvotes: 0

Views: 1251

Answers (2)

kmg
kmg

Reputation: 519

Here margin-right: 20px; of aside inturn causes the overall width to increase above 100%. Reduce this to margin-right: 15px; which will solve the issue.

Upvotes: 1

Chiller
Chiller

Reputation: 9738

Use width:calc(86% - 20px); one the section to take on consideration the margin-right that you used on aside which is 20px;

#container {
  width:90%;
  margin: 0 auto;
  background:pink;
  height:300px;
}
aside {
  width:12%;
  height:100px;
  background:green;
  border-radius:20px;
  display:inline-block;
  margin-right:20px;
}
section {
  width:calc(86% - 20px);
  height:100px;
  background:purple;
  border-radius:20px;
  display:inline-block;
}
<div id="container">
  <aside>ASIDE</aside>
  <section>SECTION</section>
</div>

Upvotes: 1

Related Questions