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

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

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 2

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 3

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 4

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 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/