where there is a padding in this case

Question

This is the result![enter image description here][1]

Please look at the empty space circled red , why is that please?

this is the html

<div id="map_manual_address_container">
                <div id="map_canvas"></div>
                <div id="mamual_address">
                    <textarea name="address" placeholder="Address"></textarea>
                </div>
            </div>

and this is the css

#map_manual_address_container {
    width:700px;
    height:410px;
}


#map_canvas { width: 400px; height: 400px; 
              float:left;
}


#mamual_address {
    float:right;
}

Thanks

Answer 1

Your #map_manual_address_container has a width of 700 and the feildset has a padding of 30 horizontally. Since you've set:

#msform fieldset {
box-sizing : border-box;
width: 80%;
}

The feildset's area including the padding is set to 80% of #map_manual_address_container width which means that #map_manual_address_container will be wider than #msform so floating to the right of the #msform will result in the address text area being outside the feildset. To fix this remove one of

box-sizing : border-box;
width: 80%;

This should stop the feildset being wider than #map_manual_address_container.

Answer 2

Solution

#manual_address {
    float: left;
}