CSS Container fit to Child-Images - html

Question

First: I really tried to find an answer but non of them worked for me.
Here's my problem:
I have a base layout where I have a forward and a backward button in the footer.
Theses buttons must be quadratic. So I've decided to make them simple images (to avoid all the problems with trying to scaling divs propotionally).
Theses images have CSS:
.galleryFooterController {
position: relative;
height: 100%;
float: left;
margin-left: 5px;
background-color: #A0A0A0;
}
And are nested in a container with CSS:
#galleryFooterControlle {
position: absolute;
display: inline-block;
right: 15%;
background: white;
height: 100%;
padding-right: 5px;
width: auto;
}
But the container is not taking the correct width so that the images are not fitting inside and are rendered under each other. If I take out the height: 100% from the images, they fit next to each other in the container.
It would be great if you could help me finding a JS-free version to solve this problem!
Thanks!

Answer 1

Here is a FIDDLE that will give you a start.
I haven't made all of the divs line-up, but you can change the CSS to make it look prettier.
For your buttons, I just used div in a div with CSS-Tricks triangle - You can use .click on the outer div to run your function.
Here's the relevant CSS
.header {
width: 100%;
height: 50px;
background-color: #A0A0A0;
border: 4px solid white;
}
.container {
width: 90%;
height: 400px;
background-color: #A0A0A0;
border: 4px solid white;
float: left;
}
.rightbar {
width: 9%;
height: 460px;
border: 1px solid white;
float: right;
background-color: #A0A0A0;
}
.bottomholder {
width: 90%;
height: 50px;
border: 1px solid black;
}
.bottomleft {
height: 100%;
width: 562px;
float: left;
background-color: #A0A0A0;
border-left: 2px solid white;
}
.bottombutton {
height: 100%;
width: 130px;
float: left;
background-color: #A0A0A0;
border-left: 2px solid white;
}
.bottomright {
height: 100%;
width: 200px;
float: left;
background-color: #A0A0A0;
border-left: 2px solid white;
}
.arrowleft {
width: 40px;
height: 40px;
border-radius: 50%;
border: 4px solid white;
background-color: #A0A0A0;
float: left;
margin-left: 10px;
}
.arrow-left {
width: 0;
height: 0;
border-top: 15px solid transparent;
border-bottom: 15px solid transparent;
border-right: 15px solid black;
margin-left: 8px;
margin-top: 5px;
}
.arrowright {
width: 40px;
height: 40px;
border-radius: 50%;
border: 4px solid white;
background-color: #A0A0A0;
float: left;
margin-left: 10px;
}
.arrow-right {
width: 0;
height: 0;
border-top: 15px solid transparent;
border-bottom: 15px solid transparent;
border-left: 15px solid black;
margin-left: 15px;
margin-top: 5px;
}

Answer 2

Just i tried with liquid layout, removed the border 2px white and change the float property.
.header {
width: 98%;
height: 50px;
background-color: #A0A0A0;
margin:2px 2px;
}
.container{
width: 85%;
height: 400px;
background-color: #A0A0A0;
margin:2px 2px;
float: left;
}
.rightbar{
width: 12%;
height: 460px;
float: left;
background-color: #A0A0A0;
margin-top:2px;
margin-left: 2px;
padding-left: 3px;
}
Full Code http://jsfiddle.net/judearasu/5c5rq/

Answer 3

Thanks to everyone I figguered out how to solve the problem!
Because the images coudn't be rendered next to each other because its container would't pick the right width after scaling the images, i simply made the container width to the maximum available place which was in my project 85%. So now the images are fitting in!
Thanks again!