Responsive CSS / Inline divs

Question

I am trying to use CSS to put a 100% width div across the page and then under that div 2 divs inline that are 50% each each 10px padding on all the divs and then as the page gets smaller make the two 50% divs change to 100%

here is what i have so far:

<style type="text/css">
body,html {
    margin:0;
    padding:0;
}
.outer {
    width:100%;
}
.topblock {
    width:100%;
    padding:10px;
    border:1px solid black;
}
.block1 {
    width:48%;
    padding:1%;
    float:left;
    display:inline;
    border:1px solid black;
}
.block2 {
    width:48%;
    padding:1%;
    float:left;
    display:inline;
    border:1px solid black;
}
</style>

HTML:

<div class="outer">

<div class="topblock">
tickets
</div>

<div class="block1">
service orders
</div>

<div class="block2">
tickets 2
</div>

</div>

whats the best way to do this?

here is a fiddle also: http://jsfiddle.net/dd6Wb/

Answer 1

1st of all you don't need display: inline; when you are using float: left;. Secondly, when you are going for responsive designs, always make sure you use the snippet below

* {
   margin: 0;
   padding: 0;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
}

What will the above snippet do? Well, if you know the box model, it will just behave the opposite of that. Also, you care not clearing your floated elements, so you can use the below snippet to be used on parent element holding floating elements

.clear:after {
   content: "";
   display: table;
   clear: both;
}

Also, last but not the least, you need to use @media queries and change your div width's to 100% in a defined resolution block of @media, this is known as break points.

Demo (Resize the window to see the effect)