I'm facing a rather unique issue while working on creating a menu for a web page. The main challenge lies in ensuring that the parent element containing floated child divs adjusts its height dynamically, especially when changes are made to the padding of the menu buttons (child DIVs). Currently, the parent has a width of 100%, and one of the children inside it has an automatic width with a max-width setting to allow the left and right child menu buttons to come together smoothly when the page is resized smaller. However, the problem arises when the screen size decreases to a point where the left and right menu portions overlap, causing all the child menu buttons to stack vertically instead of generating a scroll bar for the main page.
Although I plan to implement media queries later for mobile compatibility, finding a solution to this current problem would be highly beneficial. If sharing my code can help in arriving at a resolution, please let me know, and I'll provide it as needed.
Thank you for your assistance!
In case it helps, below is a snippet of the HTML code:
<body>
<div id="header" class="clearfix">
<div id="wrapper">
<div id="main-nav" class="float-left">
<ul id="main-nav-menu" class="menu">
<li id="main-menu-button">
<a href="#" data-description="Since 1976">
Pardee Electric
</a>
</li>
</ul>
</div>
<div id="main-nav" class="float-right">
<ul ud="main-nav-menu" class="menu">
<li id="main-menu-button" class="float-right">
<a href="#">
Get in Touch
</a>
</li>
<li id="main-menu-button" class="float-right">
<a href="#">
Residential
</a>
</li>
<li id="main-menu-button" class="float-right">
<a href="#">
Commercial
</a>
</li>
<li id="main-menu-button" class="float-right">
<a href="#">
Industrial
</a>
</li>
</ul>
</div>
</div>
</div>
</body>
And here's a glimpse of the accompanying CSS code:
/* Relevant CSS styles */
#header {
width: 100%;
height: auto;
background-color: #456DC0;
border-bottom: 1px solid #FFFFFF;
}
#wrapper {
width: auto;
max-width: 1024px;
height: auto;
background: none;
margin: 0 auto;
}
.float-right {
float: right;
}
.float-left {
float: left;
}
If needed, feel free to check out the Jsfiddle demo. Your insights and suggestions would be greatly appreciated!
Thank you once again!