CODEWITHSUNDEEP
htmlcssborder
hsw4840
hsw4840

Reputation: 231

Make bottom borders in line according to the lowest content

I'm developing my homepage using HTML, CSS, JSP and JavaScript, about musical instrument sale and communication of people.

Currently, I'm implementing a site-map for my site's menu configuration chart using div, ul, li and h tags. I would like to create bottom borders under the lowermost submenu items (last li tags) like in the picture below (see the blue indications). They should have bottom borders in line, adjusted to the lowermost (last) li tag.

Bottom borders in line adjusted to the content

How can I achieve my goal? This is what I have so far:

#sitemap_menu_container {
  width: 980px;
  height: 200px;
  border: 1px solid violet;
}


.sitemap_menu {
  width: 150px;
  height: 180px;
  float: left;
  margin-left: 5px;
  margin-right: 5px;
  margin-bottom: 5px;
  border-bottom: 1px solid #cbcbcb;
}

.sitemap_menu_header1 {
  font-size: 15pt;
  font-family: Arial;
  padding-bottom: 7px;
  border-bottom: 1px solid #cbcbcb;
}

.sitemap_menu_header2 {
  font-size: 15pt;
  font-family: Arial;
  color: red;
  padding-bottom: 7px;
  border-bottom: 1px solid #cbcbcb;
}

.sitemap_menu ul li {
  list-style: none;
  font-size: 11pt;
  font-family: Arial;
  background: url(../images/bullet1.png)no-repeat 0px 50%;
  padding-left: 10px;
  margin-left: 10px;
  cursor: pointer;
}
<div id="sitemap_menu_container">
  <div class="sitemap_menu">
    <h2 class="sitemap_menu_header1">About</h2>
    <ul>
      <li>P&G introduce</li>
      <li>P&G history</li>
      <li>location</li>
    </ul>
  </div>
  <div class="sitemap_menu">
    <h2 class="sitemap_menu_header2">Piano goods</h2>
    <ul>
      <li>All kind of piano</li>
      <li>Upright</li>
      <li>Grand</li>
      <li>Electronics</li>
      <li>Synthesizer</li>
      <li>Management Tools</li>
    </ul>
  </div>
  <div class="sitemap_menu">
    <h2 class="sitemap_menu_header1">Guitar goods</h2>
    <ul>
      <li>Acoustic</li>
      <li>Classic</li>
      <li>Electrics</li>
      <li>Ukulele</li>
      <li>Management Tools</li>
    </ul>
  </div>
  <div class="sitemap_menu">
    <h2 class="sitemap_menu_header2">Community</h2>
    <ul>
      <li>Free Board</li>
      <li>Reviews</li>
      <li>Gallery Board</li>
    </ul>
  </div>
  <div class="sitemap_menu">
    <h2 class="sitemap_menu_header1">Event</h2>
    <ul>
      <li>Ongoing Event</li>
      <li>Announcement</li>
    </ul>
  </div>
  <div class="sitemap_menu">
    <h2 class="sitemap_menu_header2">Help you</h2>
    <ul>
      <li>Guide</li>
      <li>Notice</li>
      <li>FAQ</li>
      <li>Q&A</li>
      <li>Sitemap</li>
    </ul>
  </div>
</div>

Upvotes: 0

Views: 75

Answers (3)

Richard Casetta
Richard Casetta

Reputation: 446

In order to do that, you can use flexbox to be more flexible. Indeed, remove the height constraint in #sitemap_menu_container and .sitemap-menu and add display: flex to #sitemap_menu_container. Here is the snippet:

#sitemap_menu_container {
  width: 980px;
  border: 1px solid violet;
  display: flex;
}


.sitemap_menu {
  width: 150px;
  float: left;
  margin-left: 5px;
  margin-right: 5px;
  margin-bottom: 5px;
  border-bottom: 1px solid #cbcbcb;
}

.sitemap_menu_header1 {
  font-size: 15pt;
  font-family: Arial;
  padding-bottom: 7px;
  border-bottom: 1px solid #cbcbcb;
}

.sitemap_menu_header2 {
  font-size: 15pt;
  font-family: Arial;
  color: red;
  padding-bottom: 7px;
  border-bottom: 1px solid #cbcbcb;
}

