Irfan D. Irfan D. - 5 months ago 8
HTML Question

How to make same height two div and center

how to floated two divs height makes same and after second div slip down, the container width fit child width and divs are center automatically? i apologise for my english. :(

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title></title>
<style type="text/css">
.container{
text-align:center;
display:block;
background-color:grey;
}

.left {
background-color:#EFF5FB;
width: 510px;
float: left;
min-height:50px;

}

.right {
float: left;
width: calc(100% - 520px);
width: -webkit-calc(100% - 520px);
width: -moz-calc(100% - 520px);
width: -o-calc(100% - 520px);
min-width:510px;
background-color: #00f;
height:100%;
//min-height:50px; (edited)
}
.clear{clear:both;}

</style>
</head>
<body>
<div class="container">
<div class="left"><p>paragraph 1</p><p>paragraph 2</p></div>
<div class="right"><p>paragraph 1</p></div>
<div class="clear"></div>
</div>
</body>
</html>


[i want to do this] http://i.stack.imgur.com/56gwt.jpg

http://jsfiddle.net/SpSjL/3268/ (edited again!)

Answer

You should remove the floating and give width: auto; for .left & .right elements, at the certain point when the width is reduced. Further, to make the .container center aligned give max-width and align it using margin-left: auto; & margin-right: auto;

Below is the media query:

    @media (max-width: 600px){
        .container{
            max-width: 400px;
            margin:0 auto;
        }
         .left, .right{
             float: none;
             width: auto;
             padding: 10px;
         }
         .left p{
             padding-bottom: 10px;
         }
    }

Padding bottom for <p> tag is added to get the spacing between the elements.

Find the working fiddle here: http://jsfiddle.net/MasoomS/3xw2qpb8/