2

I've been searching now for hours but no result :(

The problem is that the main-content is longer the the sidebars and it doesn't auto adjust the height. I want to make them appear the same size. I could make the sidebar height: 150%, but then I'd get unwanted height on other shorter pages. Another solution would be to overflow: hidden it, but then I won't be able to scroll the page.

Here is my html code: 

<!DOCTYPE html>
<html lang="nl">
  <head>
    <title>Title</title>
    <link type="text/css" rel="stylesheet" href="stylesheet.css"/>
  </head>
  <body>
      <div class="header"><a href="index.html">text</a></div>
    <div class="content">
        <div class="sidebar left">
          <ul>
              <li><a href="1.html">1</a></li>
              <li><a href="2.html">2</a></li>
              <li><a href="3.html">3</a></li>
              <li><a href="4.html">4</a></li>
              <li><a href="5.html">5</a></li>
          </ul>
        </div>
      <div class="main-content">
        <div class="text">
          <h1> text</h1>
          <p>text</p>
          <img src="http://myrrix.com/wp-content/uploads/2012/06/stackoverflow.png" alt="" />
          <h3>text</h3>
          <p>text</p>
          <img src="http://myrrix.com/wp-content/uploads/2012/06/stackoverflow.png" alt="" />
          <p>text</p>
          <h3>text</h3>
          <img src="http://myrrix.com/wp-content/uploads/2012/06/stackoverflow.png" alt="" />
          <p>text</p>
        </div>
      </div>
         <div class="sidebar right"></div>
      </div>

  </body>
</html>

Here is my css:

body, html {
      font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
      margin: 0 auto;
      height: 100%;
      width: 1200px;
      background-color: #F2F2F2;
}

.header {
      position: relative;
      height: auto;
      width: 100%;
      background-color: #2A66A1;
      text-align: center;
      font-family: Garamond;
      font-size: 72px;
    color: white;
}
.content {
      position: relative;
      width: 100%;
      height: 100%;
}
.sidebar {
      position: relative;
      height: 100%;
      border-top: none;
      background: #2A79A1;
      float: left;
      text-decoration: none;
}

.sidebar ul {
      margin: 0;
      padding: 0;
      list-style: none; 
}

.sidebar ul li {
      margin: 0; 
}

.sidebar ul li a {
      padding: 15px 20px;
      font-size: 16px; 
      font-weight: 100;
      color: white; 
      text-decoration: none;
      display: block;
      border-bottom: 1px solid #7799B9;
      transition:  background 0.3s ease-in-out;  
}

.sidebar ul li:hover a {
      background: #7799B9;
}

.sidebar.left {
      float: left; 
      width: 240px;
}

.sidebar.right { 
      float: right;
      width: 10%;
}

.main-content {
      float: left;

}

.header a {
      color: white; 
      text-decoration: none;
}

.text {
      margin: auto;
      width: 800px;
      padding-top: 25px;
}

.text h1 {
      text-align: center;
      padding-bottom: 15px;
}

.text p {
      text-align: left;
      padding-left: 25px;
}

.text h3 {
      text-align: left;
      padding-left: 25px;
}

.text img {
      display: block;
      margin-left: auto;
      margin-right: auto;
}

.text ul li {
      font-weight: bold;
}

.text ul p {
      font-style: italic;
      color: #585858;
}

I found the answer here:

How to create equal height columns in pure CSS

Community
  • 1
  • 1
vixero
  • 514
  • 1
  • 9
  • 21
  • 2
    Your question is one of the most frequently asked questions about CSS. There are lots and lots of resources on the web with answers. Google knows a [few](https://www.google.com/webhp?tab=ww&ei=nfK5UprzK4-l2AW10oGwDw&ved=0CBgQ1S4#newwindow=1&q=css+equal+height+columns) of them. – Stephen Thomas Dec 24 '13 at 20:48
  • ty, I've found the right answer.. apparently I've been using the wrong key words to find something relevant to my problem – vixero Dec 24 '13 at 20:59

0 Answers0