How do I align text to an image?

Question

I would like to align text to an image in this project as if I was working with a text editor(like this). I tried

<img src:"image.jpg" align="top">

but it only does the first line.

Possible duplicate of [How to wrap text around an image using HTML/CSS](http://stackoverflow.com/questions/19179424/how-to-wrap-text-around-an-image-using-html-css). — showdev, Feb 26 '16 at 21:45

L777 · Accepted Answer · 2016-02-26T22:07:58.980

Let the image float:left

html,
body {
  height: 100%;
}

* {
  margin: 0;
  padding: 0;
  font-family: 'Arvo', serif;
}

div#wrapper {
  height: 100%;
  overflow: hidden;
  padding-top:56px;
  box-sizing:border-box;
}

div#header {
  position:fixed;
  top: 0;
  height: 60px;
  text-align: center;
  color: white;
  font-size: 48px;
  width: 100%;
  background-color: rgba(0, 79, 113, 1);
}

div#sidebar {
  width: 178px;
  float: left;
  min-height: 100%;
  padding: 20px 20px 0px 0px;
  text-align: right;
  color: white;
  height: 100%;
  width: 6%;
  background-color: rgba(100, 147, 167, 1);
}

div#content {
  margin-left: 178px;
  min-height: 100%;
  padding:75px;
}

li {
  list-style-position: inside;
  list-style-type: none;
  line-height: 30px
}

a{
  color:white;
  text-decoration: none;
}

img.spaced{
  float:left;
  margin: 5px;
}

<html>

<head>
  <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Arvo">
  <link rel="stylesheet" type="text/css" href="../css/main.css">
  <meta charset="UTF-8">
  <title>Home Page</title>
</head>

<body>
  <div id="wrapper">
    <div id="header">
      Home
    </div>
    <div id="sidebar">
      <ul>
        <li><a href="../html/link.html">Link</a></li>
        <li><a href="../html/link.html">Link</a></li>
        <li><a href="../html/link.html">Link</a></li>
      </ul>
    </div>
    <div id="content">
      <img class="spaced" src="http://i.imgur.com/HNj6tRD.jpg" style="width:60px; height:85px"><div class="bigletter">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
    </div>
  </div>
</body>

score 0 · Answer 2 · answered Feb 26 '16 at 22:33

div#content {
  font-size: 0;
  margin-left: 178px;
  min-height: 100%;
  padding:75px;
}
img.spaced{
    padding:0px 10px 10px 0px;
  box-sizing: border-box;
    vertical-align: middle;
  display: inline-block;
  width: 12%;
}
.bigletter {
  display: inline-block;
  font-size: 16px;
  vertical-align: middle;
  width: 88%;
}

The font-size: 0 on #content gets rid of the whitespace caused by new lines and spaces in the html. You should be giving them display: inline-block and you can either get rid of the padding on img.spaced or you can give it box-sizing: border-box like in the example. box-sizing: border-box causes the padding to push inward instead of outward. Here's a CodePen

How do I align text to an image?

2 Answers2