I'm in need of some assistance with taming my unruly HTML. It seems to be misbehaving lately.
The content area on the page I'm currently designing has a two-column layout. Instead of using separate containing divs for each column, I opted for a different approach to ensure proper alignment of certain "rows" within the columns.
My solution involves creating multiple "rows" with two inline divs per row - one for left content and one for right. Most of them are displaying correctly, but there seems to be an issue with the last row. It refuses to cooperate when I try to set its width.
Here's a sneak peek at the relevant HTML:
<div id="mainContainer">
<div id="topBar"></div> //occupies full width
<div id="featured"> //this "row" is working fine
<div id="featuredVideos"></div> //these two
<div id="featuredLiterature"></div> //are displayed inline
</div>
<div id="browseButtons"> //the problematic "row"
<div id="litBrowse"></div> //these two
<div id="vidBrowse"></div> //are displayed inline
</div>
</div>
At this point, what factors could lead to a div refusing to adhere to a specified width? Despite assigning a uniform width of 450px to every child div inside litbrowse and vidbrowse1, the issue persists. Surprisingly, all the content above it, with similar structure, is functioning properly. The only discernible dissimilarity might be the use of two floating divs in the row directly above the troublesome one.
For a better understanding, you can view a jsfiddle demonstrating the problem. The bottom two divs (Browse lit by category, browse vids by category) should be spaced apart, but they stubbornly refuse to adopt their designated 450px width.