CODEWITHSUNDEEP
csshtml
user3041174
user3041174

Reputation: 543

3 horizontal image layout issue

I have been trying to achieve getting 3 images side by side. I finally got it the exact way I want them laid out. A few ways I tried, one image would always move down on smaller screens. They way I have it now is the exact way I want but the code i used is a bit messed up(not even sure if correct but it works).

My code has 4 images and just 3 show up. Again it shows up the way I want. The image that doesn't show up is the 2 one in the code. I dont want the image to show up anyways but I know it shouldnt be in there either.

I struggle with this stuff so any help on how this should read correctly is appreciated. When I remove the 2 image in the code they all go out of line.

<div id="content">    
    <center><div><br><br><br><br><br><br>    
    <img src="images/image1.png" width="30%" style="float:left;/> <img src="images/image2.png" width="50%" style="float:left;"/>
</div>
<img src="images/image3.png" width="30%"/><img src="images/image2" width="30%" style="float:right;"/>    
</div>
</center>
<br><br><br><br><br><br><br><br><br></div>   
</div>

Upvotes: 0

Views: 228

Answers (4)

Eduardo La Hoz Miranda
Eduardo La Hoz Miranda

Reputation: 2060

You should definitely brush up on your html and css.

You need to set fixed pixel values so your images can fit into place and stay as you would like them to.

CSS:

#content{ width: 960xpx; margin:30px auto; } //the margin is to center this whole block
img{ width: 320px; float:left;} //each image is defined as a fixed 320px
.clear{ clear: both; } //makes sure things don't overlap

HTML:

<div id="content">    

<img src="images/image1.png"/> 
<img src="images/image2.png"/>
<img src="images/image3.png"/>  

<div class="clear">
<!-- SOME OTHER CONTENT HERE -->
</div>

</div>

Upvotes: 0

AtanuCSE
AtanuCSE

Reputation: 8940

<div id="content" width="100%">    

  <div> 
    <img src="1.jpg" width="30%" style="float:left"/> 
    <img src="2.jpg" width="30%" style="float:left"/>
    <img src="3.jpg" width="30%" style="float:left"/>  
  </div>

</div>

Upvotes: 1

Krish
Krish

Reputation: 1894

Here is the simplest and clean code...

fiddle :http://jsfiddle.net/ag3Et/1/

css

#content{
    width:100%;
    float:left;
}
#content img{
    width:32%;
    margin-left:1%;
    float:left;
}

html

<div id="content">     
        <img src="http://www.birds.com/wp-content/uploads/home/bird4.jpg"/> 
        <img src="http://www.hdwallpapers3d.com/wp-content/uploads/2013/05/HD-Birds-wallpaper-3.jpg"/>
        <img src="http://www.oassf.com/en/media/images/birds_wallpaper.jpg"/>
</div>

Upvotes: 1

Partap
Partap

Reputation: 181

This is the answer for your ques.. please mark it as an answer after using this code so that others can also use it in future...

<div id="content">    
<center><div><br><br><br><br><br><br>    
<img src="1.jpg" width="30%" style="float:left;"/> 
<img src="2.jpg" width="30%"/>
<img src="3.jpg" width="30%" style="float:right;"/>  
 </div>
</center>
</div>

<br><br><br><br><br><br><br><br><br></div>   
</div>

Upvotes: 0

Related Questions