html - CSS - DIV positioning problems -

html - CSS - DIV positioning problems -

i trying place 2 divs next each other next ids: map_size , menu_option.

whenever re-size screen, menu_option div goes below map_size one.

also, have 1 div id button_position, contain multiple buttons.

how can place these buttons below each other on center , create button name bigger?

below html , css in advance!

current fiddle

class="snippet-code-css lang-css prettyprint-override">body{ margin:0px auto; width:80%; height:80%; } /*map size*/ #map_size{ width:1190px; height:1300px; background:#0099ff; border-style: solid; border-color: black; position: relative; float:left; } /*menu bar option*/ #menu_option{ width:200px; height:600px; background:#0099ff; border-style: solid; border-color: black; position: relative; float:right; overflow:hidden; } #button_position{ width: 150px; height: 80px position: relative; } class="snippet-code-html lang-html prettyprint-override"><div id="map_size" class="map_size"> </div> <!-- end div map_size --> <div id="menu_option"> <h1>menu option</h1> <div id="button_position"> <button id="aht">aht</button> <button id="stats">statistics</button> </div> </div><!-- end menu_option div-->

for first problem: should set divs in main div when screen gets smaller doesn't change. this:

<div id="main"> //your codes </div>

and sec problem:

css:

.clear {clear:both;} button { margin:5px auto; font:16px tahoma; //every size want. }

html:

<div id="button_position"> <button id="aht">aht</button> <div class="clear"></div> <button id="stats">statistics</button> </div> <

html css html5 css3