CODEWITHSUNDEEP
htmlcsscss-float
S.Marie
S.Marie

Reputation: 5

Need two left floated divs to fit height of parent

I'm having trouble getting both of my floated divs to fit the height of the parent div.

I've seen a few different solutions but I run into trouble because I also need the parent div to fill the screen when the amount of content is smaller.

I can get one floated div to fill the space but if the other one has more content then it looks strange.

I posted the css that I think is effected. You can find the rest in my jsfiddle.

* {
  margin: 0;
  padding: 0
}
html {
  height: 100%;
}
body {
  position: relative;
  min-height: 100%;
  /* to fill screen 100% even with less content */
  height: 100%;
  /* to allocate only 100% height */
  background-color: #460000;
  margin: 0;
  padding: 0;
  font-family: Georgia, "Times New Roman", Times, serif;
  color: #fff;
  font-weight: 300;
}
#container {
  height: 100%;
  overflow: auto;
  width: 72%;
  margin: 0 auto;
  background-color: #460000;
  border-left: #ECA845 solid 8px;
  border-right: #ECA845 solid 8px;
  border-bottom: #ECA845 solid 8px;
  -webkit-box-shadow: 0px 0px 29px 14px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 0px 0px 29px 14px rgba(0, 0, 0, 0.75);
  box-shadow: 0px 0px 29px 14px rgba(0, 0, 0, 0.75);
}
#container::-webkit-scrollbar {
  display: none;
}
body::-webkit-scrollbar {
  display: none;
}
#main {
  font-size: .75em;
  background: url(image/rightt.png) repeat-y right;
  background-color: #1281A6;
  min-height: calc(100% - 505px);
  height: auto;
  float: left;
  width: 75%;
}
#sidebar {
  background-color: #498A21;
  min-height: calc(100% - 505px);
  height: auto;
  float: left;
  width: 25%;
}
<body>
  <div id="container">
    <div id="top">
    </div>
    <nav>

      <ul>
        <li class="start selected"><a href="index.html">HOME</a>
        </li>
        <li class=""><a href="#">MEN</a>
        </li>
        <li><a href="#">WOMEN</a>
        </li>
        <li><a href="#">PAST ADS</a>
        </li>
        <li><a href="#">SALES</a>
        </li>
        <li><a href="#">SHOWS</a>
        </li>
        <li><a href="#">NEWS</a>
        </li>
        <li class="end"><a href="#">CONTACT</a>
        </li>
      </ul>

    </nav>
    <div id="main">
      <article>
        <h1>Welcome</h1>
        <br>
        <div align="center">
        </div>
        <br>
        <p>Proin a risus id diam feugiat pulvinar blandit a lorem. In nec nibh eros. Morbi vitae quam sit amet quam euismod posuere ullamcorper a velit. Nullam blandit nulla lectus, sit amet gravida eros rhoncus id. Duis at efficitur nisi, sit amet aliquet
          leo. Nam dolor enim, malesuada non sollicitudin eget, tempus ut nisi. Cras tellus tellus, volutpat nec nibh non, aliquet malesuada eros. Aenean placerat feugiat dolor at egestas. Aenean vulputate sapien eu erat semper tincidunt. Morbi sodales
          sit amet dolor vitae malesuada. Quisque vel dolor vel massa sollicitudin finibus. Nullam pharetra interdum nisi nec viverra. Aliquam in dolor efficitur, volutpat lorem ac, sodales erat. Donec id rhoncus quam.</p>

        <p>Nam laoreet sodales condimentum. Aliquam velit nunc, volutpat quis erat a, imperdiet vehicula eros. Suspendisse potenti. Phasellus diam libero, hendrerit nec mauris ac, sodales scelerisque eros. Aliquam luctus neque sed turpis tristique, in feugiat
          velit ultricies. Phasellus efficitur, velit eget lacinia accumsan, ipsum lacus posuere ipsum, quis elementum augue augue quis risus. Duis laoreet, turpis vel consequat tempor, tortor odio mollis orci, nec ultrices ex sem eu erat. Cras faucibus,
          libero sit amet viverra ultrices, elit enim imperdiet dui, ut blandit urna leo eu turpis. Quisque feugiat imperdiet efficitur. Sed finibus tortor at bibendum eleifend. Phasellus ornare venenatis leo non tincidunt.</p>
      </article>
    </div>
    <div id="sidebar">
      <ul>
        <li>
          <ul class="newslist">
            <li>
              <h4>Upcoming Sale</h4>
              <p>Join us at the sale</p>
            </li>
          </ul>

          <ul class="newslist">
            <li>
              <h4>Thank You</h4>
              <p>Ladies and Gentlemen</p>
            </li>
          </ul>

          <ul class="newslist">
            <li>
              <h4>Latest Catalogue</h4>
              <br>
              <p>View the catalogue</p>
            </li>
          </ul>
      </ul>
    </div>
    <div class="clear"></div>


  </div>
  <footer>
    <p><a href="#" target="_blank">Text Here</a>
    </p>
  </footer>

