HTML and CSS Reference
In-Depth Information
Figure 7-3. Absolute and relative positioning explained
So, how does the CSS transform the (X)HTML you saw earlier? Well, the site now looks
something like Figure 7-4.
Figure 7-4. Absolutely positioned content and navigation areas
Ahem, something's not quite right here. The problem lies in the fact that the navigation
on the left is much shorter than the content and only takes up as much space as it needs. That's
resulting in an ugly effect not unlike a Tetris piece waiting to land. You could specify in the CSS
that the navigation have a certain height, but what height should that be? Ideally, it needs to
match up with the content to the right of it. But then if you do that—say, set both to 600 pixels
height—it might be fine for a navigation area but content varies wildly. If the size is too small,
your text will burst out of the space you make available; if you set a value too high in the hope
that the main page content has enough space—for example, 2,000 pixels—you're creating a design
that might be fine on some pages but massively oversized for other pages with minimal content
Search WWH ::

Custom Search