Forum Moderators: not2easy
<div id="pageHeader">
<h1>...</h1>
</div>
<div id="content">
<div id="sessionInfo">
You are logged in as: John Doe
...
</div>
<div id="mainContent">
Blah blah blah
</div>
<div id="nav">
<ul>
<li>...</li>
<li>...</li>
...
</ul>
</div>
</div>
<div id="pageFooter">
...
</div>
And here is how I would like that to be laid out on the page:
+------------------------------------------+
¦+- pageHeader --+ +- sessionInfo --------+¦
¦¦ H1 ...........¦ ¦ You are logged in... ¦¦
¦¦ ..............¦ +----------------------+¦
¦+---------------+ +- mainContent --------+¦
¦+- nav ---------+ ¦ blah blah blah ......¦¦
¦¦ link list ....¦ +----------------------+¦
¦¦ ..............¦ +- pageFooter ---------+¦
¦+---------------+ ¦ .................... ¦¦
¦``````````````````¦ .................... ¦¦
¦``````````````````+----------------------+¦
+------------------------------------------+
This essentially looks like a 2 column layout, where the height of the contents of each "column" does not affect anything in the other "column".
Here's the tricky part... how can I get the nav section into that column on the left? I don't want to absolutely position it because then I would need a fixed height on the pageHeader block. I want this to be expandable such that if the user increases his/her font size it will not break the layout.
Any suggestions on how to go about this design? Am I hoping for too much?
<html>
<body>
<div id="pageHeader" style="float:left;clear:right;width:160px;margin:0;">
<h1>Header Header Header Header</h1>
</div>
<div id="content" style="float:right;position:relative;left:-210px;">
<div id="sessionInfo" style="float:left;margin:7px;">
You are logged in as: John Doe
</div>
<div id="mainContent" style="float:left;clear:both;margin:7px;">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis nec elit. Aliquam id quam non sapien consectetuer convallis. Suspendisse lobortis pede ut nibh. Integer scelerisque. Vivamus urna augue, pretium at, pretium ac, iaculis quis, purus. Donec tellus enim, tincidunt nec, mattis sit amet, dapibus eget, odio. Pellentesque velit mi, tristique nec, pretium nec, suscipit non, turpis. Proin viverra. Proin pretium, odio viverra pellentesque laoreet, orci neque fermentum nulla, ut mattis purus ante in elit. Nunc commodo mi et lorem.</p>
<p>Morbi elementum elementum quam. Phasellus varius lectus non massa. Sed ut est. Proin quis urna elementum turpis pulvinar mollis. Nam posuere vestibulum neque. Proin congue. Donec ac urna non dolor vestibulum ullamcorper. Nullam mollis eleifend libero. Integer porttitor congue velit. Quisque egestas, diam ultricies vestibulum aliquet, ligula ante volutpat risus, et imperdiet tellus mi sed dui. Suspendisse malesuada justo sit amet purus. Suspendisse cursus, nisl id eleifend pulvinar, lectus nibh consectetuer nisl, at dictum dui mi sed ligula. Sed rutrum, mauris ut pulvinar volutpat, nibh magna cursus sapien, quis vehicula tortor risus sit amet neque.</p>
<p>Vivamus elit lorem, lacinia in, dignissim malesuada, pharetra sit amet, augue. Aenean mi nisi, tempus ac, lacinia non, condimentum vitae, magna. Integer pellentesque ultrices nunc. Fusce iaculis ante a dolor. Duis dolor. Ut consequat auctor dui. Nam tristique odio in nunc. Integer neque risus, dictum ut, porta sit amet, malesuada sit amet, purus. In neque. Vivamus nisl elit, congue et, pellentesque sit amet, interdum at, mi. Curabitur velit quam, imperdiet nec, scelerisque sit amet, aliquam vitae, dui. Donec rutrum. Sed dignissim ligula sit amet risus. Sed ac est. Morbi quis elit nec metus convallis pellentesque. Quisque eu lectus.</p>
</div>
<div id="pageFooter" style="clear:left;margin:7px;">
This is the Footer
</div>
</div>
<div id="nav" style="clear:left;width:160px;">
<ul>
<li>test 1</li>
<li>test 2</li>
</ul>
</div>
</body>
</html>
It works in IE. I have not tried it in any other browser.
