CODEWITHSUNDEEP
htmlcssinlinedisplay
real_big_words
real_big_words

Reputation: 37

CSS Image and Div won't stay inline

UPDATE: So I've created a JSFFiddle and it works perfectly on there as long as the "Bio" and "Reason" paragraphs are short. But as soon as they are substantially larger than the image, they refuse to go inline and will go onto the next line.

I am trying to get an image to sit next to a DIV that contains two paragraphs. For some reason, it will not go inline and I can't figure out why.

This is the HTML:

<div id="complete_entry">
    <a name="poet106"></a>
    <h1 class="lexpomo" id="poet_list"><a href='#poet106'>Poet Name</a><br /></h1>
    <p class="lexpomo" id="sign_up_date">
        2016-05-29 22:29:56
    </p>
    <img src="http://localhost/accents/wp-content/uploads/lexpomo/inkwell.svg" class="lexpomo" id="poet_avatar" />
    <div id="poet_list_block">
        <p class="lexpomo" id="poet_bio">
            <strong>Bio: 
            </strong><br />
            Paragraph-length bio.
        </p>
        <p class="lexpomo" id="poet_reason">
            <strong>Reason for signing up: </strong><br />
            Paragraph-length reason.
        </p>
    </div>
</div>

This is the CSS:

.complete_entry {
    display: block;
    clear: both;
}

#sign_up_date {
    font-style: italic;
    font-size: 10pt;
}

#poet_bio, #poet_reason {
    margin-left: 10px;
    display: block;
    clear: both;
}

h1#poet_list,
h1#poet_list a{
    margin: 30px 0 0 0;
    padding: 0;
    line-height: normal;
    font-weight: bold;
}

img.lexpomo#poet_avatar {
    width: 100px;
    max-height: 200px;
    min-height: 50px;
    display: inline;
    clear: left;
    float: left;
    background-color: black;
}

#poet_list_block {
    display: inline;
    float: left;
    clear: none;
}

I'm running this on WordPress, but I don't think that should matter for this question.

Thank you in advance!

Upvotes: 1

Views: 1369

Answers (1)

Maximillian Laumeister
Maximillian Laumeister

Reputation: 20359

The reason this is happening is that since there is no width specified on your poet_list_block, and your p elements contain enough text to fill an entire line, the p elements define the width of the whole block and make it 100%. This means that there is no room for the block on the current line, and this is why it drops down to the next line.

From your question it seems like you want the two paragraphs to be in a single square div sitting to the right of the image, rather than having them on the next line or floating independently (and wrapping under the image). The easiest way to do that would be to use CSS table styling instead of floats.

Screenshot of Result:

enter image description here

Working Live Demo:

#sign_up_date {
    font-style: italic;
    font-size: 10pt;
}

#poet_bio, #poet_reason {
    margin-left: 10px;
    margin-top: 0;
}

h1#poet_list,
h1#poet_list a{
    margin: 30px 0 0 0;
    padding: 0;
    line-height: normal;
    font-weight: bold;
}

img.lexpomo#poet_avatar {
    width: 100px;
    height: 100px;
    max-height: 200px;
    min-height: 50px;
    background-color: black;
}

.bio_container {
  display: table;
}

.bio_container > * {
  display: table-cell;
  vertical-align: top;
}
<div id="complete_entry">
    <a name="poet106"></a>
    <h1 class="lexpomo" id="poet_list"><a href='#poet106'>Poet Name</a><br /></h1>
    <p class="lexpomo" id="sign_up_date">
        2016-05-29 22:29:56
    </p>
    <div class="bio_container">
    
    <img src="http://localhost/accents/wp-content/uploads/lexpomo/inkwell.svg" class="lexpomo" id="poet_avatar" />
    <div id="poet_list_block">
        <p class="lexpomo" id="poet_bio">
            <strong>Bio: 
            </strong><br />
            Paragraph-length bio. Paragraph-length bio. Paragraph-length bio. Paragraph-length bio. Paragraph-length bio. Paragraph-length bio. Paragraph-length bio. Paragraph-length bio. Paragraph-length bio. Paragraph-length bio. Paragraph-length bio. Paragraph-length bio. Paragraph-length bio. Paragraph-length bio. Paragraph-length bio. Paragraph-length bio. Paragraph-length bio. Paragraph-length bio. Paragraph-length bio. 
        </p>
        <p class="lexpomo" id="poet_reason">
            <strong>Reason for signing up: </strong><br />
            Paragraph-length reason.
        </p>
    </div>
    </div>
</div>

JSFiddle Version: https://jsfiddle.net/6upL7gzc/

Upvotes: 1

Related Questions