CSS Having border around 2 divs

Question

I'm using TYPO3 with a calendar extension (cal). It creates events and shows them as a list. Currently, it looks like that:

Now I want to have a border around the date, but just as big as the text.

This is the extension's template:

<div class="col-md-3 text-center" style="text-align:center;">
    <div class="event-wrapper">
        <div class="img-wrapper">
            <div class="date-wrapper">
                <div class="date" title="###MICROFORMAT_START###" class="dtstart"><span class="borderspan">###STARTDATE###</span></div>
            </div>
            <div class="image">###IMAGE###</div>
        </div>
        <div class="text-wrapper">
            <div class="time">###STARTTIME######ENDTIME###</div>
            <h3><!-- ###EVENT_LINK### start-->###TITLE###<!-- ###EVENT_LINK### end--></h3>
            <p>###DESCRIPTION###</p>
        </div>
    </div>
</div>

Div with class "date" is the relevant part.

This template creates this code:

    <div class="col-md-3 text-center" style="text-align:center">
        <div class="event-wrapper">
            <div class="img-wrapper">
                <div class="date-wrapper">
                    <div class="date" title="20170118T210000" class="dtstart"><span class="borderspan">
<div class="day">18.</div>
<div class="month">Januar</div></span>
</div>
                </div>
                <div class="image"></div>
            </div>
            <div class="text-wrapper">
                <div class="time">21:00 Uhr - 23:00 Uhr</div>
                <h3>Frankfurt/Main</h3>
                <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takim</p>
            </div>
        </div>
    </div>

I tried to give the class "borderspan" a border, but this didn't worked and looked like this afterwards:

How can I have a border around the date?

Answer 1

You could try using ::before and ::after like so:

 .date-wrapper { max-width: 200px; background: orange; text-align: center; } .date::before, .date::after { content: ""; width: 1px; height: 25px; background: black; display: block; margin: 0 auto; } .date { margin: 25px 0; } 

 <div class="date-wrapper"> <div class="date" title="###MICROFORMAT_START###"> <span class="borderspan">###STARTDATE###</span> </div> </div> 

Also notice (like @Banzay mentions) don't use class="" twice per element.

Answer 2

Your date is a <div> element which is block element by default. Means it take up whole width available. We need to make it inline-block, so the width will be content related. Plus add some padding to make some space between the text and a border. I set the border width equal to your text-line width and color to match the text color. Take a look:

.date {
  display: inline-block;
  padding: 7px;
  border: 7px solid #ea644f;
}