Add Image to Left of Text via CSS

Add image to left of text via css

.create
{
background-image: url('somewhere.jpg');
background-repeat: no-repeat;
padding-left: 30px;  /* width of the image plus a little extra padding */
display: block;  /* may not need this, but I've found I do */
}

Play around with padding and possibly margin until you get your desired result. You can also play with the position of the background image (*nod to Tom Wright) with "background-position" or doing a completely definition of "background" (link to w3).

How to put images to the right and text to the left in css

this should give desired effect:

html

<div class="group">
  <div class="text">
    Your text here
  </div>

  <div class="images">
    <img src="image1.jpg">
    <img src="image2.jpg">
  </div>
</div>

css

// this is the clear fix, so the container doesn't collapse and has height
.group:after {
  content: "";
  display: table;
  clear: both;
}

.text {
  float: left;
  width: 70%;
}

.images {
  float: left;
  width: 30%;
}

You can adjust as you see fit, but that will give you two columns, and hey, it's fluid too! Just add in a media query and it's responsive. Maybe something like:

@media (max-width: 767px) {
  .text, .images {
    float: none;
    width: 100%;
  }
}

CSS Float: Floating an image to the left of the text

Is this what you're after?

• I changed your title into a h3 (header) tag, because it's a more semantic choice than using a div.

Live Demo #1
Live Demo #2 (with header at top, not sure if you wanted that)

HTML:

<div class="post-container">                
    <div class="post-thumb"><img src="http://dummyimage.com/200x200/f0f/fff" /></div>
    <div class="post-content">
        <h3 class="post-title">Post title</h3>
        <p>post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc </p>
   </div>
</div>

CSS:

.post-container {
    margin: 20px 20px 0 0;  
    border: 5px solid #333;
    overflow: auto
}
.post-thumb {
    float: left
}
.post-thumb img {
    display: block
}
.post-content {
    margin-left: 210px
}
.post-title {
    font-weight: bold;
    font-size: 200%
}

Text floating left and image on the right

Use display: flex property on section and put h2 p tags in a separate tag . Also just put the img element below the h2 p element as shown in snippet .

You can read here for more about display: flex

section {
  display: flex
}
.imgTag{
width:50vw;
height:50vh
}

<section class="post-container">
  <span>
  <h2>Lorem Ipsum</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Auctor elit sed vulputate mi sit. Fringilla ut morbi tincidunt augue interdum velit euismod in pellentesque. At urna condimentum
    mattis pellentesque. Faucibus interdum posuere lorem ipsum dolor. Amet dictum sit amet justo. Diam donec adipiscing tristique risus nec feugiat.</p>
</span>

  <img src="https://pixy.org/src/477/4774988.jpg" class="imgTag" />
</section>

CSS - Positioning an image alongside text

Since other answers use flexbox or inline-block, here's one to use floats as you originally had.

Remember that in your HTML you are trying to float the images and the phone numbers, which are contained within the divs .phone and .email. So don't float .phone and .email, float their contents:

.phone img, .phone p, .email img, .email p {
  float: left;
}

After that it is a matter of margins and also clearfixing the divs so that they will take the full height of their children and fall into a horizontal column.

section#form h2 {  font-size: 15px;  margin-top: 40px;}.phone img, .phone p, .email img, .email p {  float: left;}.email {  margin-top: 10px;}.phone p, .email p {  margin: 3px 0 0 10px;}.phone::after, .email::after { /*clearfix*/  content: '';  display: table;  clear: both;}

<div class="six columns">  <h2>To start getting great advice, get in touch.</h2>  <div class="phone">    <img src="http://placehold.it/25x25">    <p>0113 220 5265</p>  </div>  <div class="email">    <img src="http://placehold.it/25x25">    <p>hello@featuremedia.co.uk</p>  </div>  <img src="http://placehold.it/250x30" style="width:250px;height:30px; margin-top: 20px;"></div>

Adding text to an image using only HTML and CSS

For starters, you are targeting your newest-review-title class wrong in your CSS, by using a period between review and title. Change that. Also, try making your container the relative element instead of your image, like so:

.newest-review-cover {
  position: relative;
}

.newest-review-cover img {
  display: block;
  width:100%;
}

.newest-review-title {
    position: absolute;
    display:block;
    z-index: 999;
    margin:0 auto;
     text-align: center;
     top: 50%;
     width: 60%;
     left:20%
}

---

Related Topics