Question 223199 in Html Question posted in
Some basic documentation can be found here.

Html – How to make height of line equal to max of height of contents on either side

I have two html tags.

  1. main
  2. aside

A vertical line separated the contents present in the both tags as shown below.

enter image description here

For adding the vertical line, I used border-right on main tag. Now, the problem is when the amount of content is shorter on main side, the border will be present till that point only. I want the vertical line to be of height max(height of content on main side,height of content on aside side).

How to achieve this ?

Tags:

2

Answers


  1. 0

    Try using "border-right" css property

    e.g.

    aside{
   border-right:1px solid black;
   box-sizing:border-box; /*if needed*/
}
    Login or Signup to reply.
  2. 0

    You can wrap you main content and aside content in a container div and add a separator div that have a border of whatever width or colour you want:

    .container {
  display: flex;
  align-items: stretch; /* Makes both divs equal height */
}

.left-div {
  flex: 1; /* Makes the left div take up 1/2 of the container's width */
  padding: 10px;
}

.right-div {
  flex: 1; /* Makes the right div take up 1/2 of the container's width */
  padding: 10px;
}

.separator {
  width: 2px;
  background-color: #000; /* You can change the color to your desired separator color */
}
    <div class="container">
  <div class="left-div">
    <!-- Content of the "Main content" goes here -->
  </div>
  <div class="separator"></div>
  <div class="right-div">
    <!-- Content of the "aside content" goes here -->
  </div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search