Often when you find yourself getting caught in a tangled mess of extra divs, and take the time to make it better, you find that the right answer is no extra divs. I was reviewing some code today where a few extra divs, and a bunch of extra style were being applied to over complicate a situation. The situation was a common one; the need to present some content and include a left nav menu to go along with the content. The extra work was being done to give the impression that the two columns were the same height. And extra work was being done to prevent the fluid layout choice from being all that...well fluid. In this case, the menu was always to be to the left of the content, and the menu width and content width were known (proportionatly speaking). So, extra work was done to prevent a break or wrap between the two the when browser text size or dimensions changed. In other words, fluid behavior wasn't desired to begin with.
In this case, a better solution was a much simpiler solution. First remove all extra divs, including anything wrapping the two for the purpose of a faux background in one of the columns. Also, treat the menu as what it was, an ordered list of things and don't wrap it in any extra tags. Define a border-left to the content with the width dimensions that was previously used in the extra div wraps around the menu stuff, and then float the ul (menu) to the left with a negative margin to place it in the left border. The left border is set with the background-color that was desired for the left column. No need to fake an attempt to get the left column to extend the same height as the content column, because a border does that by default.
Here is a simplified look at the type of solution:
<html>
<head>
<style>
#content{
float: left;
width: 42em;
border-left: 8em #2e3436 solid;
height: 20em;
background-color: #eeeeec;
}
#content-menu{
float: left;
margin-left: -8em;
color: #eeeeec;
}
</style>>
</head>
<body>
<div id="content">
<ul id="content-menu">
<li>foo</li>
<li>foo1</li>
<li>foo2</li>
</ul>
<p>here is some content</p>
<p>and some more content</p>
</div>
</body>
</html>
No comments:
Post a Comment