CODEWITHSUNDEEP
csshtml
user2105276
user2105276

Reputation: 25

How to display list inline with 2 images

I currently have two images that are displaying next together inline (so far so good). I have 3 lines of different text that I'd like to go alongside these images in line as well. So it would be: image->image->3 different lines of of text/links in a list.

All of this needs to fit in an invisible wide rectangle. So far, the two images are sized the same height and width, so if I can get the 3 lines to fit their height it would display nicely.

The (3) lines I'd like to display (from the code below) are: classes for "headline", "submitted", "share."

html, body {
    font-family: sans-serif;
    margin: 0;
    padding: 0;
}
#logobar {
    background: rgb(206, 211, 255);
}
#logobar ul {
    list-style-type: none;
    margin: 40;
    padding: 40;
}
#logobar li {
    display: inline;
    padding: 20;
    font-size: 52;
    font-family: Comic sans MS;
}
.box {
    margin-left: 50px;
    width: 650px;
    height: 80px;
    display: inline-block;
}
.box .headline {
    font-size: 18px;
    color: black;
    list-style-type: none;
}

My HTML code looks like:

<div id="logobar">
    <ul>
        <li>Breaditt: Bread News Aggregator</li>
        <li>
            <img src="img/logo.jpg" alt="breaditt cat" width="150" height="100">
        </li>
    </ul>
</div>
<div id="breadnews">
    <div class="box">
        <img src="img/counter.png" alt=counter width="75" height="75" />
        <img src="img/breadcat.jpg" alt=article-logo width="75" height="75" />
        <div class="headline"><a href="http://breadcats.tumblr.com">Website dedicated to cats with bread</a> 
        </div>
        <div class="submitted">
            <h>submitted 2 days ago by Alex Doggrowski</h>
        </div>
        <div class="share">
            <h>14,400 Comments. Share Save hide report</h>
        </div>
    </div>
</div>

Upvotes: 1

Views: 2326

Answers (2)

Pramod Bhoi
Pramod Bhoi

Reputation: 197

You can use display property.

Example: //CSS

img{
    display:inline-block; vertical-align:top;
    height:100px; width:100px;
}

//HTML

<div>
   <img src="1.jpg" alt="image1"/>
   <img src="2.jpg" alt="image2"/>
</div>

Upvotes: 0

Samuel Liew
Samuel Liew

Reputation: 79022

.box img {
    float: left;
    margin-right: 10px;
}
.box {
    clear:both;
}

http://jsfiddle.net/samliew/uUcL6/

Upvotes: 1

Related Questions