Link to home
Start Free TrialLog in
Avatar of arse_soul
arse_soul

asked on

DIV not surrounding List (CSS Side Box)

Hey all,

Just veturing into the world of css and i'm having a problem with the side boxes that you see on so many sites.

When I include text in the side box i.e

<p>TEXT TEXT TEXT TEXT TEXT TEXT TEXT</p>
<p>TEXT TEXT TEXT TEXT TEXT TEXT TEXT</p>
<p>TEXT TEXT TEXT TEXT TEXT TEXT TEXT</p>
<p>TEXT TEXT TEXT TEXT TEXT TEXT TEXT</p>

everything displays fine (i.e the text is inside the box) but when I try and include an unordered list the box does not surround the list but rather displays above it and thats the problem. (The box is actually not above the list as evident from the markup and the Topographic View in FireFox on the developers toolbar but thats what it looks like).

Here is the markup i'm using.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
<!--
/* Side Box */
#content h3 { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; font-weight: bold; color: #fff; margin: 0 0 10px 0; padding: 0; }
.contentBox { margin-top: 10px; margin-bottom: 10px; }
.contentBoxTop { background: url(images/side-box/top-black.gif) repeat-x 0 top #efefef; text-align: left; }
.contentBoxRight { background: url(images/side-box/right.gif) repeat-y right 0; }
.contentBoxLeft { background: url(images/side-box/left.gif) repeat-y left 0; }
.contentBoxBottom { background: url(images/side-box/bottom.gif) repeat-x 0 bottom; }
.contentBoxBottomLeft {background: url(images/side-box/bottom-left.gif) 0 100% no-repeat; }
.contentBoxBottomRight { background: url(images/side-box/bottom-right.gif) 100% 100% no-repeat; }
.contentBoxTopLeft { background: url(images/side-box/top-left-black.gif) 0 0 no-repeat; }
.contentBoxTopRight { background: url(images/side-box/top-right-black.gif) 100% 0 no-repeat; padding:12px; padding-top: 6px; }
.clear { font-size: 1px; height: 1px; }
.column { display: block; float: left; width: 33%; }
-->
</style>
</head>

<body>

<div id="content">
      <div class="contentBoxTop"><div class="contentBoxRight"><div class="contentBoxLeft"><div class="contentBoxBottom"><div class="contentBoxBottomLeft"><div class="contentBoxBottomRight"><div class="contentBoxTopLeft"><div class="contentBoxTopRight">
            <h3>Title</h3>
            <div id="c1" class="column">
                  <ul>
                        <li><a href="#">Item 1</a></li>
                        <li><a href="#">Item 2</a></li>
                        <li><a href="#">Item 3</a></li>
                        <li><a href="#">Item 4</a></li>
                        <li><a href="#">Item 5</a></li>
                        <li><a href="#">Item 6</a></li>
                  </ul>
            </div>
            <div id="c2" class="column">
                  <ul>
                        <li><a href="#">Item 7</a></li>
                        <li><a href="#">Item 8</a></li>
                        <li><a href="#">Item 9</a></li>
                        <li><a href="#">Item 10</a></li>
                        <li><a href="#">Item 11</a></li>
                        <li><a href="#">Item 12</a></li>
                  </ul>
            </div>
            <div id="c2" class="column">
                  <ul>
                        <li><a href="#">Item 13</a></li>
                        <li><a href="#">Item 14</a></li>
                        <li><a href="#">Item 15</a></li>
                        <li><a href="#">Item 16</a></li>
                        <li><a href="#">Item 17</a></li>
                        <li><a href="#">Item 18</a></li>
                  </ul>
            </div>
      </div></div></div></div></div></div></div></div>
</div>

</body>
</html>

Any other links/help and tips regarding better ways of doing the things i'm doing or ways of improving my css coding practice (as evident from the markup) would greatly be appreciated. This is my first attempt at site design without tables... =)

Regards,

Sul.
ASKER CERTIFIED SOLUTION
Avatar of ljo8877
ljo8877
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of arse_soul
arse_soul

ASKER

thanks for the help... worked a treat!
Avatar of ljo8877
ljo8877
Glad I could help, and thanks for the grade. :)