[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