I am currently working on a fluid layout design where the template includes a header, menu, and body section.
<div class="w100 h100">
<div id="headerBox" style="height: 10%;" class="w100">
<div style="width: 80%;" class="lfloat">
<tiles:insertAttribute name="header" />
</div>
<div style="width: 18%; height: 80%;" class="lfloat">
<tiles:insertAttribute name="menu" />
</div>
</div>
---------------body container here --------------
</div>
css
.h100{
height:100%;
}
.w100{
width: 100%;
}
html {
height: 100%;
width: 100%;
}
body {
font-family: "Times New Roman", Times, serif;
width: 100%;
height: 100%;
margin: 0%;
padding: 0%;
overflow: auto;
}
Currently, I am facing an issue where setting the child div's (menu) width to 20% causes my HTML page to display a horizontal scroll bar. Even though the parent div's width is set to 100%, the child div does not scale up to 100%. In order to prevent this issue, I have resorted to setting the child div's width to 18%. What could be causing this problem?