CODEWITHSUNDEEP
csslayout
CrustyApple
CrustyApple

Reputation: 31

How do I get these to align side by side horizontally using css?

When i display below, the text 'Here is some text' is below the image - i want it to show to the right of the image? 

<div style="width:50px;">
  <img src="http://assets.devx.com/MS_Azure/azuremcau.jpg" alt="blah" width="70" height="70" />
</div>

<div style="width:150px;">
  <h2>Here is some text</h2>
</div>

Upvotes: 0

Views: 72

Answers (2)

sethvargo
sethvargo

Reputation: 26997

<div style="width:50px; display: inline-block;">
<img src="http://assets.devx.com/MS_Azure/azuremcau.jpg" alt="blah" width="70" height="70" />
</div>

<div style="width:150px; display: inline-block">
    <h2>Here is some text</h2>
</div>

changed float:left to display:inline-block. This is a better solution because it doesn't remove items from the document flow. Make sure you specify a width for every one though.

Upvotes: 1

Maxim Mig
Maxim Mig

Reputation: 1

<div style="float: left; margin-right: 10px;">
    <img src="http://assets.devx.com/MS_Azure/azuremcau.jpg" alt="blah" width="70" height="70" />
</div>
<div style="width: 300px;">
    <h2>Here is some text</h2>
</div>
<br style="clear: both;" />

This should work.

Upvotes: 0

Related Questions