CODEWITHSUNDEEP
csscss-float
JackTheKnife
JackTheKnife

Reputation: 4144

Floating DIVs and 100% height

I have try multiple solutions from StackOverflow but any of them is not working for my code which in a simple way looks like:

<div class="container">
  <div class="content">Right side content, often short</div>
  <div class="sidebar">Left side sidebar, often twice much longer than right side content</div>
</div>

and CSS for it:

.container {
  background: #fff;
  overflow: hidden;
  height: 100%;
}

.sidebar {
  background: #00ffff;
  width: 30%;
  float: left;
}

.content {
   background: #666;
   width: 70%;
   float: right;
}

As I wrote above I have tested selected solutions which in most cases are for a right column bigger than left one but not opposite way as I have above.

UPDATE: I have ended up adding min-height attribute to floating right column with a value which will fix smallest content appearance. Any solution wasn't working for that particular theme.

Upvotes: 0

Views: 434

Answers (2)

Rovi
Rovi

Reputation: 259

Use the below styling, it would fix your problem:

body, html {
    height: 100%;
}
.container {
  background: #fff;
  overflow: hidden;
  height: 100%;
}

.sidebar {
  background: #00ffff;
  width: 30%;
  float: left;
  height: 100%;
}

.content {
   background: #666;
   width: 70%;
   float: right;
   height: 100%;
}

Upvotes: 0

Mike Resoli
Mike Resoli

Reputation: 967

You have misspelled .sidebar as .sideabr in your CSS.

Upvotes: 2

Related Questions