CODEWITHSUNDEEP
javascripthtmlcss
MCC
MCC

Reputation: 542

divs not filling white-space in display: table;

I have created a slideshow and to the right of it there are divs, they will be enlarged when you hover over them and when you take your cursor off the div it will shrink. But, the aside (the divs parent) is in the correct place where it should be, it's the divs that aren't filling the top of the aside element. How can I get the divs to fill the aside element and not break anything else?

.thing {
  height: 120px;
  width: 250px;
  z-index: 10;
  position: relative;
  border: 5px solid brown;
}
.thing:hover {
  position: absolute;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 11;
}
.report {
  text-align: left;
  vertical-align: top;
  display: table;
  width: 100%;
}
.aside {
  display: table-cell;
  padding-top: 5px;
  width: 250px;
  border-radius: 10px;
  border: 2px solid black;
  overflow: hidden;
  position: relative;
  height: 385px;
}
.container {
  position: relative;
  width: 750px;
  height: 400px;
  border-radius: 5px;
  border: 1px solid black;
  overflow: hidden;
}
<div class="report">
  <div id="imgGallary" class="container">
    <img src="images/companies.png" alt="" width="750" height="400" />
    <img src="gallery" alt="" width="750" height="400" />
  </div>
  <aside class="aside">
    <div id="c1"></div>
    <div class="thing" style="background-color: blue;">
      <h1>Find Us!</h1>
    </div>
    <div class="thing" style="background-color: orange;"></div>
    <div class="thing" style="background-color: pink"></div>
  </aside>
</div>

Upvotes: 0

Views: 53

Answers (1)

serraosays
serraosays

Reputation: 7869

Your CSS layout is confusing display: table and display: relative. They aren't compatible like you have them. The preferred way to layout your .container and the aside would be to use floats. I revised your example to float those two containers next to each other (roughly at a 80/20 split for the width). This has the added bonus of making your layout responsive.

Working codepen: http://codepen.io/staypuftman/pen/vKoPmw

.thing {
  height: 120px;
  width: 250px;
  position: relative;
  border: 5px solid brown;
}
.thing:hover {
  position: absolute;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 1;
}
.report {
  text-align: left;
  vertical-align: top;
  display: table;
  width: 100%;
}
.aside {
  padding-top: 5px;
  width: 18%;
  border-radius: 10px;
  border: 1% solid black;
  overflow: hidden;
  float: left;
  position: relative;
  height: 385px;
}
.container {
  float: left;
  width: 80%;
  height: 400px;
  border-radius: 5px;
  border: 1px solid black;
  overflow: hidden;
}

Upvotes: 2

Related Questions