响应式网站 - 调整问题？

Question

I am currently creating a general responsive template for myself , as I have not really touched this side of design as of yet.

I am having a issue with my "Content Div" when resizing to about 600px (A red border will appear when the resolution is right as to where the problem is). My content div will no longer expand even though I have set a static height of 2300px , so the content just floats outside and the content div does not expand.

 @media only screen   
and (max-width : 603px) {  


/* Styles */  
#column_wrapper img {margin-left:25.33%;padding-right: 20%;}
#column1_content{height:500px;}
#column2_content{height:500px;}
#column3_content{height:500px;}
#column_wrapper{border:1px solid red;height:300px;float: left;}
#content{height:2300px;margin-top: 100px;margin-bottom: 20%;}

} 

The site can be found at Responsive Template

Answer 1

The problem happens when a floated element is within a container box, that element does not automatically force the container's height adjust to the floated element. When an element is floated, its parent no longer contains it because the float is removed from the flow.

You do not need to give height instead for div#content use clearfix. This will fix it ;)

.clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}

.clearfix {
display: inline-block;
}

 html[xmlns] .clearfix {
display: block;
}

* html .clearfix {
height: 1%;
}

Answer 2

don't use static height in div#content use only overflow:hidden; and remove too the static height in #column1_content, #column2_content and #column3_content

relevant: http://www.quirksmode.org/css/clearing.html

Answer 3

It's because the elements inside are floated. When you float an element, it takes that element out of the content flow. This means that those elements aren't going to push out the div and expand it with the content.