[thelist] div in content causes float to break
Scott Blanchard
octigonuser at hotmail.com
Wed Feb 25 16:56:14 CST 2004
Please take a look at this url and notice how the sidebar elements along the
right side of the content, are flowing underneath the content. They should
float to the right of the main content.
http://www.studentlifebiblestudy.net/ukraine
I have the following structure in my xhtml file:
[code]
<div id="container">
<div id="contentContainer">
<div id="content">
<x8:pageContent runat="server" />
</div>
</div>
<div id="sidebar">
<div class="sidebox">
<div class="boxhead"><h2><x8:sidebarTitle sidebarid="1" runat="server"
/></h2></div>
<div class="boxbody">
<x8:sidebarContent sidebarid="1" runat="server" />
</div>
</div>
<div class="sidebox">
<div class="boxhead"><h2><x8:sidebarTitle sidebarid="2" runat="server"
/></h2></div>
<div class="boxbody">
<x8:sidebarContent sidebarid="2" runat="server" />
</div>
</div>
<div class="sidebox">
<div class="boxhead"><h2><x8:sidebarTitle sidebarid="3" runat="server"
/></h2></div>
<div class="boxbody">
<x8:sidebarContent sidebarid="3" runat="server" />
</div>
</div>
</div>
</div>
[/code]
And in the css file, the relevant css is as follows(I am using the negative
margin trick to float the sidebar to the right of the content. It works
perfectly until you place a div inside the content, when it breaks as
evidenced by the url above. You can see however that it floats correctly in
this page (http://www.studentlifebiblestudy.net/ukraine/default.aspx?id=6):
[css]
#container {width:100%; height:auto; background:#fff; min-height:420px}
#contentContainer {
background:#fff;
width: 100%;
float: left;
margin-right: -240px;
}
#content {
padding:10px 0 20px 20px;
margin-right: 240px;
}
#sidebar {
background:#fff;
float:right;
margin:20px 10px 0 0;
width:200px;
}
/* Show only to IE PC \*/
* html .boxhead h2 {height: 1%;} /* For IE 5 PC */
.sidebox {
margin: 0 auto; /* center for now */
width: 200px; /* ems so it will grow */
background: url(../images/sbbody-r.gif) no-repeat bottom right;
font-size: 100%;
}
.boxhead {
background: url(../images/sbhead-r.gif) no-repeat top right;
margin: 0;
padding: 0;
text-align: center;
}
.boxhead h2 {
background: url(../images/sbhead-l.gif) no-repeat top left;
margin: 0;
padding: 22px 30px 5px;
color:#765;
font-weight: bold;
font-size: 1em;
line-height: 1em;
text-shadow: 0px 3px 8px #DDDDDD;
}
.boxbody {
background: url(../images/sbbody-l.gif) no-repeat bottom left;
margin: 0;
padding: 5px 30px 31px;
width:140px;
overflow:hidden;
}
[/css]
_________________________________________________________________
Get fast, reliable access with MSN 9 Dial-up. Click here for Special Offer!
http://click.atdmt.com/AVE/go/onm00200361ave/direct/01/
More information about the thelist
mailing list