Centering div box's inside a main div

Question

I am working on a mobile site where the page needs to change based on portrait and landscape mode. I have that part working. When the mobile device is in portrait mode it's suppose to display 4 boxes as such:

[] []
[] []

When in landscape mode, they are to be like this:

[] [] [] []

I have this mostly accomplished, however in both portrait and landscape mode, they are centered left. I have scoured this site and have found similar questions, but when trying to implement the solution, it doesn't seem to work. I would like them to be centered (using percentages instead of fixed width so it shows up correctly on any mobile device). I am not too familiar with CSS, so pardon me, but here is my code below:

/* Landscape mode (default) */
div.my_wrapper{
width: auto;
position:relative;
padding:20px;
}

div.my_innerBox {
    width:100%;
    float:left;
    border: 1px solid green;
}

div.my_left_box{
    float: left;
    margin-right:10px;
    padding: 20px;
    /*margin-left:90px;*/

    width: 16%;
    border: 1px solid gray;
}

div.my_right_box{
    float: left;
    margin-right:10px;
    padding:20px;

    width: 16%;
    border: 1px solid gray;
}

div.my_header{
    padding:10px;
    float:left;
    width: 100%;
    border: 1px solid gray;
    margin-bottom:12px;
}

@media only screen and (orientation:portrait){
/* portrait mode */
div.my_wrapper{
width: inherit;
margin-left:auto;
margin-right:auto;
padding:20px;
}

div.my_innerBox {
    width: 95%;
    display:inline;

}
div.my_left_box{
    float: left;
    padding: 20px 10px;
    /*margin-left:90px;*/
    margin: 0 10px 10px 0;
    width: 30%;
    border: 1px solid gray;
}

div.my_right_box{
    float: left;
    margin: 0 10px 10px 0;
    padding:20px 10px;
    width: 30%;
    border: 1px solid gray;
}

div.my_header{
    padding:10px;
    border: 1px solid gray;
    margin-bottom:12px;
    text-align:left;
    float:left;
}
div.my_desc {
    text-align:left;
    font-family:Arial, Helvetica, sans-serif;
    font-size:12px;
    vertical-align:middle;
    position:absolute;
    float:left;
    width:500px;
}
div.my_header_container {
    width:100%;
    float:left;
}
}


<div class="my_header_container">
    <div class="my_header">Title Will Go here
        <div class="my_desc">This is where the description content will    go</div>
    </div>
</div>
<div class="my_wrapper">
    <div class="my_left_box">
        Button 1
    </div>

    <div class="my_right_box">
        Button 2
    </div>
    <div class="my_left_box">
        Button 3
    </div>

    <div class="my_right_box">
        Button 4
    </div>

</div>

Also, I need where it says "this is where the content description will go" to be to the right of "Title Will Go here", and to be vertically centered.

Any help would be greatly appreciated. I am trying to learn css as I am more of a programmer, not a designer. Thank you, I appreciate any help you can send my way.

Answer 1

You should really consider using a SASS preprocessor and harness the power of numerous Compass extensions.

Here's how your issue is solved with SASS: http://sassbin.com/gist/5785963/

Note how much shorter and easier to read the code is.

@fredsbend said that you can't center something floated. Well, this is not true when SASS automatically sets the widths of all elements precicely to your liking, while you only provide column numbers.

Answer 2

First, you are missing the close bracket for the @media query.

You cannot expect to center something when a float has been applied to it.

I changed the float:left; on the .my_left_box and the .my_right_box to text-align:left; and added display:inline-block;. I then added margin: 0 auto; and text-align:center; to .my_wrapper and changed the width to 90%. I did not make these changes to the (orientation:portrait) section.

Here is the css:

/* Landscape mode (default) */
div.my_wrapper{
width: 90%;
position:relative;
padding:20px;
    margin: 0 auto;
    text-align:center;
}

div.my_innerBox {
    width:100%;
    float:left;
    border: 1px solid green;
}

div.my_left_box{
    margin-right:10px;
    padding: 20px;
    /*margin-left:90px;*/
    display:inline-block;
    width: 16%;
    border: 1px solid gray;
    text-align:left;
}

div.my_right_box{
    margin-right:10px;
    padding:20px;
    display:inline-block;
    width: 16%;
    border: 1px solid gray;
    text-align:left;
}

div.my_header{
    padding:10px;
    float:left;
    width: 100%;
    border: 1px solid gray;
    margin-bottom:12px;
}

@media only screen and (orientation:portrait){
/* portrait mode */
div.my_wrapper{
width: inherit;
margin-left:auto;
margin-right:auto;
padding:20px;
}

div.my_innerBox {
    width: 95%;
    display:inline;

}
div.my_left_box{
    float: left;
    padding: 20px 10px;
    /*margin-left:90px;*/
    margin: 0 10px 10px 0;
    width: 30%;
    border: 1px solid gray;
}

div.my_right_box{
    float: left;
    margin: 0 10px 10px 0;
    padding:20px 10px;
    width: 30%;
    border: 1px solid gray;
}

div.my_header{
    padding:10px;
    border: 1px solid gray;
    margin-bottom:12px;
    text-align:left;
    float:left;
}

} /* Added here but maybe you want it somewhere else. */

div.my_desc {
    text-align:left;
    font-family:Arial, Helvetica, sans-serif;
    font-size:12px;
    vertical-align:middle;
    position:absolute;
    float:left;
    width:500px;
}
div.my_header_container {
    width:100%;
    float:left;
}

Here is the jsfiddle: http://jsfiddle.net/tspT4/10/

---

^{I was not able to test this on a mobile but it should work}