2

Okay so I have a banner.

Withen that banner is 2 div images that should be next to each other within a wrapper. (so 4 divs in all) Banner > Wrapper > img1, img2.

The right image is flipped horizontally. I have filled in the divs with colors instead of uploading my images.

So i need the images to be next to eachother always. Then I need their parent wrapper to always be centered withen the body and to be aligned to the bottom of the banner div.

I donno why im having so much trouble. I can achieve them next to echother, and align them to the bottom. But am having trouble centering them once i do this.

Here is my fiddle: https://jsfiddle.net/vwdud0bu/3/ Here is my HTML: 

<div class="Banner-Container"> 
  <div class="dock-Wrapper">
    <div class="dock-IMG1">IMG1</div>
    <div class="dock-IMG2">IMG2</div>
  </div> 
</div>

Here is my CSS: 

body {
  margin: 0;
  padding: 0;
  }

.Banner-Container {
  width:100%;
  height:606px;
  background-image:url(images/mainBannerBG.jpg);
  background-color:black;
  z-index:-5;
  overflow:hidden;
  }


.dock-Wrapper { 
  height:aut0;
  width:1920px;
  background:#777;
  bottom:0;
  overflow:hidden;
  position:relative;
  } 

.dock-IMG1 {
  width:957px;
  height:119px;
  background-image:url(images/dock.png);
  display:inline-block;
  background-color:blue;
  }

.dock-IMG2 {
  width:957px;
  height:119px;
  background-image:url(images/dock.png);
  display:inline-block;
  background-color:red;
  -moz-transform: scaleX(-1);
  -o-transform: scaleX(-1);
  -webkit-transform: scaleX(-1);
  transform: scaleX(-1);
  filter: FlipH;
  -ms-filter: "FlipH";
  }

Any help would be beyond appreciated! Please re-link the fiddle if you have any solutions.

  • add position : relative to .doc-IMG1 and .doc-IMG2.. and you dont have to repeat ccs rules again and again, giving display:inline-block one time will be enough..:) – Adarsh Mohan Nov 20 '15 at 21:52
  • The second display attribute was just a typo. As far as responsive solution. That is the point of having it centered. The 2 images are the same image. Once the right one is flipped it mirrors itself and completes the full image. At full width at 1920px it should be fine. But otherwise I want it centered and for edges to be hidden off page. Ie: Responsive. –  Nov 20 '15 at 22:03

2 Answers2

0

As I interpret the question, you need 2 images to be together, within a wrapper that is centered and at the bottom of the banner.

edited to include isherwood's suggestion

https://jsfiddle.net/Lmxbhd0L/2/

To make it go to the bottom I used the solution here: How do I horizontally center an absolute positioned element inside a 100% width div?

Where the wrapper is position:absolute; left:50%;bottom:0px; and also set margin-left: to equal the negative of half the width.

Also Banner-Container must be position:relative; otherwise the wrapper will not be contained within the banner.

I shrunk you images simply because they didn't fit on my display.

Community
  • 1
  • 1
Alexei Darmin
  • 2,079
  • 1
  • 18
  • 30
  • I appreciate the help! As for the images not fitting on your display, when i re-size the images back to the width they need to be. it is no longer centered. the point of it being centred with the images retaining their normal width is so that it does show up and fit all displays. Any solutions? –  Nov 20 '15 at 22:44
  • As mentioned in the answer, the `margin left:` should be half the width of the wrapper which itself is the sum of the widths of the images. – Alexei Darmin Nov 20 '15 at 22:46
0

Is this what you wanted?

https://jsfiddle.net/zer00ne/1ya613hj/embedded/result/

https://jsfiddle.net/zer00ne/1ya613hj/

Relevant CSS

body,html {
    width: 100vw;
    height: 100vh;
}
.Banner-Container {
    margin: auto 0;
    display: table;
}
.dock-Wrapper {
    height:auto;
    display: table-row;
}
.dock-IMG1 {
    display:table-cell;

.dock-IMG2 {
    display:table-cell;
}
zer00ne
  • 41,936
  • 6
  • 41
  • 68