How To Have Images In Line With Text In Css

I'm creating the footer of my website using html and css. I want to have the two facebook and twitter images in line with the text so that everything in the footer is in line with

Solution 1:

<p> tags are block-level elements. Use an inline element such as <span>:

<divclass="footer content"><imgsrc="Images/facebook.png" /><imgsrc="Images/twitter.png"><span> 
        Address line 1
        Address line 2
        Address line 3
    </span></div>

Alternatively, if you're able to use CSS, you can define both elements as inline-block:

.footer.content > img,
.footer.content > p {
    display: inline-block;
}

Example 1 jsFiddle

Example 2 jsFiddle

EDIT: It might also be wise for semantics to use <address>, rather than <span>. For example:

<divclass="footer content"><imgsrc="Images/facebook.png" /><imgsrc="Images/twitter.png"><address> 
        Address line 1
        Address line 2
        Address line 3
    </address></div>

Since <address> is also a block-level element, you'll need to include the correct CSS as follows:

.footer.content > img,
.footer.content > address {
    display: inline-block;
}

Final jsFiddle example

Solution 2:

The simplest way is to use <span> instead of <p>. <p> makes a new paragraph which is quit "independent".

Solution 3:

Check out this working example here.

.channelsli {
    float: left;
    margin-left: 0.625em;
}

Solution 4:

.content img, .content p { float:left } float: left/right - depending where you want it to be

Solution 5:

If you want to use new tags specific for footer and address this is my example:

<footerid="footer"><span><imgsrc="Images/facebook.png"alt="some text" /></span><span><imgsrc="Images/twitter.png"alt="some text"/></span><span><address>
                        Address line 1
                        Address line 2
                    Address line 3
                    </address></span></footer>


#footer {display:inline;}
#footer address {display:inline }

The alt to images was added to help with disability and standards.