CODEWITHSUNDEEP
htmlcss
mario
mario

Reputation: 149

CSS - DIV positioning problems

I am trying to place two divs next to each other with the following ids: map_size and menu_option.

Whenever I re-size the screen, the menu_option div goes below the map_size one.

Also, I have one div with id button_position, which will contain multiple buttons.

How can I place these buttons below each other on the center and make the button name bigger?

Below is my HTML and CSS thanks in advance!

current fiddle

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;
}
<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-->

Upvotes: 0

Views: 45

Answers (4)

knice
knice

Reputation: 391

I think I understand what you are trying to achieve, but maybe I'm close.

menu_option{

width:200px;
height:600px;
background:#0099FF;
border-style: solid;
border-color: black;
position: absolute;
right:0;
overflow:hidden;

}

http://jsfiddle.net/48kcayqe/3/

You need to switch the hierarchy of your two divs and position your menu absolute and flush right.

Upvotes: 0

IVIajid
IVIajid

Reputation: 190

for the first problem: you should put your DIVs in a main DIV so that when the screen gets smaller it doesn't change. like this:

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

and for your second problem:

css:

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

html:

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

Upvotes: 1

Jonny Nabors
Jonny Nabors

Reputation: 310

You could also make them into a table. 

<body>
<table>
    <tr>
        <td>
            <div id="map_size" class="map_size">
             </div> <!-- end div map_Size -->
        </td>
        <td>
            <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-->
        </td>
    </tr>
</table>
<body>

Upvotes: 0

Mathieu Labrie Parent
Mathieu Labrie Parent

Reputation: 2606

Working fiddle. http://jsfiddle.net/48kcayqe/2/

To make the div always side by side put them in a container. The container must have a width greater then the 2 other div.

<div id="container">
    <div id="map_size" class="map_size">

    </div> <!-- end div map_Size -->
    <div id="menu_option">
    </div>
</div>

For the button. You can modify the font-size and use text-align to center them.

#button_position{
width: 100px;
height: 80px
position: relative;
      text-align:center;
}
#button_position button {

    font-weigth:bold;    
    font-size:1.3em;
}

Upvotes: 1

Related Questions