Automatyczne dostosowywanie się zawartości do rozdzielczości ekranu

Cześć,
Mam taką małą zagwozdkę. Próbuję (dosłownie bo już kombinuję na różne sposoby) zrobić tak, aby zawartość ekranu dostosowywała mi się automatycznie do rozdzielczości ekranu. Może podam konkretny przykład. Mam sobie CSS:

#exLeftColumn{
    float:left;
    width:50%;  !important
    }
#exRightColumn{
    float:right;
    width:50%;  !important
}
#exClear{
    clear:both;
    line-height:0px;
}
#exCenter{
    width:100%;
    margin: auto;
}

I plik html:

<div id="exCenter">
<div id="exContent">
<div id="exLeftColumn">
Lewa kolumna
</div>
<div id="exRightColumn">
Prawa kolumna
</div>
<div class="exClear"></div>
</div>
</div>

I teraz problem polega na tym, że na komputerze z dużą rozdzielczością, podział tej strony wygląda fajnie, po obu stronach jest margines. Jest ok. Natomiast jak otworzę tą stronę na laptopie z mniejszą rozdzielczością z ekranem 13'' tu już nie jest fajnie bo nagle napis Lewa kolumna zaczyna mi się już od samej krawędzi ekranu. Jak wpiszę dłuższy tekst do prawej kolumny to też zaczyna się on od środka ekranu i tu jest ok ale kończy się na samym końcu prawej krawędzi ekranu. Nie ma absolutnie żadnego marginesu i wygląda to fatalnie. Są jakieś sposoby na to aby te marginesy dostosowywały mi się automatycznie do rozdzielczości i były stałe?

Nie napisałeś jak by to miało wyglądać na mniejszych ekranach, może chces mieć stosunek 30/70% a może chcesz żeby było 100% na małych ekranach... teraz po prostu podzieliłeś ekran na pół. Kilka tipsów:

1. nie używaj float, zainteresuj się css flex
2. nie używaj important, to jest do niczego niepotrzebne w nowych projektach, a jeśli potrzebne to znaczy, że nie potrafisz używac CSS
3. zainteresuj się media queries