[Resolved] box does not display around images

Home Forums Support box does not display around images

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #992814
    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

    #992835
    David
    Staff
    Customer Support

    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;
    }
    #993017
    Coen

    Thank you David,

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

    #993040
    David
    Staff
    Customer Support

    Well i am glad to be of help !

    #993072
    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

    #993081
    David
    Staff
    Customer Support

    Yep that’ll do the trick 🙂 Thanks for sharing

Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.