Looking for some help with a page layout issue. I have a header on my page with a title and menu. Currently, the header has a margin and a minimum width set to the width of the menu. However, when the user resizes the window and reaches the minimum width, the right-hand margin disappears. I want the margin to be included in the minimum size of the header. Any suggestions?
Check out the HTML:
<!DOCTYPE HTML>
<html>
<body>
<div id="header">
<ul id="title">
<li>
Title
</li>
</ul>
<ul id="menu">
<li>Home</li>
<li>Profile</li>
<li>Projects</li>
<li>News</li>
<li>Contact</li>
<li class="stretch"></li>
</ul>
</div>
</body>
</html>
Below is the CSS:
html, body {
margin: 0;
border: 0;
padding: 0;
width: 100%;
height: 100%;
font-family: Sans-Serif;
font-size: 1em;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
#header {
background-color: orange;
margin: 1em;
}
#title {
font-size: 2em;
font-weight: bold;
background-color: red;
display: inline-block;
}
#title li {
position: relative;
}
#menu {
width: 40em;
background-color: blue;
text-align: justify;
}
#menu li {
display: inline;
}
#menu .stretch {
display: inline-block;
width: 100%;
}
And finally, the JavaScript:
$(function() {
//SET MINIMUM WINDOW WIDTH TO MENU WIDTH
var menu = $('#menu'),
header = $('#header');
header.css('min-width', menu.width());
$(window).resize(function() {
});
});
If you want to see a live example, check out this JSfiddle: http://jsfiddle.net/L3u7nLgz/