CODEWITHSUNDEEP
htmlcssfloating
Richard Rodgers
Richard Rodgers

Reputation: 625

html/css floating image right of text

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>

Upvotes: 2

Views: 6826

Answers (4)

intcreator
intcreator

Reputation: 4414

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.

Upvotes: 0

Brian Sekelsky
Brian Sekelsky

Reputation: 115

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.

Upvotes: 1

Johan Karlsson
Johan Karlsson

Reputation: 6476

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>

Upvotes: 0

Kevin Boucher
Kevin Boucher

Reputation: 16675

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

p {
    float: left;
    ...
}

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

Upvotes: 0

Related Questions