?
Solved

DIV not surrounding List (CSS Side Box)

Posted on 2005-04-28
3
Medium Priority
?
556 Views
Last Modified: 2008-01-16
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.
0
Comment
Question by:arse_soul
  • 2
3 Comments
 
LVL 10

Accepted Solution

by:
ljo8877 earned 1000 total points
ID: 13888015
Change this style rule .clear { font-size: 1px; height: 1px; } to .clear { font-size: 1px; height: 1px; clear: both;}
and add <div class="clear">&nbsp;</div> as shown below. The last element inside contentBoxTopRight.

<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 class="clear">&nbsp;</div>
     </div></div></div></div></div></div></div></div>
</div>
0
 

Author Comment

by:arse_soul
ID: 13895992
thanks for the help... worked a treat!
0
 
LVL 10

Expert Comment

by:ljo8877
ID: 13896043
Glad I could help, and thanks for the grade. :)
0

Featured Post

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Creating a CSS block that only applies to printing By default, all of your CSS applies to every possible view of your page - whether on screen, printed, landscape, touch-screen, or whatever.  You can, however, add CSS that only applies under certai…
SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
In this tutorial viewers will learn how add a full-size background image to a webpage using CSS3. Create a new HTML document with an internal stylesheet.: In CSS, define the html element to have a background image. Use a high resolution image.: In t…
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…
Suggested Courses
Course of the Month15 days, 2 hours left to enroll

840 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question