</body>

Upvotes: 0

Views: 59

Answers (2)

user1793716
user1793716

Reputation:

When you want two or more columns to be equal height (that is the height of the longest column), I advocate using the following method:

CSS

.eq-col-group {
  overflow: hidden;
}

.eq-col {
  margin-bottom: -32767px;
  padding-bottom: 32767px;
}

HTML

<div id="container">
  <!-- etc. -->
  <div class="eq-col-group">
    <div id="main" class="eq-col">
      <!-- etc. -->
    </div>
    <div id="sidebar" class="eq-col">
      <!-- etc. -->
    </div>
    <div class="clear"></div>
  </div>
  <!-- etc. -->
</div>

JS Fiddle

This is the trick known as the "One True Layout" method, see this CSS-Tricks article for a summary of different 'equal column height' methods.

The attributed author of this technique (link above) states that the value of 32767px is the largest value supported by an older Safari browser, otherwise smaller values will suffice for use-cases where the height of columns are expected to be smaller (but you may as well leave it at 32767px).

Basically, the container element .eq-col-group assumes the height of the content of the largest column. Each individual .eq-col column is at least 32767px high whether it has child elements or not, but you won't see the excess, as overflow: hidden clips the container element .eq-col-group after the last element of the largest column.

I advise encapsulating this logic according to the principle of Don't-Repeat-Yourself, by putting these rules in their own appropriately named classes for re-use and better review of the HTML.

Note: This method is great because it works in legacy IE browsers (like IE 8) where other methods based on CSS3 properties will not.

Upvotes: 0

dippas
dippas

Reputation: 60573

you can use flexbox to achieve that:

I changed your markup a bit and tweaked your CSS as well.

