Html / css floating image to the right of text
I am trying to put an image to the right of some text that is currently wrapped in a P tag inside a parent div. using float: on the right for the image, it goes all the way to the right, but below the text.
I would like them to line up side by side, please view the 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>
source to share
Try adding this:
p{
display: inline-block;
}
.quality-badge{
display: inline-block;
}
You can also do this by floating to the left as the other person suggested, but inline blocks will put things on the line.
You can check this site for more information.
I'm not sure what counts as best practice, I think inline blocks are just a new way of doing things, although older versions of some browsers may not support it. This site shows what is not.
source to share
You can do it 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>
source to share
You probably want to save float:right
for your image. This will make your image float to the right, and the HTML elements that appear after it in the same container will wrap around it. However, you need to move the tag img
so that it appears in front of 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 own code for a demo.
If you want the container to expand to the size of the floating image (by default, if the image is larger than the container it overflows), you can add the following CSS to your container class:
.container { overflow: auto; }
As an additional note, the tags are img
not closed (you have <img src="source" >
, not <img src="source" />
), which is likely to cause rendering errors in at least some browsers.
You can read more about float
and clear
in CSS here .
source to share