.sitemap_menu ul li {
  list-style: none;
  font-size: 11pt;
  font-family: Arial;
  background: url(../images/bullet1.png)no-repeat 0px 50%;
  padding-left: 10px;
  margin-left: 10px;
  cursor: pointer;
}
<div id="sitemap_menu_container">
  <div class="sitemap_menu">
    <h2 class="sitemap_menu_header1">About</h2>
    <ul>
      <li>P&G introduce</li>
      <li>P&G history</li>
      <li>location</li>
    </ul>
  </div>
  <div class="sitemap_menu">
    <h2 class="sitemap_menu_header2">Piano goods</h2>
    <ul>
      <li>All kind of piano</li>
      <li>Upright</li>
      <li>Grand</li>
      <li>Electronics</li>
      <li>Synthesizer</li>
      <li>Management Tools</li>
    </ul>
  </div>
  <div class="sitemap_menu">
    <h2 class="sitemap_menu_header1">Guitar goods</h2>
    <ul>
      <li>Acoustic</li>
      <li>Classic</li>
      <li>Electrics</li>
      <li>Ukulele</li>
      <li>Management Tools</li>
    </ul>
  </div>
  <div class="sitemap_menu">
    <h2 class="sitemap_menu_header2">Community</h2>
    <ul>
      <li>Free Board</li>
      <li>Reviews</li>
      <li>Gallery Board</li>
    </ul>
  </div>
  <div class="sitemap_menu">
    <h2 class="sitemap_menu_header1">Event</h2>
    <ul>
      <li>Ongoing Event</li>
      <li>Announcement</li>
    </ul>
  </div>
  <div class="sitemap_menu">
    <h2 class="sitemap_menu_header2">Help you</h2>
    <ul>
      <li>Guide</li>
      <li>Notice</li>
      <li>FAQ</li>
      <li>Q&A</li>
      <li>Sitemap</li>
    </ul>
  </div>
</div>

Keep in mind that it's only working in modern browsers: https://caniuse.com/#search=flexbox. If you target older borwser, I think you need to use a table.

Hope this helps

Upvotes: 1

Carl Binalla
Carl Binalla

Reputation: 5401

You can use <hr> instead, just adjust the height of the columns

#sitemap_menu_container {
  width: 980px;
  height: 200px;
  border: 1px solid violet;
}

.sitemap_menu {
  width: 150px;
  height: 180px;
  float: left;
  margin-left: 5px;
  margin-right: 5px;
  margin-bottom: 5px;
}

.sitemap_menu_header1 {
  font-size: 15pt;
  font-family: Arial;
  padding-bottom: 7px;
  border-bottom: 1px solid #cbcbcb;
}

.sitemap_menu_header2 {
  font-size: 15pt;
  font-family: Arial;
  color: red;
  padding-bottom: 7px;
  border-bottom: 1px solid #cbcbcb;
}

.sitemap_menu ul li {
  list-style: none;
  font-size: 11pt;
  font-family: Arial;
  background: url(../images/bullet1.png)no-repeat 0px 50%;
  padding-left: 10px;
  margin-left: 10px;
  cursor: pointer;
}
<div id="sitemap_menu_container">
  <div class="sitemap_menu">
    <h2 class="sitemap_menu_header1">About</h2>
    <ul>
      <li>P&G introduce</li>
      <li>P&G history</li>
      <li>location</li>
    </ul>
    <hr>
  </div>
  <div class="sitemap_menu">
    <h2 class="sitemap_menu_header2">Piano goods</h2>
    <ul>
      <li>All kind of piano</li>
      <li>Upright</li>
      <li>Grand</li>
      <li>Electronics</li>
      <li>Synthesizer</li>
      <li>Management Tools</li>
    </ul>
    <hr>
  </div>
  <div class="sitemap_menu">
    <h2 class="sitemap_menu_header1">Guitar goods</h2>
    <ul>
      <li>Acoustic</li>
      <li>Classic</li>
      <li>Electrics</li>
      <li>Ukulele</li>
      <li>Management Tools</li>
    </ul>
    <hr>
  </div>
  <div class="sitemap_menu">
    <h2 class="sitemap_menu_header2">Community</h2>
    <ul>
      <li>Free Board</li>
      <li>Reviews</li>
      <li>Gallery Board</li>
    </ul>
    <hr>
  </div>
  <div class="sitemap_menu">
    <h2 class="sitemap_menu_header1">Event</h2>
    <ul>
      <li>Ongoing Event</li>
      <li>Announcement</li>
    </ul>
    <hr>
  </div>
  <div class="sitemap_menu">
    <h2 class="sitemap_menu_header2">Help you</h2>
    <ul>
      <li>Guide</li>
      <li>Notice</li>
      <li>FAQ</li>
      <li>Q&A</li>
      <li>Sitemap</li>
    </ul>
    <hr>
  </div>
</div>

Upvotes: 0

Fenil Shah
Fenil Shah

Reputation: 158

Just add the below css to give border-bottom to the last <li> of your sub-menu

.sitemap_menu ul li:last-child{border-bottom:1px solid #000;}

Upvotes: 1

Related Questions