Issue with placing images

Question

I have a problem with placing my images 2 characters to the left and right side of my text. Here's a picture of how it looks:

As you can see the images are down below the black box and I want each one of them to be beside it, and now the background on the page is extended due to the images being pushed further down.

Here's my code for the CSS:

.support-text {
  width: 600px;
  position: relative;
    margin-left: auto;
    margin-right: auto;
    line-height: -2px;
    margin-bottom: 130px;
    clear: left;

}

.support-text h1 {
  font-size: 30px;
}

.support-text {
  font-size: 23px;
}

.support-img {
  margin-top: -80px;
  margin-bottom: 80px;
  z-index: 1;
}

.ct-pic {
  float: right;
  width: 700px;
  height: 596px;
  bottom: 30px;
  background-image: url('../img/ct.png');

}

.ct-pic:hover {
  -webkit-filter: brightness(180%);
}

.t-pic:hover {
  -webkit-filter: brightness(180%);
}

.t-pic {
  float: left;
  width: 770px;
  height: 596px;
  margin-left: -60px;
  margin-bottom: -1px;
  background-image: url('../img/t.png');
}

Here's the code for the HTML:

<div class="main-wrapper">
    <section class="support-text">
      <img src="img/support-us.png" class="support-img">
      <p> hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello</p>
    </section>

    <div class="ct-pic">        
    </div>
    <div class="t-pic">
    </div>
</div>

Ashesh · Answer 1 · 2015-03-31T22:17:00.190

0

Images are by default displayed inline (appear on same line).

One way to fix is by removing the <div> which are by default displayed as block (start on a line), additionally you may need to set appropriate widths.

<div class="main-wrapper">
      <!--ct-pic -->
      <img src="img/ct.png.png" class="ct-pic">

      <!-- blackbox -->
      <img src="img/support-us.png" class="support-img">

      <!--t-pic -->
      <img src="img/t.png.png" class="t-pic">
</div>

edited Mar 31 '15 at 22:17

answered Mar 31 '15 at 22:10

Ashesh

3,499
1
27
44

Hey thanks for replying, but the images need to be a certain with for the fire effect to fit in, is there anyway to move the pictures up, so the background does not stretch down and so they are underneath the text box – erdrag Mar 31 '15 at 22:15
i am sure there is, could you please make a [JSFiddle](https://jsfiddle.net/), or provide link to your site? – Ashesh Mar 31 '15 at 22:18
jsfiddle did not work, but i can try to explain it as best as i can, okey, so i have 2 images, the one to the left and the one to the right, the black box is suppose to be a text box, and the banner over it is the headline, the text box is 600px and my container div is 1460px, but i cant rezise the images because then the fire effect from the shots they are firing would be gone and they would get cut out, so i need them to be the same size as now, the only thing i need to do is to move them up but i dont know how, and to remove the stretched out background, because of the pushed down images. – erdrag Mar 31 '15 at 22:20
heres a codepen link of it, it does not look so much a like, but i hope its good enough http://codepen.io/anon/pen/azxdLq – erdrag Mar 31 '15 at 22:28
Hey i fixed the issue with positioning the text box with relative and the images with absolute, then move them – erdrag Mar 31 '15 at 23:09

score 0 · Answer 2 · answered Mar 31 '15 at 22:28

0

Something like this might work. You may have to tweak the positioning and z-indexing to get the effect you want, but this should put all the elements in the right place.

HTML:

<div class="main-wrapper">
    <section class="support-text">
      <img src="img/support-us.png" class="support-img">
      <p> hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello</p>
    </section>
</div>

CSS:

.support-img::before {
    content: url('/img/t.png');
}

.support-img::after {
    content: url('/img/ct.png');
}

answered Mar 31 '15 at 22:28

simpleManderson

436
3
8

Hey thanks for replying, i tried this but the picture does not show up now :/ – erdrag Mar 31 '15 at 22:31
oh I think I messed up your image links. Try `url('../img/t.png')`, etc. – simpleManderson Mar 31 '15 at 22:36
ok, there's a lot of reasons that could be. Hard to troubleshoot without live code. :/ – simpleManderson Mar 31 '15 at 22:44
i posted this on another comment, codepen.io/anon/pen/azxdLq theres the code, add the "content" code, and try it out, – erdrag Mar 31 '15 at 22:48
Hey i fixed the issue with positioning the text box with relative and the images with absolute, then move them – erdrag Mar 31 '15 at 23:09
Turns out `:before` and `:after` are not supported on img elements. http://stackoverflow.com/questions/5843035/does-before-not-work-on-img-elements I would recommend altering the HTML to put the images inline, like Ashesh suggested. – simpleManderson Mar 31 '15 at 23:17

score 0 · Answer 3 · answered Apr 01 '15 at 00:06

If you want to ensure that your 3 floated elements will stay beside eachother, you'll have to set a fixed width on their container element (.main-wrapper) that's at least as large as all of the element widths put together.

Another option is to replace the float property on all 3 elements with display: table-cell. That's probably the method I'd use since it's easy, reliable, and doesn't require fixed widths on anything.

A third option is to replace the float property with display: inline-block;, set white-space: nowrap; on the container element, and set white-space: normal; on the .support-text element.

A fourth option is to replace the float property with position: absolute;, and then set the positions of the elements manually using the top and left properties.

Of all these techniques, I definitely think the second one is the best.

Issue with placing images

3 Answers3