*,
*::before,
*::after {
  box-sizing: border-box
}
* {
  margin: 0;
  padding: 0
}
html,
body {
  height: 100%;
}
body {
  position: relative;
  /* to allocate only 100% height */
  background-color: #460000;
  margin: 0;
  padding: 0;
  font-family: Georgia, "Times New Roman", Times, serif;
  color: #fff;
  font-weight: 300;
}
#container {
  height: auto;
  width: 72%;
  margin: 0 auto;
  background-color: #460000;
  border: #ECA845 solid border-width: 0 8px 8px;
  box-shadow: 0px 0px 29px 14px rgba(0, 0, 0, 0.75);
}
#container::-webkit-scrollbar {
  display: none;
}
body::-webkit-scrollbar {
  display: none;
}
@font-face {
  font-family: huntson;
  src: url(fonts/huntson.ttf);
}
img {
  max-width: 100%;
  height: auto;
  margin: 0;
  padding: 0;
}
#main {
  font-size: .75em;
  background: url(image/rightt.png) repeat-y right;
  background-color: #1281A6;
  height: auto;
  display: flex;
}
#sidebar {
  background-color: #498A21;
  height: auto;
}
#sidebar h4 {
  font-family: huntson;
  font-size: 2.75em;
  color: #000;
  padding: 20px 0px;
  letter-spacing: -0.5px;
  text-align: center;
  border-bottom: #470C0E solid 4px;
}
#sidebar ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
#sidebar ul li {
  margin-bottom: 20px;
  line-height: 1.9em;
  padding: 10px;
}
#sidebar ul li.bg {
  background-color: #333;
}
#sidebar li ul {
  list-style: none outside none;
  margin: 0px;
}
#sidebar li ul li {
  display: block;
  border-top: none;
  padding: 7px 2px;
  margin: 0;
  line-height: 1.5em;
  font-size: 0.85em;
}
#sidebar ul.blocklist {
  border-top: 1px solid #333;
}
#sidebar ul.blocklist li {
  border-bottom: 1px solid #333;
  padding: 0;
}
#sidebar ul.blocklist li a {
  border-bottom: 0;
  display: block;
  padding: 12px 10px;
}
#sidebar ul.blocklist li a.selected {
  background-color: #E8D46F;
  background: linear-gradient(#E8D46F, #E9B252);
  border: 1px solid #9B7830;
  color: #fff;
  font-weight: bold;
}
#sidebar ul.newslist li {
  padding: 30px 5px;
  text-align: center;
}
#sidebar ul.newslist p {
  color: #000;
  font-size: 1.1em;
  font-weight: bold;
}
footer {
  height: 50px;
  width: 100%;
}
footer p,
footer p a {
  color: #fff;
  text-decoration: none;
  text-align: center;
  padding-top: 15px;
}
article {
  padding: 10px 40px 20px 5px;
}
article p {
  font-size: 1.25em;
  line-height: 1.9em;
  margin-bottom: 20px;
}
h1 {
  color: #FFF;
  font-family: huntson;
  font-size: 5em;
  font-weight: 200;
  padding: 0 0 5px;
  margin: 0;
}
img.border {
  border: 5px #fff solid;
  margin-bottom: 20px;
}
nav {
  width: 100%;
  background-color: #CCB088;
  padding: 15px 0px;
}
nav ul {
  list-style: none;
  margin: 0;
  text-align: center;
}
nav ul li {
  display: inline;
  padding: 0px 18px;
}
nav ul li a {
  color: #470C0E;
  font-size: 1em;
  text-decoration: none;
  letter-spacing: 0;
  border-bottom: none;
  font-family: "Arial Black", Gadget, sans-serif;
}
nav ul li a:hover {
  text-decoration: none;
  color: #fff;
  border-bottom: 1px solid #ECA845;
}
nav ul li.selected a,
nav ul li.selected a:hover {
  color: #931C1F;
}
.clear {
  clear: both;
}
<div id="container">
  <nav>
    <ul>
      <li class="start selected"><a href="index.html">HOME</a>
      </li>
      <li class=""><a href="#">MEN</a>
      </li>
      <li><a href="#">WOMEN</a>
      </li>
      <li><a href="#">PAST ADS</a>
      </li>
      <li><a href="#">SALES</a>
      </li>
      <li><a href="#">SHOWS</a>
      </li>
      <li><a href="#">NEWS</a>
      </li>
      <li class="end"><a href="#">CONTACT</a>
      </li>
    </ul>
  </nav>
  <div id="main">
    <article>
      <h1>Welcome</h1>
      <p>Proin a risus id diam feugiat pulvinar blandit a lorem. In nec nibh eros. Morbi vitae quam sit amet quam euismod posuere ullamcorper a velit. Nullam blandit nulla lectus, sit amet gravida eros rhoncus id. Duis at efficitur nisi, sit amet aliquet
        leo. Nam dolor enim, malesuada non sollicitudin eget, tempus ut nisi. Cras tellus tellus, volutpat nec nibh non, aliquet malesuada eros. Aenean placerat feugiat dolor at egestas. Aenean vulputate sapien eu erat semper tincidunt. Morbi sodales
        sit amet dolor vitae malesuada. Quisque vel dolor vel massa sollicitudin finibus. Nullam pharetra interdum nisi nec viverra. Aliquam in dolor efficitur, volutpat lorem ac, sodales erat. Donec id rhoncus quam.</p>

      <p>Nam laoreet sodales condimentum. Aliquam velit nunc, volutpat quis erat a, imperdiet vehicula eros. Suspendisse potenti. Phasellus diam libero, hendrerit nec mauris ac, sodales scelerisque eros. Aliquam luctus neque sed turpis tristique, in feugiat
        velit ultricies. Phasellus efficitur, velit eget lacinia accumsan, ipsum lacus posuere ipsum, quis elementum augue augue quis risus. Duis laoreet, turpis vel consequat tempor, tortor odio mollis orci, nec ultrices ex sem eu erat. Cras faucibus,
        libero sit amet viverra ultrices, elit enim imperdiet dui, ut blandit urna leo eu turpis. Quisque feugiat imperdiet efficitur. Sed finibus tortor at bibendum eleifend. Phasellus ornare venenatis leo non tincidunt.</p>
    </article>
    <div id="sidebar">
      <ul>
        <li>
          <ul class="newslist">
            <li>
              <h4>Upcoming Sale</h4>
              <p>Join us at the sale</p>
            </li>
          </ul>

          <ul class="newslist">
            <li>
              <h4>Thank You</h4>
              <p>Ladies and Gentlemen</p>
            </li>
          </ul>

          <ul class="newslist">
            <li>
              <h4>Latest Catalogue</h4>
              <br>
              <p>View the catalogue</p>
            </li>
          </ul>
      </ul>
    </div>
  </div>

  <div class="clear"></div>
</div>
<footer>
  <p><a href="#" target="_blank">Text Here</a>
  </p>
</footer>

Upvotes: 1

Related Questions