CODEWITHSUNDEEP
htmlcss
Jeroen
Jeroen

Reputation: 544

How to add horizontal line beneath some divs?

I'm sure this will be very basic, but I'm quite new to coding and I'm still learning. I have the following divs:

<div class="wrapper">
 <div class="panel-panel panel-col-left">
  <div class="inside"><?php print $content['top_left']; ?></div>
  </div>
  <div class="panel-panel panel-col-middle">
   <div class="inside"><?php print $content['top_middle']; ?></div>
  </div>
  <div class="panel-panel panel-col-right">
   <div class="inside"><?php print $content['top_right']; ?></div>
  </div>
 </div>
</div>

Now, I'd like to add a horizontal line underneath the whole section, so I tried adding this CSS code:

.wrapper {
  border-bottom: 1px solid #ccc;
}

.panel-col-left {
  float: left;
  width: 20%;
}

.panel-col-middle {
  float: left;
  width: 40%;
}

.panel-col-right {
  float: left;
  width: 40%;
}

Apparently, this isn't displayed correctly: the horizontal line is situated at the top.

What did I do wrong?

Upvotes: 1

Views: 2421

Answers (2)

jmore009
jmore009

Reputation: 12931

you need to clear the floating elements. You can use a clearfix or overflow:hidden on the wrapper

JSFIDDLE

Upvotes: 3

j08691
j08691

Reputation: 208032

Because you floated the child divs, you need to limit the block formatting context of the floated div's container and add overflow:auto to .wrapper so it can contain them again:

.wrapper {
    border-bottom: 1px solid #ccc;
    overflow:auto;
}

Upvotes: 5

Related Questions