Beginnerprogrammer Beginnerprogrammer - 3 months ago 15
CSS Question

How to resize div based on text within div

I have different

div
's which looks like this:

<div class="marker marker-availability" style="left: 975.516px; top: 346.265px;">
<span class="marker-label">Tenten comfort</span>
<div style="background-color:#7ba1bc" class="cluster-background">
<span class="marker-id">81</span>
</div>
</div>

<div class="marker marker-availability">
<span class="marker-label">Standaard kampeerplaatsen</span>
<div style="background-color:#d99200" class="cluster-background">
<span class="marker-id">81</span>
</div>
</div>


But now I have an issue because I set an
:after
with an image to the bottom of the image which looks like this:

enter image description here

Now you see the issue very clear, I tried to set the
height
to auto and set an
min-height
but this will not solve the problem.

I have recreated a jsfiddle: jsfiddle

Here is my less code:

&.marker-availability {
display: block;
width: 120px;
height: 23px;
color: #fff;
background-color: #6f6926;
border: 2px solid #fff;
border-radius: 2px;
margin-left: -60px;
margin-top: -26px;

.marker-label {
margin-top: 1px;
margin-left: 1px;
font-size: 12px;
font-weight: 500;
color: #fff;
}

.cluster-background {
.square(25px);
background-color: black;
color: #fff;
margin-top: -30px;
margin-left: -12px;
border-radius: 50%;


&:after {
.retina-image('/img/map/clustermarker-point.png', '/img/map/clustermarker-pointx2.png', 184px, 55px);
.pos-b-l(-26px, 50%);
.translate(-50%, -50%);
content: "";
display: block;
width: 120px;
height: 20px;
background-repeat: no-repeat;
}
}

.marker-id {
padding-top: 1px;
padding-left: 1px;
font-size: 15px;
}
}


Thereby, my question is it possible to make it look like this:

enter image description here

Or is it not possible because of the position of the :after image

Answer

The problem was primarily your negative margins which should be avoided if possible.

I've updated your example, you just need to adjust the paddings:

https://jsfiddle.net/txsv0ha5/

removed:

    margin-top: -30px;
    margin-left: -12px;

Also your bottom background shouldn't be an :after Element of your colored circles but rather of the whole marker itself.

Comments