CODEWITHSUNDEEP
htmlcsstypo3
user5582011
user5582011

Reputation:

CSS Having border around 2 divs

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

enter image description here

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:

enter image description here

How can I have a border around the date?

Upvotes: 0

Views: 91

Answers (2)

Mike
Mike

Reputation: 1999

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;
}

Upvotes: 0

Ron van der Heijden
Ron van der Heijden

Reputation: 15070

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.

Upvotes: 1

Related Questions