html/css floating image right of text

Question

I am attempting to float an image to the right of some text currently wrapped in the P tag inside a parent div. using float: right for the image takes it all the way to the right but under the text.

I would like to see them aligned side by side, please check screenshot here: https://drive.google.com/file/d/0B3STRGf0b16iNWhMVDBETEpaczQ/view?usp=drivesdk

My css

h1 {
    font-family: 'open sans';
    font-size: 35px;
    font-weight: 200;
    padding: 0;
    margin: 0;
}

p {
    max-width: 550px;
    padding: 0;
    margin-top: 15px;
    font-size: .9em;
    line-height: 1.8em;
}

.why-nexishost {
    width: 980px;
    overflow: hidden;
    margin: 70px auto 0 auto;
    background-color: #f2f2f2;
}

.quality-badge {
    float: right;
}

My html

<head>
    <title>NexisHost</title>
    <meta charset="utf-8" />
    <link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
    <div class="header">
            <div class="header-content">
                <a href="#"><img src="images/twitter-icon.png" class="twitter-icon" alt="Twitter icon"></a>
                <ul>
                    <li>Support 513.571.7809</li>
                    <li><a href="#">Account Manager</a></li>
                </ul>
            </div>
            <div class="navigation">
                <img src="images/logo.png" alt="Site Logo">
                <ul>
                    <li><a href="#">Products</a></li>
                    <li><a href="#">Domains</a></li>
                    <li><a href="#">Services</a></li>
                    <li><a href="#">Something</a></li>
                    <li><a href="#">Design</a></li>
                    <li><a href="#">Support</a></li>
                    <li><a href="#">Signup</a></li>
                </ul>
            </div>
            <div class="home-banner"></div>
            <div class="why-nexishost">
                    <h1>Quality is our #1 priority</h1>
                    <p>A domain name, your address on the Internet, says a lot about who you are and what you do. New domain endings like .guru and .photography can help you find a meaningful address that stands out on the web. Every domain includes website forwarding, email forwarding (help@your_company), simple management tools and other helpful features.</p><img src="images/premium_quality-01-256.png" class="quality-badge" alt="Quality Guarantee badge">
            </div>
    </div>
</body>

</html>

Brian Sekelsky · Answer 1 · 2015-08-06T16:37:06.313

Try adding this:

p{
  display: inline-block;
}

.quality-badge{
  display: inline-block;
}

You can also do this by floating left as another person suggested, but inline-blocks will put things in a line.

You can check this site out for more info.

I'm not sure what is considered better-practice, I think inline-blocks are just the newer way of doing things although old versions of some browsers may not support it. This site shows which don't.

score 0 · Answer 2 · answered Aug 06 '15 at 16:25

0

You probably want to float your <p> left, not your image right.

p {
    float: left;
    ...
}

.quality-badge {
    //float: right;
}

answered Aug 06 '15 at 16:25

Kevin Boucher

16,426
3
48
55

Both of your suggestions worked. The question now is which is the best practice for doing what I'm trying to accomplish ? :P – Richard Rodgers Aug 06 '15 at 16:30
Not a question of best practices really. This code just does what you describe. Just a matter of visualizing how the blocks fit together with the relevant CSS properties applied. – Kevin Boucher Aug 06 '15 at 16:35

score 0 · Answer 3 · answered Aug 06 '15 at 16:30

You can do it like this with your current css:

<div class="why-nexishost">
    <img src="images/premium_quality-01-256.png" class="quality-badge" alt="Quality Guarantee badge">
    <h1>Quality is our #1 priority</h1>
    <p>A domain name, your address on the Internet, says a lot about who you are and what you do. New domain endings like .guru and .photography can help you find a meaningful address that stands out on the web. Every domain includes website forwarding, email forwarding (help@your_company), simple management tools and other helpful features.</p>
</div>

score 0 · Answer 4 · answered Aug 06 '15 at 17:16

You'll probably want to keep float:right applied to your image. This will make your image float to the right and HTML elements that come after it in the same container will wrap around it. However, you'll need to move your img tag up so it comes before the text you want to wrap.

HTML:

<div class="container">
    <img src="myImage.png" class="myImage" alt="Alt Text" />
    <h1>Heading</h1>
    <p>Paragraph text</p>
</div>

CSS:

.myImage {
    float:left;
}

See this fiddle using your code for a demonstration.

If you want the container to expand to the size of the floating image (by default if the image is bigger than the container it overflows out) you can add the following CSS to your container class:

.container { overflow: auto; }

As an additional note, your img tags aren't closed (you have <img src="source" > rather than <img src="source" /> which will probably cause rendering errors in at least some browsers.

You can learn more about float and clear in CSS here.

html/css floating image right of text

4 Answers4