Forum Moderators: not2easy
html
<body>
<div class="logos"><img src="logo.gif" id="school" alt="logo" /><img src="UnivLibs.jpg" alt="University Libraries logo" id="libs" /></div>
<div class="navbar"><img src="img22518t.gif" alt="home" /><img src="img22519t.gif" alt="Academics" /><img src="img22520t.gif" alt="Admissions" /><img src="img22521t.gif" alt="The Arts" /><img src="img22522t.gif" alt="Athletics" /><img src="img22523t.gif" alt="University Libraries home" /><img src="img22524t.gif" alt="Campus Offices" /></div>
<div class="container"><img src="top_orange.jpg" id="top" alt="orange swoop at the top of the content area" />
<div class="quick"><h3>Quick Links</h3><ul><li>Libraries Catalog</li><li> Central Catalog</li><li>Research Databases</li><li>Electronic Journals</li><li>QuickQuest</li><li>Reserves</li><li>RefWorks</li><li>Illiad (Interlibrary Loan)</li>
<li>My Library</li><li>Request a Depository Item</li><li>Online Forms</li><li>Libraries & Collections</li>
<li>Giving to University Libraries</li>
</ul>
<h4>Quick Searches</h4><ul><li>Quick Book Search</li><li>Quick Article Search</li></ul></div>
<div class="content">
<div id="navbar"><a href="resources.html">Resources</a> ¦ <a href="services.html">Services</a> ¦ <a href="info.html">Library Information</a> ¦ <a href="help.html">Help</a></div>
[content]</div>
</div></div></body>
and here is the CSS:
.quick <-- quick links div
{
float: left;
width:25%;
position:absolute;
left:21px;
display:block;
height:50%;
margin-bottom:10%;
}
.content
{
margin-left: 26%;
right: 26%;
}
.container { background-color:#fff; color:#000; clear:both; border:1px solid #ffcc33; background-image: url(bottom_sage.jpg);
background-repeat: no-repeat;
background-position: bottom left; padding-bottom:10%; margin:0 auto; }
But that's not the cause of your problems. I see 2 points of concern:
1. You are floating the quick links div (.quick). Floating something takes it out of the flow, which means container no longer contains it. One way around this is to add something after all of your floated content, but before the end of container, and make that item clear the floats. This will push it down below the floats, and since container would contain that item, it would also encompass the floated items. For example:
<div class="quick">...</div>
<div class="content"...</div>
<br style="clear:both" />
Alternatively, you could also float container, in which case it would contain it's floated children. But that may require more work to get the layout looking right.
2. In addition to floating the quick links, you've also given it position: absolute. This also takes it out of the flow. Remove this, and try to avoid using absolute positioning.
Hope that helps.
I thought I had fixed it... but now the content div is being pushed below the links div. Any thoughts?
Ok, for some reason I've got it working now with your suggested <br....> line while floating them both, before I couldn't get it to work for some reason. Ok, thanks very much!
