Adding margin-left to div after another div that has float:left

Question

Sorry for the title, this is hard to explain in one sentence. Basically, I have a div container with two divs: 1 image that is float:left(ed) and another one with text. Here is what it looks like:

<div id="container">
    <img src="http://boxedinfinity.com/wp-content/uploads/2013/12/Halo3.jpg" alt="Game Image" id="gameImage">
    <div id="second">
        <h2>Genre:</h2>
        <p>First Person Shooter</p>
    </div>
</div>

And here is a fiddle of what I am doing:

http://jsfiddle.net/qMQL5/880/

I want to add padding to the p part of the div with the text. As you see, I added margin-left:50px to #second p but it doesn't do anything. Basically, I want to "indent" the text "First Person Shooter" but I am having trouble doing this. Any ideas?

Answer 1

Your margin on #second must be as large as your image (100px) + the padding you want. Try with margin-left: 150px you will see.

Answer 2

Just use the space well with giving width to each element. You can give width as px or in % . You can try this

#second {
    background-color: green;
    float:left;
    width:80%;
}

Answer 3

The non-floating element actually takes the entire width of the frame.

img {
    float: left;
    opacity: .75;
}
div {
    background: aqua;
    padding-left: 50px; /*nothing happens visually*/
}

<img src="http://lorempixel.com/150/150" />
<div>Hello</div>

To fix it you could simply set overflow:auto on it.

img {
    float: left;
    opacity: .75;
}
div {
    background: aqua;
    overflow: auto;
    padding-left: 50px;
}

<img src="http://lorempixel.com/150/150" />
<div>Hello</div>

Answer 4

Update:

This is the result of your actual code now:

---

---

So, as you can see it is applying, but you have to know a few things:

• img tag is an inline element

The IMG element embeds an image in the current document at the location of the element's definition. The IMG element has no content; it is usually replaced inline by the image designated by the src attribute, the exception being for left or right-aligned images that are "floated" out of line.

• since you are floating the img tag it will start behaving like an inline-block element

Floating an inline or block level element will make the element behave like an inline-block element (from here).

So, therefore, there is a few solutions to fix this issue:

---

Solution #1

(a quick fix [as you can see by adding a border to your #container]- I would advise to read the other solutions below)

only using you existing HTML markup and CSS:(which will make both <h1> and <p> indented)

• make your img an block element by applying display:block (optional - to fix gap below img tag)
• removing margin-left from p and adding margin-right to img

#container {
    border:1px solid red
}

#gameImage {
    width: 100px;
    float: left;
    height: auto;
    display:block; /*new - optional*/
    margin-right:10px /*new*/
   
}
#second {
    background-color: green;
}

<div id="container">
    <img src="http://boxedinfinity.com/wp-content/uploads/2013/12/Halo3.jpg" alt="Game Image" id="gameImage" />
    <div id="second">
        <h2>Genre:</h2>
        <p>First Person Shooter</p>
    </div>
</div>

---

Solution #2

Since you are using float already, let's go with clearfix

.clearfix:before,
.clearfix:after {
  content: " ";
  display: table;
}
.clearfix:after {
  clear: both;
}
#container {
  background-color: green;
  border:1px solid red;
}

#second {
  float:left;
 /* background-color: green; /*choose what block  will have the background*/ }


#gameImage {
  width: 100px;
  float: left;
  height: auto;
}

#second > p {
  padding-left: 10px;
  box-sizing: border-box;

<div id="container" class="clearfix">
  <img src="http://boxedinfinity.com/wp-content/uploads/2013/12/Halo3.jpg" alt="Game Image" id="gameImage" />
  <div id="second">
    <h2>Genre:</h2>
    <p>First Person Shooter</p>
  </div>
</div>

---

Solution #3

dropping the floats and using display:table/table-cell

#container {
    display:table;
    width:100%;
    background-color:green;
    border:1px solid red;
}
#container > div {
    display:table-cell;
    vertical-align:top;
}
#container > div:first-child, #container > div > img {
    width:100px
}
#container > div > img {
    display:block
}
#container > #second > p {
    padding-left:10px
}

<div id="container">
    <div>
        <img src="http://boxedinfinity.com/wp-content/uploads/2013/12/Halo3.jpg" alt="Game Image" id="gameImage" />
    </div>
    <div id="second">
         <h2>Genre:</h2>
        <p>First Person Shooter</p>
    </div>
</div>

---

Solution #4

using inline-block

#container {
  width: 100%;
  background-color: green;
  font-size: 0;/* fix for inline-block elements gaps*/
  border:1px solid red;    
}
#container > div {
  display: inline-block;
  vertical-align: top;
  font-size: 16px /* fix for inline-block elements gaps*/
}
#container > div:first-child,
#container > div > img {
  width: 100px
}
#container > div > img {
  display: block
}
#container > #second > p {
  padding-left: 10px
}

<div id="container">
  <div>
    <img src="http://boxedinfinity.com/wp-content/uploads/2013/12/Halo3.jpg" alt="Game Image" id="gameImage" />
  </div>
  <div id="second">
    <h2>Genre:</h2>
    <p>First Person Shooter</p>
  </div>
</div>

NOTE:
You may want to take a look at some articles regarding floats, here and here

Answer 5

I'm not exactly sure what you're trying to achieve with the green box, but If you're just looking to keep things as they are, you need to make the <p> element and inline-block element so that it respects the floating <img> element and doesn't just wrap around it.

#second p {
    display: inline-block;
    margin-left: 10px;
}

http://jsfiddle.net/0za19kcx/