Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS [Solved] 2 divs, 1 float left and right, not behaving nicely!

  • This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #157383
    Ailsa_C
    Participant

    Hi, I’m baffled. I’m trying to make my picture sit beside my text. Set up 2 divs one 70% the other 30% and the image gets pushed down under when I specify padding 20px beside my text. Any help greatly appreciated!

    CSS code:

    #speaker {
    }
    .speaker-details {
    width: 70%;
    float: left;
    padding-right: 20px;
    }
    .speaker-picture {
    width: 30%;
    float: right;
    }

    PHP code:

    `

    <?php

                        // get an image field (return type = object)
                        $image = get_sub_field('picture');
    
                        // each image has a custom field (link)
                        $link = get_sub_field('link', $image['id']);
    
                        // render
                        ?>
                        <img src="" alt="" />
            

      <p>
        <!-- END .entry-content -->`
      </p>
    
    #157387

    IE8 above

    .speaker-details{box-sizing:border-box;}
    

    OR

    #speaker > div{box-sizing:border-box;}
    

    Suggestion: You might want to add a clearfix on #speaker.

    #157388
    Ailsa_C
    Participant

    Thanks so much AcitveCodex. Works a treat!!

Viewing 3 posts - 1 through 3 (of 3 total)
  • The forum ‘CSS’ is closed to new topics and replies.