CODEWITHSUNDEEP
htmlcss
A. Vreeswijk
A. Vreeswijk

Reputation: 954

HTML Div content below each other

I have a very simple question, that I can't figure out why this is happening. The 2 <span> tags need to be below each other, but they are next to each other. I already tried setting the width to 100%, but still no luck. I want the title and the value to be in the center, but the title need to use 30% of the height and the value 70% of the height. How can I fix this?

.activity-24h .stat-frame {
    position: relative;
    width:calc(100% / 5 - (4 * 2px));
    display: flex;
    justify-content: center;
}

.activity-24h .stat-frame-title {
    color: #000000;
    font-size: 20px;
    font-weight: bold;
    padding: 10px;
    width: 100%;
    height: 30%;
}

.activity-24h .stat-frame-value {
    color: #d81e05;
    font-size: 28px;
    font-weight: bold;
    width: 100%;
    height: 70%;
}
<div class="stat-frame">
    <span class="stat-frame-title">Actieve gebruikers</span>
    <span class="stat-frame-value">1054</span>
</div>

Upvotes: 0

Views: 1589

Answers (4)

John Harper
John Harper

Reputation: 135

spans are inline elements and will try to take up only as much room as they need and will not cause a line break.

divs are block elements that will try to take up a full line.

If you change the spans to divs they will stack and each be on their own line.

https://www.w3schools.com/html/html_blocks.asp

Upvotes: 0

samkitson
samkitson

Reputation: 184

Try flex-direction: column on the .stat-frame wrapper.

Upvotes: 1

Burdy
Burdy

Reputation: 113

try this:

<div class="stat-frame">
    <span class="stat-frame-title">Actieve gebruikers</span>
<br/>
    <span class="stat-frame-value">1054</span>
</div>

And for the text, i suggest

create a class :

className{
text-align:center;
}

and use it as:

<div class="stat-frame">
    <span class="stat-frame-title className">Actieve gebruikers</span>
<br/>
    <span class="stat-frame-value">1054</span>
</div>

Upvotes: 0

iamaword
iamaword

Reputation: 1507

A tag in by default an inline element: https://www.w3schools.com/html/html_blocks.asp

to have an element take up an entire line you could use display: block;, or just change the spans to divs

Upvotes: 1

Related Questions