[Resolved] box does not display around images

[Coen]

I’ve been experimenting with two things at the same time:

– boxes around text
– columns

Now, I can get a box around text, but when I insert an image, the box doesn’t wrap around the image and text.

I am testing it on a page here:
https://landcruisingadventure.com/testing-boxes/

What am I doing wrong here?

This is my CSS:

/* =simple colored box 
--------------------------------------

this will put a yellow box around content

----------------- */

#primary .entry-content .content-box .title {
margin: -2rem -2rem 1rem -2rem;
padding: 0.5rem 2rem 0.5rem 1rem;
display: block;
font-weight: bold;
color: #FFF;
background: #984b43;
font-size: 1.125rem;
}

.entry-content .content-box.bfb1{
border-color: #984b43;
}
 
.entry-content .content-box.bfb1{
background: #eac67a;
}
 
.entry-content .content-box.bfb1.title {
background: #984b43;
}
 
.entry-content .content-box {
border-radius: 5px;
border: 1px solid;
padding: 2rem 2rem 1rem 2rem;
margin: 0 0 2rem 0;
font-weight: normal;
}

Then this works:

<div class="content-box bfb1">

<span class="title">Related Blog Posts</span>
<ul>
 	<li><a href="https://landcruisingadventure.com/schedules-maps-guidebooks-for-central-asia-russia-mongolia/" target="_blank" rel="noopener noreferrer">Schedules, Maps and Guidebooks for Central Asia, Russia, and Mongolia</a></li>
 	<li><a href="https://landcruisingadventure.com/in-mongolia/" target="_blank" rel="noopener noreferrer">Mongolia Travel Stories</a></li>
 	<li><a href="https://landcruisingadventure.com/in-kyrgyzstan/" target="_blank" rel="noopener noreferrer">Kyrgyzstan Travel Stories</a></li>
</ul>
</div>

But this somehow doesn’t wrap around the image:

<div class="content-box bfb1">

<span class="title">Related Blog Posts</span>
<div class="grid-25 tablet-grid-50 mobile-grid-100 first-column"><a href="https://landcruisingadventure.com/wp-content/uploads/2019/05/dwarfed_nature_1.jpg"><img class="alignnone size-medium wp-image-37584" src="https://landcruisingadventure.com/wp-content/uploads/2019/05/dwarfed_nature_1-200x300.jpg" alt="Ischigualasto park in Argentina with the Land Cruiser" width="200" height="300" /></a></div>
<div class="grid-75 tablet-grid-50 mobile-grid-100 second-column">Our highly recommended guidebook for people who are looking for valuable information about Seville and Andalucía: the Eyewitness Travel Guide Seville & Andalucía DK Eyewitness Travel Guide Seville & Andalucía! This book is for travellers who are more interested in the sights than recommendations for restaurants or hotels.</div>
</div>

What am I doing wrong?

Adventurous greetings,
Coen

[David]

Hi there,

the grid-xx classes use CSS Floats which takes them outside of the normal box model, hence the container collapses. To get around this you need to also Float the container.

So where you are using grid add a class to parent div e.g,

<div class="content-box bfb1 grid-inside">

Then this CSS:

.grid-inside {
    float: left;
    clear: both;
}

[Coen]

Thank you David,

Hours of frustration are evaporating and the sun is shining yet again!

[David]

Well i am glad to be of help !

[Coen]

I also noticed, it works if I just added a clear function like this:

<div class="clear"></div>

before the closing of the container

[David]

Yep that’ll do the trick 🙂 Thanks for sharing

[Author]

Posts