homepage Welcome to WebmasterWorld Guest from 54.204.215.209
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Pubcon Website
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: DrDoc

CSS Forum

    
CSS clear problem
eternal




msg:3421557
 9:24 am on Aug 14, 2007 (gmt 0)

Hi Guys,

Please have a look at this:

---------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Test</title>

<style type="text/css">
body {
font-family: verdana, arial, helvetica, sans-serif;
font-size: 77%;
background: url(/images/background.gif) repeat;
text-align: center;
}

#holder{
width:760px;
border: 1px #000 solid;
background: #FAEFCF;
text-align: left;
margin:0 auto;
}

#maincontent{
padding:10px 6px 800px 7px;
margin-right:191px;
background-color:#fff;
border-right:1px #000 solid;
}

#sidenavcontainer{float:right; width:191px; padding-top:20px;}
#panelnav {width:125px; float:right}
#panelnav ul{list-style: none; margin:0; padding:0;}
#panelnav li {margin:0 0 15px 0; padding:0;}
</style>

</head>
<body>

<div id="holder">

<div>
<div id="sidenavcontainer">
<p>lkjlk jlk l kjl kj lk<br />lkjlk jlk l kjl kj lk<br />lkjlk jlk l kjl kj lk<br />lkjlk jlk l kjl kj lk<br />lkjlk jlk l kjl kj lk<br />lkjlk jlk l kjl kj lk<br />lkjlk jlk l kjl kj lk<br />lkjlk jlk l kjl kj lk<br />lkjlk jlk l kjl kj lk<br />lkjlk jlk l kjl kj lk<br />lkjlk jlk l kjl kj lk<br />lkjlk jlk l kjl kj lk<br />lkjlk jlk l kjl kj lk<br />lkjlk jlk l kjl kj lk<br />lkjlk jlk l kjl kj lk<br />lkjlk jlk l kjl kj lk<br />lkjlk jlk l kjl kj lk<br />lkjlk jlk l kjl kj lk<br />lkjlk jlk l kjl kj lk<br />lkjlk jlk l kjl kj lk<br />lkjlk jlk l kjl kj lk<br />lkjlk jlk l kjl kj lk<br />lkjlk jlk l kjl kj lk<br />lkjlk jlk l kjl kj lk<br />lkjlk jlk l kjl kj lk<br />lkjlk jlk l kjl kj lk<br />lkjlk jlk l kjl kj lk<br />lkjlk jlk l kjl kj lk<br />lkjlk jlk l kjl kj lk<br />lkjlk jlk l kjl kj lk<br />lkjlk jlk l kjl kj lk<br />lkjlk jlk l kjl kj lk<br />lkjlk jlk l kjl kj lk<br />lkjlk jlk l kjl kj lk<br />lkjlk jlk l kjl kj lk<br />lkjlk jlk l kjl kj lk<br />lkjlk jlk l kjl kj lk<br />lkjlk jlk l kjl kj lk<br />lkjlk jlk l kjl kj lk<br />lkjlk jlk l kjl kj lk<br />lkjlk jlk l kjl kj lk</p>
</div>

<div id="maincontent">

<div style="background:#FEF8E7; border:1px dotted #808080; padding:10px;">
<div style="float:left; ">
You searched for:
</div>
<div id="panelnav">
<ul>
<li><a href="http://c19index:8086/gotoSearchCollections.do?area=all" class="bold" title="Modify search">Modify search</a></li>
<li><a href="http://c19index:8086/myArchive/savedSearchesTitle.do?QueryType=collections&amp;area=books&amp;subType=books" class="bold" title="Save search terms to My Archive">Save search terms to My Archive</a></li>
</ul>
</div>
<div style="clear:both">&nbsp;</div>

</div>

</div>
<div style="clear:both">&nbsp;</div>
</div>

</div>

</body>
</html>
------------------------

For some reason the content in the right hand column causes the inner div to expand to its' equal height. Is there a reason for this and a way to fix it so that the inner div, when clears does not take any value from the right hand column?

 

coho75




msg:3421624
 11:12 am on Aug 14, 2007 (gmt 0)

This is laid out a bit different than what you have, but I think it does what you're asking.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Test</title>

<style type="text/css">
body {
font-family: verdana, arial, helvetica, sans-serif;
font-size: 77%;
background: url(/images/background.gif) repeat;
text-align: center;
}

#holder{
width:760px;
border: 1px #000 solid;
background: #FAEFCF;
text-align: left;
margin:0 auto;
}

#maincontent{
float:left;
width:552px;
padding:10px 6px 0 7px;
background-color:#fff;
border-right:1px #000 solid;
}

#sidenavcontainer{float:left; width:171px; padding:20px 10px 0;}
#panelnav {width:125px; float:right}
#panelnav ul{list-style: none; margin:0; padding:0;}
#panelnav li {margin:0 0 15px 0; padding:0;}
</style>

</head>
<body>

<div id="holder">

<div>

<div id="maincontent">

<div style="background:#FEF8E7; border:1px dotted #808080; padding:10px;">
<div>
You searched for:
</div>
<div id="panelnav">
<ul>
<li><a href="http://c19index:8086/gotoSearchCollections.do?area=all" class="bold" title="Modify search">Modify search</a></li>
<li><a href="http://c19index:8086/myArchive/savedSearchesTitle.do?QueryType=collections&amp;area=books&amp;subType=books" class="bold" title="Save search terms to My Archive">Save search terms to My Archive</a></li>
</ul>
</div>
<div style="clear:both">&nbsp;</div>

</div>

</div>
<div id="sidenavcontainer">
<p>lkjlk jlk l kjl kj lk<br />lkjlk jlk l kjl kj lk<br />lkjlk jlk l kjl kj lk<br />lkjlk jlk l kjl kj lk<br />lkjlk jlk l kjl kj lk<br />lkjlk jlk l kjl kj lk<br />lkjlk jlk l kjl kj lk<br />lkjlk jlk l kjl kj lk<br />lkjlk jlk l kjl kj lk<br />lkjlk jlk l kjl kj lk<br />lkjlk jlk l kjl kj lk<br />lkjlk jlk l kjl kj lk<br />lkjlk jlk l kjl kj lk<br />lkjlk jlk l kjl kj lk<br />lkjlk jlk l kjl kj lk<br />lkjlk jlk l kjl kj lk<br />lkjlk jlk l kjl kj lk<br />lkjlk jlk l kjl kj lk<br />lkjlk jlk l kjl kj lk<br />lkjlk jlk l kjl kj lk<br />lkjlk jlk l kjl kj lk<br />lkjlk jlk l kjl kj lk<br />lkjlk jlk l kjl kj lk<br />lkjlk jlk l kjl kj lk<br />lkjlk jlk l kjl kj lk<br />lkjlk jlk l kjl kj lk<br />lkjlk jlk l kjl kj lk<br />lkjlk jlk l kjl kj lk<br />lkjlk jlk l kjl kj lk<br />lkjlk jlk l kjl kj lk<br />lkjlk jlk l kjl kj lk<br />lkjlk jlk l kjl kj lk<br />lkjlk jlk l kjl kj lk<br />lkjlk jlk l kjl kj lk<br />lkjlk jlk l kjl kj lk<br />lkjlk jlk l kjl kj lk<br />lkjlk jlk l kjl kj lk<br />lkjlk jlk l kjl kj lk<br />lkjlk jlk l kjl kj lk<br />lkjlk jlk l kjl kj lk<br />lkjlk jlk l kjl kj lk</p>
</div>
<div style="clear:both">&nbsp;</div>
</div>

</div>

</body>
</html>

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About
© Webmaster World 1996-2014 all rights reserved