Check out the following HTML code example:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
html, body
{
padding: 0;
margin: 0;
width: 100%;
height: 100%;
border: 1px solid red;
}
#MainDiv
{
width: 100%;
min-height: 200px;
height: auto;
border: 1px solid blue;
}
#Contents
{
width: 500px;
margin: 0 auto;
min-height: 100px;
height: auto;
border: 1px solid green;
}
#RContents
{
float: right;
width: 200px;
min-height: 50px;
height: auto;
border: 1px solid pink;
}
#LContents
{
float: right;
width: 200px;
min-height: 50px;
height: auto;
border: 1px solid yellow;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div id="MainDiv">
<div id="Contents">
<div id="RContents">
Right Content
</div>
<div id="LContents">
Left Content
(<br />) * 100
</div>
</div>
</div>
</form>
</body>
</html>
Here's a link to JSFiddle for reference:
jsfiddle
What issue arises when using float and setting height to 100% in this scenario?
How can I ensure that body, MainDiv, and Contents divs expand with LContents div?
min-height s are crucial in this caseThank you in advance