How Do i align images next to each other?

  • So i did this post but my images aren’t aligning next to each other.

    i did this:

    <img src=”img url”> <img src=”img url”>

    i do have enough space for images to align next to each other but for some reason the images are going to a whole different line, what must i add to the css to get them to align

    here is the code for the div my post are in 

    .entry{
        background: url(https://tiffanyevansdaily.net/wp-content/uploads/2011/10/postbody.jpg) repeat;
        padding: 10px 11px 8px 10px;
        color:#b8b8b8;
        text-shadow: #fff 1px 1px 1px;

    [No bumping, thank you.]

Viewing 7 replies - 1 through 7 (of 7 total)

  • Try giving each image a float: left; style.

    Just trying to understand what you are trying to do. vtxyzzy has offered one solution, but you are trying to control the post entry or an image within the post entry?

    Without a page too look at or more specifics, this is hard to answer.

    Images wrap down lines because the line or container they are in isn’t wide enough to accommodate them. You can edit the CSS to create a new style for those images (don’t change the core styles as that will change EVERYTHING and you only want to change these images, right?). Make the padding and margins around those images narrower so they will fit on the line, and consider resizing them if that is a possible option.

    Without more information, it’s hard to know how to answer this right.

    Thread Starter ReginaldTerrell

    (@reginaldterrell)

    Hey i’m sorry for my late respnonse but i stop checking cause no one was helping, but i’m happy that you all are and yes i do have an example.

    https://tarajiphensondaily.com/hq-gallery-update-taraji-63rd-emmy-awards/

    see how the thumbnails are aligning under each other, how do i get them to align next to each other

    I would do as vtxyzzy said and try adding
    float:left;
    to the entry img below..

    .entry img {

	background:#fff;

	padding:7px;

	margin:1px;

	-moz-border-radius:6px; 

	-webkit-border-radius:6px; 

	border-radius:6px;

	border:1px solid #e0e0e0;

	box-shadow: 0px 0px 7px #958365;

	-webkit-box-shadow: 0px 0px 7px #e6e6e6;

	-moz-box-shadow: 0px 0px 7px #e6e6e6;

	}
    Thread Starter ReginaldTerrell

    (@reginaldterrell)

    i added float left but it made the footer of the news content float alongside the images

    Thread Starter ReginaldTerrell

    (@reginaldterrell)

    and also it made the image that i already had align center float left as well

    Thread Starter ReginaldTerrell

    (@reginaldterrell)

    So i figured it out, although with this method i i have to do a little extra work.

    I added this to my css

    div.img
    {
    margin: 2px;
    border: 0px solid #0000ff;
    height: auto;
    width: auto;
    text-align: center;
    }
    div.img img
    {
    display: inline;

    }

    Then in the post i added this

    <div class=”img”><center> <img src=”IMG URL HERE”><img src=”IMG URL HERE”><img src=”IMG URL HERE”></center></div>

    and it aligned my images next to each other ??

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘How Do i align images next to each other?’ is closed to new replies.