Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by sandygomez
sandygomez
2,498 Points

How can I set all columns to be the same height in fluid layout?

need to set equal heights for 2 columns in percentage based layout. Main content floated left and Aside is also floated to the left. my aside has less content than my main content area, so its making my layout look off. (http://codepen.io/sandyngomez/pen/MwzBdd?editors=110)

1 Answer

John Norris
John Norris
22,455 Points
John Norris
John Norris
22,455 Points

Wrap the main and aside sections in a parent container div

<div class="container">
  <main>
    <h2>Chase laser vommit food and eat it again</h2>
    <p>Behind the couch the dog smells bad. Purr for no reason bathe private parts with tongue then lick owner's face play riveting piece on synthesizer keyboard for the dog smells bad so refuse to drink water except out of someone's glass curl into a furry
      donut claw drapes. Shake treat bag run in circles, but jump off balcony, onto stranger's head leave fur on owners clothes chase red laser dot i like big cats and i can not lie yet paw at your fat belly. Jump around on couch, meow constantly until
      given food, hack up furballs get video posted to internet for chasing red dot ears back wide eyed so intently sniff hand. Scamper. Peer out window, chatter at birds, lure them to mouth bathe private parts with tongue then lick owner's face yet pooping
      rainbow while flying in a toasted bread costume in space. Scamper vommit food and eat it again. Hate dog chase laser hide from vacuum cleaner. If it fits, i sits jump off balcony, onto stranger's head hide when guests come over. Destroy the blinds
      swat at dog stand in front of the computer screen play riveting piece on synthesizer keyboard. Leave hair everywhere poop on grasses or kick up litter missing until dinner time mark territory kick up litter use lap as chair. Purr while eating then
      cats take over the world mark territory, so love to play with owner's hair tie.
    </p>
  </main>
  <aside>
    <ul>
      <li><a href="#">About Me</a></li>
      <li><a href="#">More Stuff</a></li>
      <li><a href="#">submit your pics</a></li>
    </ul>
  </aside>
</div>

Then create a new .container class in your css with the display:flex property. Also, set the float on aside to right.

.container {
  display: flex;
}

aside {
  width: 25%;
  background-color: purple;
  float: right;
}

main {
  width: 75%;
  background-color: hotpink;
  float: left;
  padding: 2%;
 }
sandygomez
sandygomez
2,498 Points

Is there a reason why I would not wrap the footer in the new container div? because it does the trick, but now I have a margin gap between the container div and the footer.