Text Floating in Block Next to Image

Text floating in block next to image

.content {    width: 400px;    border: 4px solid red;    padding: 20px;    overflow: hidden;}
.content img {    margin-right: 15px;    float: left;}
.content h3,.content p{    margin-left: 15px;    display: block;    margin: 2px 0 0 0;}

<div class="content">    <img src="http://cdn4.iconfinder.com/data/icons/socialmediaicons_v120/48/google.png"/ alt="Sample Image" >    <h3>Title</h3>    <p>Some Description</p></div>​

Issue putting Image next to text (not float issue)

I used Taou Ben's code for a while but then I found a way simplier solution.
Just use the following CSS and HTML:

.IntroDIV {    max-width: 768px;    margin-left: auto;    margin-right: auto;    border: 1px solid black;    background-color: #f9f9f9;    margin-top: 48px;    margin: 0 auto;    text-align: left;}
.Intro_IMG {    max-width: 192px;    float: left;}

        <div class="IntroDIV">                <div class="Intro_IMGDIV">                 <img class="Intro_IMG" src="https://via.placeholder.com/512/">                </div>                        <div>                  <h3>Hey bien salut tout le monde c'est Sirius B !</h3>                  <p>Et vous vous trouvez ici sur mon site / projet HTML !</p>                  <p>Ce site est à la base là juste pour que je joue et apprenne l'HTML !</p>                  <p>Donc ici il y aura des trucs un peu random dans ce site car je peux.</p>                  <p>Sinon eh bien ce site sert un peu à rien donc... Ouais.</p>                </div>                   </div>

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>

Display text next to img in div

there is a few ways:

float and margin

h6,p {  margin :0 0 0 55px;}
.body-img {  float: left;}

<div class="col">  <img src="http://lorempixel.com/50/50/" class="body-img" title="Me" alt="Me" />  <h6>Blueberries</h6>  <p>Healthy and nutritious</p>  <p>Healthy and nutritious</p>  <p>Healthy and nutritious</p>  <p>Healthy and nutritious</p>  <p>Healthy and nutritious</p></div>

Floating image with text; CSS not applied

The problem is with the code row>img. In CSS, the symbol > looks for the direct children from the parent. As per your code img is not the direct children. It is a grand children. So change your code

 .row>img{
   display: inline-block;
   float: left;
 }

to

.row img{
  display: inline-block;
  float: left;
}

UPDATE:

As per your comment below, you mentioned this is not working. Yes, you have to apply all the remaining styles here as you have added inline img tag like below.

.row img{
   margin-right:10px; margin-top:8.5px; width: 210px; height:194px;
   float: left;
 }

Code Snippet

.row {  display: -webkit-box;  display: -ms-flexbox;  display: flex;  -ms-flex-wrap: wrap;  flex-wrap: wrap;  margin-right: -15px;  margin-left: -15px;}
.row img{  margin-right:10px; margin-top:8.5px; width: 210px; height:194px;  float: left;}

<div class="container">  <div class="row">    <div class="col-lg-8 col-md-10 mx-auto">      <p style='float:right;' > <img src='img/ankulGupta.tiff'>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe nostrum ullam eveniet pariatur voluptates odit, fuga atque ea nobis sit soluta odio, adipisci quas excepturi maxime quae totam ducimus consectetur? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius praesentium recusandae illo eaque architecto error, repellendus iusto reprehenderit, doloribus, minus sunt. Numquam at quae voluptatum in officia voluptas voluptatibus, minus! Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>    </div>  </div></div>

HTML and CSS Images Won´t Appear Next To Each Other (Not even with float!)

Remove all of the attributes from your <img> tags except for the src, and add this code to your css to style the elements:

#bodydiv img{
  width:50%;
  display:inline-block;
  height:50%;
  float:left;
}

For most styling, you cannot declare them as html attributes, unless of course by defining them in a style attribute, which will apply the css to that element.

Also font-color is actually just color.

Here is the code with those fixes (and I replaced the image src values with placeholder images so everyone can see it working):

<head>
  <meta charset="utf-8">  <link href="https://fonts.googleapis.com/css?family=Abril+Fatface&display=swap" rel="stylesheet">
  <style type="text/css"> * {      font-family: "Abril Fatface";    }    header {      display: block;      align-self: right;    }    div {      display: block;    }    #bodydiv {      width: 800px;    }    #bodydiv img{      width:50%;      display:inline-block;      height:50%;      float:left;    }
    #footerdiv {      padding-top: 10px;      display: block;      clear: both;      background-color: #00EBCF;      font-size: 15px;    }    h1 {      font-family: "Abril Fatface";      background-color: #00EBCF;      ;      display: block;      text-align: center;    }
    @media only screen and (min-width: 800px) {      h1 {        font-family: "Abril Fatface";        background-color: #00EBCF;        display: block;        text-align: center;        font-size: 45px;      }      li {        float: left;        margin-right: 10px;        display: inline-block;      }      a:link {        text-decoration: none;        color: black;        font-family: "Abril Fatface";        color: green;        font-size: 20px;        background-color: #94b8b8;        border-radius: 10px;        padding: 10px;        position: relative;        display: inline-block;      }      a:hover {        text-decoration: none;        font-family: "Abril Fatface";        background-color: #A6A6A6;      }    }
    @media only screen and (max-width: 799px) {      h1 {        font-family: "Abril Fatface";        background-color: #00EBCF;        display: block;        text-align: center;        font-size: 30px;      }      li {        float: left;        margin-right: 10px;        display: inline-block;      }      a:link {        text-decoration: none;        color: black;        font-family: "Abril Fatface";        color: green;        font-size: 15px;        background-color: #94b8b8;        border-radius: 8px;        padding: 8px;        position: relative;        display: inline-block;      }      a:hover {        text-decoration: none;        font-family: "Abril Fatface";        background-color: #A6A6A6;      }    }
    @media only screen and (max-width: 557px) {      h1 {        font-family: "Abril Fatface";        background-color: #00EBCF;        display: block;        text-align: center;        font-size: 25px;      }      li {        float: left;        margin-right: 10px;        display: inline-block;      }      a:link {        text-decoration: none;        color: black;        font-family: "Abril Fatface";        color: green;        font-size: 10px;        background-color: #94b8b8;        border-radius: 4px;        padding: 4px;        position: relative;        display: inline-block;      }      a:hover {        text-decoration: none;        font-family: "Abril Fatface";        background-color: #A6A6A6;      }    }
    ul {      list-style: none;    }     </style></head><body>  <header>    <h1> Yaddah Yaddah blah blah</h1>  </header>  <div style="margin-bottom: 50px;margin-top: 10px">    <ul>      <li><a href="#">blah blah </a></li>      <li><a href="#">blah blah</a></li>      <li><a href="#">random text</a></li>      <li><a href="#">more random text </a></li>      <li><a href="#">blah blah </a></li>    </ul>  </div>  <div id="bodydiv">    <img src="https://via.placeholder.com/500" display="inline-block">    <img src="https://via.placeholder.com/500" height="50%" display="inline-block" ; float="right" ;>  </div>  <div id="footerdiv">    Yaddah yaddah yaddah  </div></body>

---

Related Topics