This a common problem and here is a good tutorial about this.
The problem would look like this:
but the outer border should contain all inner elements.
Here is a list of the code:
<html>
<head>
<style type="text/css">
.outer{
border: 0.2em solid #aaa;
margin: 0.1em 0.3em;
width:40%;
display: inline-block;
clear: both;
}
.inner-left{
border: 0.2em solid green;
width: 49%;
float:left;
}
.inner-right{
border: 0.2em solid red;
width: 48%;
float:right;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner-left">
Here are your two boys<br> for getting the job done- the CSS attributes page-break-before and page-break-after. Both instruct the printer to begin printing a new page, with the difference being before or following the element the attribute is applied to. The possible values the two attributes accept are:
</div>
<div class="inner-right">
Here are your two boys for getting the job done- the CSS attributes page-break-before and page-break-after. Both instruct the printer to begin printing a new page, with the difference being before or following the element the attribute is applied to. The possible values the two attributes accept are:
</div>
</div>
</body>
</html> |
The following two lines solves the problem:
display: inline-block; clear: both; |
“clear:both” extends the margin on the top of the cleared box, pushing it down until it “clears” the bottom of the float. In other words, the top margin on the cleared box (no matter what it may have been set to), is increased by the browser, to whatever length is necessary to keep the cleared box below the float.
Here is a list of display property’s value.
