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 `div`s `inline` that are `50%` each each `10px padding` on all the `div`s and then as the page gets smaller make the two `50%` `div`s change to `100%` here is what i have so far: ``` ``` HTML: ```

tickets

service orders

tickets 2

``` whats the best way to do this? here is a fiddle also: http://jsfiddle.net/dd6Wb/

Accepted Answer

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)

Responsive CSS / Inline divs

Solution

Problem