How to place Image and Text next to another Image in HTML/CSS?

Question

I am trying to place Image and Text next to another Image. If you want to see what I mean, look here:

7xecD

I tried using floats and stuff, but It doesn't seem to work. Here is my code:

.left {float: left;}
.right{float: right;}

<div class="left">
<img src="img/image1.png" />
<p>Text</p>
</div>

<div class="right">
<img src="img/image2.png" />
</div>

Answer 1

Is this what you want?

<body>


<div id="Menu">
<img src="image"/>
<h4>Text</h4>


 </div>


 <div id="Container">
 <h4>Content Section</h4>


 </div>



 body, html {
 width:100%;
 height:100%;
 margin:0;
 color:white;
 }


 #Menu  {
 background-color:black;
 height:50%;
 width:25%;
 position:relative;
 top:70px;
 float:left;
  }

 #Container {
 height:50%;
 width:70%;
 background-color:blue;
 position:relative;
 top:70px;
 float:right;

 }

Answer 2

Here you go,

.container {
    width:100%;
    height:500px;
}

.left, .right{
    position:relative;
    height:100%;
    width:50%;
    float:left;
}

.img1{
    width:100%;
    height:50px;
}


<div class='container'>
    <div class="left">
        <img src="http://www.ancestry.com/wiki/images/archive/a/a9/20100708215937!Example.jpg" alt="img 1" class='img1'/>
        <p>asdf asfd asdf asdf</p>
    </div>
    <div class="right">
        <img src="http://www.ancestry.com/wiki/images/archive/a/a9/20100708215937!Example.jpg" alt="img 1" />
    </div>
</div>

http://jsfiddle.net/qCGuL/

How to place Image and Text next to another Image in HTML/CSS?

Question

2 answers

solution1
0 2014-05-18 15:31:36

solution2
0 2014-05-18 15:34:51

How to place Image and Text next to another Image in HTML/CSS?

Question

2 answers

solution1 0 2014-05-18 15:31:36

solution2 0 2014-05-18 15:34:51

solution1
0 2014-05-18 15:31:36

solution2
0 2014-05-18 15:34:51