HTML Make a three section Content box - html

Question

I am trying to make a box with a header and two vertical lines in the content section to make box with three sections. I am still a beginner in HTML and have accomplished making the box but cannot figure out how to make the vertical lines. This is what I am trying to make:
All I need to make the two vertical lines inside the box and fill each of the three sections with content. If anyone could help me out or show the right direction I would appreciate it. Sorry for the horrible photo I had to remove some stuff from the screenshot.

Answer 1

This works:
#container{
width:100%;
height:100px;
border:1px solid black;
}
#header{
width:100%;
background:grey;
height:20px;
}
.fourth{
width:25%;
height:100px;
float:left;
}
.half{
width:50%;
height:100px;
border-left:1px solid grey;
border-right:1px solid grey;
float:left;
}
<div id="container">
<div id="header"><div>
<div class="fourth"></div>
<div class="half"></div>
<div class="fourth"></div>
</div>

Answer 2

See the following Pen: http://codepen.io/rkieru/pen/JKyYpx
.line-navbar li {
display: inline-block;
border-right: 1px solid #ccc;
margin: 5px 0;
}
.line-navbar li:last-of-type {
border-right: none;
}
It is an example of a navigational menu with a similar vertical line treatment, but the CSS should apply easily to your content box design. The only caveat would be ensuring that they are applied to the box with the greatest height, or otherwise ensuring that the content boxes are all the same height.

Answer 3

Don't listen to people telling you to use a table. You can do this with flexbox. Here's an example:
.header {
background-color: LightGrey;
}
.column-container {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
}
.column {
padding: 10px;
border-left: 1px solid black;
}
.column:first-child {
border-left: none;
}
<div class="header">
This is header text.
</div>
<div class="column-container">
<div class="column">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ornare, sem sit amet ornare consequat, nunc turpis accumsan urna, ac hendrerit orci sapien eu purus. Proin blandit finibus eros, ut egestas urna aliquam eget. Integer hendrerit metus sed ligula lobortis, et scelerisque libero congue. Nunc facilisis tincidunt dictum. Nam aliquet ullamcorper nisl, ac congue leo pellentesque eget. Vestibulum dui massa, pretium at ex id, aliquet mattis ligula. Aenean ut porta elit. Donec pulvinar a augue non bibendum. Morbi pellentesque erat ut leo tincidunt condimentum.
</div>
<div class="column">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ornare, sem sit amet ornare consequat, nunc turpis accumsan urna, ac hendrerit orci sapien eu purus. Proin blandit finibus eros, ut egestas urna aliquam eget. Integer hendrerit metus sed ligula lobortis, et scelerisque libero congue. Nunc facilisis tincidunt dictum. Nam aliquet ullamcorper nisl, ac congue leo pellentesque eget. Vestibulum dui massa, pretium at ex id, aliquet mattis ligula. Aenean ut porta elit. Donec pulvinar a augue non bibendum. Morbi pellentesque erat ut leo tincidunt condimentum.
</div>
<div class="column">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ornare, sem sit amet ornare consequat, nunc turpis accumsan urna, ac hendrerit orci sapien eu purus. Proin blandit finibus eros, ut egestas urna aliquam eget. Integer hendrerit metus sed ligula lobortis, et scelerisque libero congue. Nunc facilisis tincidunt dictum. Nam aliquet ullamcorper nisl, ac congue leo pellentesque eget. Vestibulum dui massa, pretium at ex id, aliquet mattis ligula. Aenean ut porta elit. Donec pulvinar a augue non bibendum. Morbi pellentesque erat ut leo tincidunt condimentum.
</div>
</div>

Answer 4

By the picture I think what you are looking for is HTML Table.
Example:
<table border="1" width="100%">
<tr>
<th colspan="3">Headline</th>
</tr>
<tr>
<td>Content...</td>
<td>Content...</td>
<td>Content...</td>
</tr>
</table>
You can use CSS to style the box.
PD: Next time show some code, this way we can have a better understanding of what you are trying to do.