How to center div inside div in following case - html

Question

i got problem with setting my layout right, elemnts doesn't align way i want to and i'm running out of ideas, or repeat same misteakes.
There is wrapper(green) thats fits its size to page width, container that i want to center (blue) that shrinks or expands depending on page width and then rectangular elements(brown) that i want to center inside container (blue) and allow them to rearrange according to width of container (size and amount is not constant)
HTML
<div id="tiles_wrap">
<div id="tiles">
<div class="tilewrap">
<div class="tilebg">
<div class="ribbon">aaab</div>
</div>
</div>
<div class="tilewrap">
<div class="tilebg">
<div class="ribbon">aaav</div>
</div>
</div>
<div class="tilewrap">
<div class="tilebg">
<div class="ribbon">aaaa</div>
</div>
</div>
<div class="tilewrap">
<div class="tilebg">
<div class="ribbon">bbbv</div>
</div>
</div>
</div>
</div>
CSS
#tiles_wrap {
width: 100%;
display:block;
position: relative;
background-color: rgba(0, 255, 0, 0.3);
float: left;
padding-left:25%;
padding-right:25%;
}
#tiles {
margin: 0 auto;
height: 100%;
display:block;
float: center;
Padding: 40px;
line-height: 0.7em;
font-size: 12px;
background-color: rgba(0, 0, 255, 0.3);
}
.tilewrap {
padding: 5px;
float: left;
}
.tilebg {
height: 55px;
width: 70px;
background-color: brown;
display:block;
position: relative;
float:left;
}
.ribbon {
color: #fff;
padding:2px;
background-color: rgba(255, 0, 0, 0.5);
display:block;
position: absolute;
z-ndex: 22;
}
Thanks in advance fr all help!

Answer 1

You can't use float for this, there is no float: center; so that's one of your problems. Also, absolutely positioning elements tends to fix them to a particular spot, so they're not very good for centering and re-arranging depending on width of container.
You can, however, use display: inline-block; along with text-align: center; to do what you're after.
Also, don't forget that if you set the width of an object to 100%, then add 25% padding on the left and right sides, you are making the total width of that object 150% of its parent (in the normal content-box model.)
http://jsfiddle.net/UQ34L/1/

Answer 2

To get the blue to center, you need to set a width for #tiles, then remove the padding from #tiles_wrap. There is no such thing as float:center, so that is ignored.

Answer 3

Try this
#tiles_wrap {
width: 100%;
display: block;
background-color: rgba(0, 255, 0, 0.3);
float: left;
}
#tiles {
width: 65%;
margin: 0 auto;
Padding: 40px;
font-size: 12px;
background-color: rgba(0, 0, 255, 0.3);}

Answer 4

Try this
JSFiddle
As suggested by others, I've added display: inline-block to get the divs to sit alongside each other. As well as this, I added a wrapper div with id="wrapper" and applied a text-align: center to have the tiles align in the center.
Also I added a div with id="tiles_left" for the left margin div with a width of 30% and removed your "tiles_wrap" div as it is not needed with the changes I made. The "tiles" div with a width of 70%
<div id="tiles_left">
hello
</div>
<div id="tiles">
<div id="wrapper">
<div class="tilewrap">
<div class="tilebg">
<div class="ribbon">aaab</div>
</div>
</div>
<div class="tilewrap">
<div class="tilebg">
<div class="ribbon">aaav</div>
</div>
</div>
<div class="tilewrap">
<div class="tilebg">
<div class="ribbon">aaaa</div>
</div>
</div>
<div class="tilewrap">
<div class="tilebg">
<div class="ribbon">bbbv</div>
</div>
</div>
</div>