I'm pretty confident that the answer to this question is going to involve using a clear:both property. However, I'm struggling with where exactly to place it and how to fully grasp its functionality.
Within my nested div structure, I have a particular section (sectioncut) that needs to accommodate the height of its sibling ul (subnav). I've attempted enclosing the ul in its own div, but it seems like I still don't quite comprehend how positioning and clearing elements work together.
As this is my first time seeking help on Stackoverflow, any advice or feedback would be greatly appreciated =D
HTML
<div id="pagecut">
<div id="pagebg">
<div id="nav">
<ul id="subnav">
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
</ul>
<div id="sectioncut">
This is a test.
</div>
</div>
</div>
</div>
CSS:
body,html {
border: 0px;
margin: 0px;
height: 100%;
background-color: #2200FF;
}
#pagecut {
width: 95%;
height: 100%;
margin-right: auto;
margin-left: auto;
margin-top: 0;
margin-bottom: 0;
background-color: #2200FF;
outline-style: solid;
outline-color:#FF0004;
}
#pagebg {
width: 100%;
height: 100%;
margin-left: auto;
margin-right: auto;
background:url(Img/bg1.png);
background-size: 100% auto;
background-repeat:no-repeat;
}
#nav {
width: 98%;
height: 100%;
margin-right: auto;
margin-left: auto;
outline-style: solid;
outline-color:#00FF00;
}
#subnav {
margin: 0px;
padding: 0px;
}
#subnav li {
display:inline;
background-color: #7DA5EB;
border-color: #7DA5EB;
color: #FFF;
border-top-right-radius: 7px;
border-top-left-radius: 7px;
border-style: solid solid none;
padding-right: 7px;
padding-left: 7px;
margin-left: 2px;
margin-right: 2px;
font-size: x-large;
}
#sectioncut {
height: 100%;
background-color: #7DA5EB;
}