Shaded edges in your div wrapper

I'm not sure what term to use when describing the design style I'm trying to convey. So for now, I'll call it "Shaded edges of a div wrapper".
To see what I mean, follow this link:
http://www.ahiweb.ca/demopic.html
You'll see that I drew red arrows pointing to the graphics that I want to be able to implement in my web pages. I like the idea of my div wrapper having a 3-dimensional feel to it.
Here's the actual site so that you can anaylze what's happening better:
http://forum.justfortheloveofit.org/
(I am not affiliated with the politics of that site, strange story how I found it, I just like the visual style of the how the banner is on top of a div wrapper that has gradient edges)
So, if you right click anywhere near where I pointed with my red arrows, you can look at the background image, but I'm confused that the image you look at is this:
http://forum.justfortheloveofit.org/styles/prosilver_se/theme/images/border_top_right.gif
This border edge is only for the right side of the wrapper, but I right clicked on the left!   I just don't get the logic of it.
I have decent css/html skills. Here is my first and only css site: http://www.welcomehomehrm.com/
You'll see that I used a repeated image of a gradient, so that the background goes from a darker beige at the top, to a white at the bottom. That's easy. But you'll notice that my div wrapper is just a bland off-white.   I would like it to be shaded on the edges.
So hopefully some of you know what I'm getting at here!    Does anyone have any tips on how to acheive what I'm going after?   Or anyone know of any tutorials?
Cheers,
Cory

You could look at using CSS Sprites:
http://cssglobe.com/post/3714/css-sprites-rounded-corners/
or the Sliding Door Technique:
http://www.alistapart.com/articles/slidingdoors/
You could also just slice up the background image (similar to the design you created), and using wrapper div
1. Slice for the top section that includes your header
2. Slice that repeats down the page for the content area
3. Slice for the footer area

Similar Messages

Help with dreamweaver div wrapper

I am creating a web page using a div wrapper to contain all my div layout.
What I want it to do is automatically adjust the layout if a browser size is changed. Right now the site remains fixed when a window size is changed. Is this because I am using divs and not tables?
Any help and suggestions would be welcome.
This is my code
<!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=UTF-8" />
<title>Untitled Document</title>
<style type="text/css">

</style>
</head>
<body>
<div id="wrapper" align="center">
<div id="background"></div>
<div id="apDiv2">
<h2 align="right"><em>If you can dream it ... we can build it!</em></h2>
</div>
<div id="apDiv3">Home</div>
<div id="apDiv4">Services</div>
<div id="apDiv5">Portfolio</div>
<div id="apDiv6">Contact</div>
<div id="copyright">
<div align="right">© 2010 Center Line Construction & Remodeling</div>
</div>
<p> </p>
</div>
</body>
</html>
Thanks

You might want to play around with #apDiv2 ID, remove the code there first and see if that is what you are after.
Also you might want to nest some divs make <div class="wrapper"><div class="content_wrapper">This is content wrapper</div></div>

Company EShot is scrambled when viewed on the iPhone.

Hi all
I have recently been employed with a firm and have the task of creating a weekly Eshot that is to be sent out. I don't have much experience in Dreamweaver and I am seeking your help.
Firstly I have created the page using tables over a background image and centred it all. It looks fine on most browsers on computers. However when I try viewing the EShot on an iPhone it is scrambled. I can't understand why and I included a <div id=wrapper> tag to try and correct the problem and used <div> tags for each section. However they seem to be moving around slightly on seperate browsers and the iPhone moves the tables everywhere.
I would appreciate any help.
Here is the code:
<!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=utf-8" />
<title>StyleStudio Eshot</title>
<style type="text/css">
body {
    background-image: url(http://www.eclipseblinds.co.uk/media/122036/ss_mainbkgrnd.png);
    background-repeat: no-repeat;
    margin-left:0px;
    margin-top: 0px;
    background-attachment: scroll;
    background-position: center top;
.text-area-1 {
    font-family: Arial, Helvetica, sans-serif;
.text-area-1 {
    font-weight: bold;
.text-area-1 {
    color: #FFF;
    list-style-type: disc;
    line-height: 25px;
    font-style: normal;
    font-size: 16px;
.text-area-2 {
    font-family: Arial, Helvetica, sans-serif;
.text-area-2 {
.text-area-two {
    font-family: Arial, Helvetica, sans-serif;
    color: #FFF;
.text-area-2 {
    color: #FFF;
    font-weight: bold;
    letter-spacing: normal;
    word-spacing: normal;
    line-height: 25px;
.text-area-3 {
    font-family: Arial, Helvetica, sans-serif;
    color: #FFF;
    font-weight: bold;
    font-size: 22px;
    right: 0px;
    position: static;
    line-height: 25px;
.text-area-2 ul li {
    text-align: left;
    line-height: 25px;
.text-area-4 {
    color: #FFF;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    padding: 0px;
    letter-spacing: 0em;
    word-spacing: 0em;
    vertical-align: top;
.text-area-4 {
    color: #FFF;
.text-area-4 {
    font-size: 18px;
.text-area-4 {
    font-size: 14px;
    color: #000;
    line-height: normal;
    word-spacing: normal;
#table1 table tr td ul .text-area-1 .text-area-1 .text-area-1 {
</style>
</head>
<body>
<div id="wrapper">
</div>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p align="center"> </p>
<div id="table1">
    <table width="576" height="171" border="0" align="center" cellpadding="5" cellspacing="4">
      <tr>
        <td width="281"> </td>
        <td width="283"><ul>
          <li class="text-area-1"><span class="text-area-1"><span class="text-area-1"><span class="text-area-1"><span class="text-area-1"><span class="text-area-1"><span class="text-area-1">Over 300 Roller Fabrics<br />
          </span></span></span></span></span></span></li>
          <li class="text-area-1">Over 200 Vertical Fabrics</li>
          <li class="text-area-1">Over 90% exclusive to Eclipse</li>
          <li class="text-area-1">Over 80% produced in the UK</li>
          <li class="text-area-1">Available for the iPad</li>
        </ul>    </td>
      </tr>
    </table>
</div>
<p> </p>
<p class="text-area-1"><span class="text-area-2"></span></p>
<p> </p>
<p class="text-area-1"> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
    <div id="table3">
    <table width="604" height="85" border="0" align="center" cellpadding="0" cellspacing="4">
      <tr>
        <td width="19" height="77"> </td>
        <td width="573" class="text-area-2"><ul>
          <li class="text-area-2"><span class="text-area-2"><span class="text-area-2"><span class="text-area-2">ONLINE Interactive Design Space</span></span></span></li>
          <li class="text-area-2">Personalise your wall colour & blinds</li>
          <li class="text-area-2">Roman, Pleated, Roller & Vertical</li>
        </ul>    </td>
      </tr>
      </table>
        <table width="520" height="32" border="0" align="center" cellpadding="0" cellspacing="2">
          <tr>
            <td class="text-area-3">BRING YOUR BLIND TO LIFE</td>
          </tr>
        </table>
    </div>
<table width="700" height="253" border="0" align="center" cellpadding="0" cellspacing="2">
      <tr>
        <td height="249"> </td>
      </tr>
</table>
<div align="center" id="table 3">
<table width="600" height="125" border="0" align="center" cellpadding="0" cellspacing="4">
      <tr>
        <td width="229" height="117"> </td>
        <td width="363" class="text-area-2"><ul>
          <li class="text-area-2">The Sample Room makes choosing<br />
            your fabric even easier.
            <br />
          </li>
          <li class="text-area-2">Order 5 free samples of any fabric.</li>
          <li class="text-area-2">Items dispatched directly to any address.</li>
        </ul></td>
      </tr>
</table>
</div>
<div id="footer">
<table width="700" height="35" border="0" align="center" cellpadding="0" cellspacing="2">
    <tr>
      <td width="50"> </td>
      <td width="601"><a href="http://www.eclipseblinds.co.uk" target="http://www.eclipseblinds.co.uk"><img src="http://www.eclipseblinds.co.uk/media/122045/eclipse_red_web_footer.png" width="600" height="40" alt="footer" /></a></td>
      <td width="41"> </td>
    </tr>
</table>
</div>
</body>
</html>

This may be the first time I have seen an email put together like this - interesting.
When using tables, design view in dreamweaver is actually very accurate, so if it looks a little off there, it's likely to be a little off everywhere. This is maybe the only time when design view is very accurate. Using your code in DW, it's seems to be off.
General HTML email guidelines (a short list):
Use an outer table to contain all the inner tables - much like your div wrapper.
Do not use divs
Do not use embedded CSS unless it's for email client overrides or mobile devices (iphone reads them). Instead use inline CSS styling. http://www.tizag.com/cssT/inline.php
The way you have built the email, using a background image with tables over the top, will NEVER work across all email clients and should be avoided at all costs - in fact, background images themselves don't appear in all email clients. You need to construct your email using sliced images and position the text inside color boxes instead of on a background. Keep in mind that some email clients turn images OFF by default so make sure the structure, and design of your email is kept even without the images.
I have included some resources below to help you get a better understanding of the HTML email side.
Free Templates: http://mailchimp.com/resources/html-email-templates/
http://24ways.org/2009/rock-solid-html-emails
http://kb.mailchimp.com/article/how-to-code-html-emails
http://mailchimp.com/resources/guides/your-first-email-marketing-project/
Rik

Wrapper div background image won't appear in browser...

Hi All,
Here's a link to the test site:
http://www.davidcoshdesign.com/test/tee
If you go to 'About' – top right nav, there should be two vertical 'lines' running all the way down the page(s), either side of the main body copy.
All the pages are created from the same template.
It's a repeating background image in the #wrapper div. I can see it DW, but not in any browsers.
I guess it's not linking somehow... but can't figurte it out.
Also, the layouts on the 'Partners and 'Philosophy' pages 'jump' when you go to them. Again, I guess there's an error in the code somewhere...
Any help with these two things would be very much appreciated.
RP

Change this -
#wrapper {
    background-repeat: repeat;
    background-image: url(assets/images/columnedge.jpg);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    font-style: normal;
    line-height: 19px;
    font-weight: normal;
    color: #999;
    text-decoration: none;
    width: 980px;
    margin-top: 0px;
    margin-right: auto;
    margin-bottom: 0px;
    margin-left: auto;
    height: auto;
to this -
#wrapper {
    background-repeat: repeat;
    background-image: url(assets/images/columnedge.jpg);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    font-style: normal;
    line-height: 19px;
    font-weight: normal;
    color: #999;
    text-decoration: none;
    width: 980px;
    margin-top: 0px;
    margin-right: auto;
    margin-bottom: 0px;
    margin-left: auto;
    height: auto;
   overflow:hidden;
You need to clear the floats so that div#wrapper will contain the contents. To fix the jumping, add this to your CSS -
html { overflow-y:scroll; }

How to stretch content div to bottom of page.

Been messing around with my site so much that I needed to create a new one.
However, I can't get to stretch the content div to the bottom of the page if the content text doesn't fill the page.
I have a footer at the bottom of the page that stretches the full width of the page, so I can't use the trick with the body background.
I found a lot of results on the internet, but I seem to get a little lost.
Can anyone help me?
This is my HTML code:
<!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=utf-8" />

<title>Schudden fansite</title>



<link href="../css/Noorderzon.css" rel="stylesheet" type="text/css" /></head>
<body class="oneColElsCtrHdr">
<div id="container">
<div id="header">
<h1> </h1>
</div>
<div id="mainContent">
<div id="nav"><a href="#" title="Home">Home</a> | <a href="#" title="Biography">Biography</a> | <a href="#" title="News & Updates">News & Updates</a> | <a href="#" title="Gallery">Gallery</a> | <a href="#" title="Portfolio Work">Portfolio Work</a> | <a href="#" title="Links">Links</a> | <a href="#" title="Contact">Contact</a></div>
<p>Main Content</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis ligula. P</p>
    <h2> </h2>
    <p> </p>
</div>
<div id="footer">
    <p> </p>
</div>
</div>
</body>
</html>
And this is the CSS code:
@charset "utf-8";
body {
padding: 0;
text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
color: #000000;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 9pt;
background-color: #800000;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
height: 100%;
body,td,th {
font-size: 9pt;
color: #333;
/* Tips for Elastic layouts
1. Since the elastic layouts overall sizing is based on the user's default fonts size, they are more unpredictable. Used correctly, they are also more accessible for those that need larger fonts size since the line length remains proportionate.
2. Sizing of divs in this layout are based on the 100% font size in the body element. If you decrease the text size overall by using a font-size: 80% on the body element or the #container, remember that the entire layout will downsize proportionately. You may want to increase the widths of the various divs to compensate for this.
3. If font sizing is changed in differing amounts on each div instead of on the overall design (ie: #sidebar1 is given a 70% font size and #mainContent is given an 85% font size), this will proportionately change each of the divs overall size. You may want to adjust based on your final font sizing.
#container {
width: 100%;
text-align: center; /* this overrides the text-align: center on the body element. */
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
background-color: #800000;
padding-bottom: 0px;
top: 0px;
bottom: 0px;
height: 100%;
#header {
width: 960px;
padding-top: 0;
padding-bottom: 0;
height: 160px;
margin-right: auto;
margin-left: auto;
background-color: #DDDDDD;
background-image: url(../images/header.jpg);
#header h1 {
margin: 0; /* zeroing the margin of the last element in the #header div will avoid margin collapse - an unexplainable space between divs. If the div has a border around it, this is not necessary as that also avoids the margin collapse */
padding: 10px 0; /* using padding instead of margin will allow you to keep the element away from the edges of the div */
#mainContent {
width: 960px;
margin-right: auto;
margin-left: auto;
padding-top: 0;
padding-right: 0px;
padding-bottom: 0;
padding-left: 0px;
background-image: url(../images/mainbg.jpg);
height: 100%;
#nav {
text-align:center;
margin-top:0px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10pt;
color:#000;
font-weight:700;
padding-top:9px;
padding-bottom:10px;
text-decoration:none;
background-image: url(../images/mainbg.jpg);
background-repeat: repeat;
width: 960px;
#nav a {
background:#fff;
color:#000;
text-decoration:none;
#nav a:active {
background:#fff;
color:#800000;
#nav a:hover {
background:#fff;
color:#000;
font-size:10pt;
padding-bottom:2px;
border-bottom-width: 3px;
border-bottom-style: dotted;
border-bottom-color: #800000;
a:link {
color: #000;
a:hover {
color: #800000;
a:active {
color: #369;
a:visited {
color: #369;
#footer {
height: 100px;
width: 100%;
padding-top: 0;
padding-bottom: 0;
background-image: url(../images/bottom.png);
margin-bottom: 0px;
bottom: 0px;
position: fixed;

so Im having an issue that is similar but the fixes arent really working. Here is the site http://upeer.jordanselectronics.com/
I've never worked with a page this short so it was never an issue but I want the content area to stretch 100 percent so it fills the browser window and pushes the footer to the bottom if the page is so short theres no scroll bar. I put height modifiers on the body, the wrapper(container) and the content div but it's still only as tall as the content in the content div.
@charset "utf-8";
body {
font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
margin: 0;
padding: 0;
min-height: 100%;
/* ~~ Element/tag selectors ~~ */
ul, ol, dl { /* Due to variations between browsers, it's best practices to zero padding and margin on lists. For consistency, you can either specify the amounts you want here, or on the list items (LI, DT, DD) they contain. Remember that what you do here will cascade to the .nav list unless you write a more specific selector. */
padding: 0;
margin: 0;
h1, h2, h3, h4, h5, h6, p {
font-family: Arial, Helvetica, sans-serif;
color: #333;
font-size: 1em;
a img { /* this selector removes the default blue border displayed in some browsers around an image when it is surrounded by a link */
border: none;
/* ~~ Styling for your site's links must remain in this order - including the group of selectors that create the hover effect. ~~ */
a:link {
color: #42413C;
text-decoration: underline; /* unless you style your links to look extremely unique, it's best to provide underlines for quick visual identification */
a:visited {
color: #6E6C64;
text-decoration: underline;
a:hover, a:active, a:focus { /* this group of selectors will give a keyboard navigator the same hover experience as the person using a mouse. */
text-decoration: none;
/* ~~ this fixed width container surrounds the other divs ~~ */
.container {
width: 960px;
margin: 0 auto;
height: 100%;
/* ~~ the header is not given a width. It will extend the full width of your layout. It contains an image placeholder that should be replaced with your own linked logo ~~ */
.header {
/* ~~ This is the layout information. ~~
1) Padding is only placed on the top and/or bottom of the div. The elements within this div have padding on their sides. This saves you from any "box model math". Keep in mind, if you add any side padding or border to the div itself, it will be added to the width you define to create the *total* width. You may also choose to remove the padding on the element in the div and place a second div within it with no width and the padding necessary for your design.
.content {
background-image: url(contentbackground.png);
padding: 25px;
min-height: 100%;
/* ~~ The footer ~~ */
.footer {
background-image: url(footerbackground.png);
background-repeat: no-repeat;
/* ~~ miscellaneous float/clear classes ~~ */
.fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
float: right;
margin-left: 8px;
.fltlft { /* this class can be used to float an element left in your page. The floated element must precede the element it should be next to on the page. */
float: left;
margin-right: 8px;
.clearfloat { /* this class can be placed on a <br /> or empty div as the final element following the last floated div (within the #container) if the #footer is removed or taken out of the #container */
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
.navbar {
background-color: #F00;

Div moves down when window is resized

Hello,
Here's my problem: When I resize my browser window the main div is resized up until a certain point when it just falls below all of the other content.
How can I prevent this from happening? I have both the top and bottom div's set to auto width, so I can't figure out whats going wrong.
Here's the website if you want to see for yourself: www.hondovfd.org
Here's some code from my template file:
<!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=UTF-8" />

<title>Untitled Document</title>

<meta name="description" content="Hondo Fire and Rescue serves the Arroyo Hondo and Canada Village areas of Santa Fe County, NM." />
<meta name="keywords" content="hondo, hondo fire, hondo vfd, hondo fire department, santa fe county fire department, santa fe county, volunteer fire department, hondo volunteer fire department" />
<link href="../stylesheet1.css" type="text/css" rel="stylesheet" />

<script src="../SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="../SpryAssets/SpryMenuBarVertical.css" rel="stylesheet" type="text/css" />
</head>
<body class="thrColLiqHdr">
<div id="container">
<div id="header"></div>
<div id="sidebar1">
<h3>Navigation : </h3>
<ul id="MenuBar1" class="MenuBarVertical">
<li><a href="/index.php">Home</a></li>
<li><a href="/support.php">Support Hondo</a></li>
<li><a class="MenuBarItemSubmenu" href="#">Information Menu</a>
    <ul>
      <li><a href="/people.php">Our People</a></li>
      <li><a href="http://www.google.com/maps/ms?ie=UTF8&hl=en&msa=0&msid=101620713606637979698.00045b6ead4ab4ea70b78&z=11" target="_blank">Response Area</a></li>
      <li><a href="/medical.php">Medical</a></li>
      <li><a href="/apparatus.php">Apparatus</a></li>
      <li><a href="/training.php">Training</a></li>
      <li><a href="/volunteer.php">Volunteer</a></li>
      <li><a href="/statistics.php">Statistics</a></li>
      <li><a href="/patchtrading.php">Patch Trading</a></li>
    </ul>
</li>
<li><a href="/gallery2/main.php">Photo Gallery</a></li>
<li><a href="/calendar.php">Calendar</a></li>
<li><a href="/news.php">Blog/News</a></li>
<li><a href="/links.php">Links</a></li>
<li><a href="/contact.php">Contact Us</a></li>
</ul>
<br />
<form action="https://www.paypal.com/cgi-bin/webscr" method="post">
<span class="lefttext">
<input type="hidden" name="cmd" value="_s-xclick">
<input type="hidden" name="hosted_button_id" value="8567201">
<input type="image" src="https://www.paypal.com/en_US/i/btn/btn_donate_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!" align="middle" />
<img alt="" border="0" src="https://www.paypal.com/en_US/i/scr/pixel.gif" width="1" height="1" align="absmiddle" >
</img></input></input>
</span>
</form>
<span class="lefttext"><br />
</span>
<center>
<span class="lefttext"><a href="http://www.facebook.com/pages/Santa-Fe-NM/Hondo-Volunteer-Fire-Department/74284233488" target="_blank" class="lefttext">Hondo VFD on Facebook</a></span>
</center>
</div>
<div id="sidebar2">
    <p><a href="/membersonly/login.php">Log In</a> | <a href="/membersonly/logout.php">Log Out</a><br />
    <a href="/membersonly/register.php">Register</a></p>
    <p><img src="/firedanger/Moderate.jpg" width="127" height="100" /></p>
    <p>Call Statistics as of:<br />
    <?php
$myFile = "/home/hondovf1/public_html/membersonly/month.txt";
$fh = fopen($myFile, 'r');
$theData = fread($fh, filesize($myFile));
fclose($fh);
echo $theData;
?><?php
$myFile = "/home/hondovf1/public_html/membersonly/date.txt";
$fh = fopen($myFile, 'r');
$theData = fread($fh, filesize($myFile));
fclose($fh);
echo $theData;
?></p>
<table width="90%" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
    <td width="60%">EMS Calls</td>
    <td width="40%"><?php
$myFile = "/home/hondovf1/public_html/membersonly/emscalls.txt";
$fh = fopen($myFile, 'r');
$theData = fread($fh, filesize($myFile));
fclose($fh);
echo $theData;
?></td>
</tr>
<tr>
    <td>Fire Calls</td>
    <td><?php
$myFile = "/home/hondovf1/public_html/membersonly/firecalls.txt";
$fh = fopen($myFile, 'r');
$theData = fread($fh, filesize($myFile));
fclose($fh);
echo $theData;
?></td>
</tr>
    <tr>
    <td>Other Calls</td>
    <td><?php
$myFile = "/home/hondovf1/public_html/membersonly/othercalls.txt";
$fh = fopen($myFile, 'r');
$theData = fread($fh, filesize($myFile));
fclose($fh);
echo $theData;
?></td>
</tr>
</table>
<hr />
     
    <div id="cse" style="width: 100%;">Loading</div>
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript">
google.load('search', '1', {language : 'en'});
google.setOnLoadCallback(function(){
    var googleNumSearchResults = 5;
     var customSearchControl = new google.search.CustomSearchControl('002969495656254731547:rhlwwedx2hi');
    customSearchControl.setResultSetSize(google.search.Search.SMALL_RESULTSET);
    customSearchControl.draw('cse');
}, true);
</script>
<link rel="stylesheet" href="http://www.google.com/cse/style/look/default.css" type="text/css" />
     
</div>

<div id="mainContent">
<div class="topleft"></div><div class="top"><div class="topright"></div></div>
<div class="wrap">

    <table width="95%" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td height="47" class="h2">Header</td>
      </tr>
      <tr>
        <td>Text Goes Here!</td>
      </tr>
    </table>

</div><br class="clearfloat" />
<div class="bottomleft"></div><div class="bottom"><div class="bottomright"></div></div></div>
</div>
</div>
</div>
     <br class="clearfloat" />
<div id="footer">
    <p align="center">© Copyright 2009 Hondo Volunteer Fire Department | <a href="mailto:[email protected]">Contact Us</a><a href="http://www.legalhelpers.com/chapter-13-bankruptcy/chapter13.html"></a><br />Hosting provided by <a href="http://studiox.com/" target="_blank">Studio X</a></p>
</div>
</div>
<script type="text/javascript">

</script>
<?php include_once("/home/hondovf1/public_html/analyticstracking.php"); ?>
</body>
</html>
And here is my CSS file:
body {
     font-family: Verdana, Arial, Helvetica, sans-serif;
     font-size: 12px;
     width: auto;
     color: #333333;
     margin-top: 0;
     margin-right: 0;
     margin-bottom: 0;
     margin-left: 0;
     padding-top: 0;
     padding-right: 0;
     padding-bottom: 0;
     padding-left: 0;
     background-image: url(images/main-right.png);
     background-repeat: repeat-y;
.thrColLiqHdr #container {
     width: 95%; /* this overrides the text-align: center on the body element. */
     margin-top: 0;
     margin-right: auto;
     margin-bottom: 0;
     margin-left: auto;
     height: auto;
     background-image: url(/images/halftone1.png);
.thrColLiqHdr #header {
     padding: 0 10px;
     height: 100px;/* this padding matches the left alignment of the elements in the divs that appear beneath it. If an image is used in the #header instead of text, you may want to remove the padding. */
     background-image: url(images/header.jpg);
     background-repeat: no-repeat;
     background-position:center;
     border-bottom-width: 5px;
     border-bottom-style: solid;
     border-bottom-color: #000;
.thrColLiqHdr #navbar {
     height:45px;
.thrColLiqHdr #header h1 {
     margin: 0; /* zeroing the margin of the last element in the #header div will avoid margin collapse - an unexplainable space between divs. If the div has a border around it, this is not necessary as that also avoids the margin collapse */
     padding: 10px 0; /* using padding instead of margin will allow you to keep the element away from the edges of the div */
/* Tips for sidebars:
1. Since we are working in percentages, it's best not to use side padding on the sidebars. It will be added to the width for standards compliant browsers creating an unknown actual width.
2. Space between the side of the div and the elements within it can be created by placing a left and right margin on those elements as seen in the ".thrColLiqHdr #sidebar1 p" rule.
3. Since Explorer calculates widths after the parent element is rendered, you may occasionally run into unexplained bugs with percentage-based columns. If you need more predictable results, you may choose to change to pixel sized columns.
.thrColLiqHdr #sidebar1 {
     float: left; /* this element must precede in the source order any element you would like it be positioned next to */
     width: 15%; /* top and bottom padding create visual space within this div */
     height: 100%;
     padding-top: 15px;
     padding-right: 0;
     padding-bottom: 15px;
     padding-left: 0;
     min-width: 150px;
.thrColLiqHdr #sidebar2 {
     float: right; /* this element must precede in the source order any element you would like it be positioned next to */
     width: 15%; /* top and bottom padding create visual space within this div */
     padding-top: 0px;
     padding-right: 0;
     padding-bottom: 15px;
     padding-left: 0;
     min-width: 150px;
.thrColLiqHdr #sidebar3 {
     float: right; /* this element must precede in the source order any element you would like it be positioned next to */
     width: 275px; /* top and bottom padding create visual space within this div */
     padding-top: 0px;
     padding-right: 0;
     padding-bottom: 15px;
     padding-left: 0;
     min-width: 150px;
.thrColLiqHdr #sidebar1 p, .thrColLiqHdr #sidebar1 h3, .thrColLiqHdr #sidebar2 p, .thrColLiqHdr #sidebar2 h3 {
     margin-left: 10px; /* the left and right margin should be given to every element that will be placed in the side columns */
     margin-right: 10px;
     text-align: center;
/* Tips for mainContent:
1. the space between the mainContent and sidebars is created with the left and right margins on the mainContent div.
2. to avoid float drop at a supported minimum 800 x 600 resolution, elements within the mainContent div should be 300px or smaller (this includes images).
3. in the Internet Explorer Conditional Comment below, the zoom property is used to give the mainContent "hasLayout." This avoids several IE-specific bugs.
.thrColLiqHdr #mainContent {
     margin-top: 10px;
     margin-bottom: 10px;
     float: left;
     width: 65%;
     background-image: url(images/main-right.png);
     background-repeat: repeat-y;
     background-position: right;
.h2 {
     color: #B4241B;
     font-size: 20px;
     letter-spacing: -2px;
     font-weight: 100;
     font-family: Verdana, Arial, Helvetica, sans-serif;
     padding-top: 0px;
     padding-right: 0px;
     padding-bottom: 0px;
     padding-left: 0px;
     line-height: normal;
.thrColLiqHdr #footer {
     text-align: center;
     color: #666;
     font-size: 11px;
     padding: 10px;
     background: #f7f7f7;
     border-top: 1px solid #aaa;
     width: auto;
.thrColLiqHdr #footer p {
     margin: 0; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse - a space between divs */
     padding: 2px 0; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */
/* Miscellaneous classes for reuse */
.fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
     float: right;
     margin-left: 8px;
.fltlft { /* this class can be used to float an element left in your page The floated element must precede the element it should be next to on the page. */
     float: left;
     margin-right: 8px;
.clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain its child floats */
     clear:both;
    height:0;
    font-size: 1px;
    line-height: 0px;
.topleft {
     height:22px;
     width:19px;
     background-image:url(images/top-left.png);
     float: left;
.top {
     height:23px;
     background-image: url(images/top.png);
     background-repeat:repeat-x;
     width: auto;
.topright {
     height:22px;
     width:28px;
     background-image:url(images/top-right.png);
     float: right;
.textarea{
.wrap{
     text-align: justify;
     padding-right: 40px;
     padding-left: 40px;
     background-repeat: repeat-y;
     float:left;
     background-image: url(images/main-left.png);
     width: auto;
     clear: left;
.wrapright {
     width:4px;
     background-image:url(images/main-right.png);
     background-repeat: repeat-y;
     float: right;
.bottomleft {
     height:22px;
     width:19px;
     background-image:url(images/bottom-left.png);
     float: left;
     clear: left;
.bottom {
     height:23px;
     background-image: url(images/bottom.png);
     background-repeat:repeat-x;
     width: auto;
.bottomright {
     height:22px;
     width:27px;
     background-image:url(images/bottom-right.png);
     float: right;

That's one of the problems with liquid (%) based layouts. In your default.css file, replace the top 2o selector rules with the following:
body {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #333;
    margin:0;
    padding:0;
    background: url(images/main-right.png) repeat-y;
.thrColLiqHdr #container {
    width: 95%;
   min-width: 870px; /**keep page from collapsing**/
    margin:0 auto;
    background: url(/images/halftone1.png);
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb
http://alt-web.blogspot.com

Need help with overlapping divs!

Hey everyone,
I'm working on another website and I have come up against a common problem for newbie designers from what I hear, the dreaded overlapping div problem! I have a 2 column fixed layout with a floating left div. My left div has my nav bar and various images. When my main content div has more content than the left floating div, the left div border does not reach the footer! Until now, I have gotten by with just hitting return in my left column div until it reaches the footer. I am sure it is not the right way to do it but it has worked so far. The problem is, now one of the pages has the left column div overlapping onto the footer! I did some reading and I am guessing it involves either the box properties or clear float which I am not too familiar with.
Any advice would be stellar! I know this is just another stumbling block to get over but I would feel so much better if I was doing it the right way.
Here are screens of my issue,
And here is my code for the page in question.
<!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=utf-8" />
<link rel="shortcut icon" href="http://www.xldesignsonline.com/fchi/favicon.ico">
<title>Full Circle Home Inspections</title>
<link href="_css/main.css" rel="stylesheet" type="text/css" />
<style type="text/css">

</style>
<script src="Scripts/swfobject_modified.js" type="text/javascript"></script>
</head>
<body class="twoColFixLtHdr">
<div id="container">
<div id="header">
    <h1>
</h1></div>
<div id="sidebar1">
    <h3 align="center">
      <object id="FlashID" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="200" height="620">
        <param name="movie" value="_assets/menu.swf" />
        <param name="quality" value="high" />
        <param name="wmode" value="opaque" />
        <param name="swfversion" value="6.0.65.0" />
        
        <param name="expressinstall" value="Scripts/expressInstall.swf" />
        
        
        <object type="application/x-shockwave-flash" data="_assets/menu.swf" width="200" height="620">
          
          <param name="quality" value="high" />
          <param name="wmode" value="opaque" />
          <param name="swfversion" value="6.0.65.0" />
          <param name="expressinstall" value="Scripts/expressInstall.swf" />
          
          <div>
            <h4>Content on this page requires a newer version of Adobe Flash Player.</h4>
            <p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" width="112" height="33" /></a></p>
          </div>
          
        </object>
        
      </object>
    </h3>
    <p align="center"> </p>
    <p align="center"> </p>
    <p align="center"><a href="http://www.nachi.org/"><img src="_images/interNACHI.png" alt="InterNACHI" width="190" height="164" border="0" /></a></p>
    <p align="center"> </p>
    <p align="center"> </p>
    <p align="center"><a href="http://www.nachi.org/education.htm"><img src="_images/education-seal-small.gif" alt="education seal" width="150" height="150" border="0" /></a></p>
    <p align="center"> </p>
    <p align="center"> </p>
    <p align="center"><a href="http://www.iac2.org/"><img src="_images/iac2-all.gif" width="174" height="126" alt="IAC" /></a></p>
    <p align="center"> </p>
    <p align="center"> </p>
    <p align="center"><a href="http://www.inspectopia.com/profile.b.507.r.16181.u.03bcfb.html"><img src="_images/logo_top.png" alt="Inspectopedia" width="190" height="45" border="0" /></a></p>
    <p align="center"> </p>
    <p align="center"> </p>
    <p align="center"><a href="http://www.energystar.gov/"><img src="_images/img_energy_star_partner.jpg" width="160" height="191" alt="Energy Star Partner" /></a></p>
    <p align="center"> </p>
    <p align="center"> </p>
    <p align="center"><a href="http://cjenterprises.myshaklee.com/us/en/welcome.html#"><img src="_images/Shaklee.gif" alt="Shaklee" width="119" height="160" border="0" /></a></p>
    <p align="center"> </p>
    <p align="center"> </p>
    <p align="center"><a href="http://activerain.com/"><img src="_images/ARLogoSmall.gif" alt="Active Rain" width="135" height="36" border="0" /></a></p>
    <p align="center"> </p>
    <p align="center"> </p>
    <p align="center"><a href="http://www.insiderpages.com/b/15246780294"><img src="_images/insider_pages.gif" alt="Insider Pages" width="89" height="37" border="0" /></a></p>
<p align="center"> </p>
    <p align="center"> </p>
    <p align="center"> </p>
    <p align="center"> </p>
    <p align="center"> </p>
    <p align="center"> </p>
    <p align="center"> </p>
    <p align="center"> </p>
    <p align="center"> </p>
    <p align="center"> </p>
    <p align="center"> </p>
    <p align="center"> </p>
    <p align="center"> </p>
    <p align="center"> </p>
    <p align="center"> </p>
    <p align="center"> </p>
    <p align="center"> </p>
    <p align="center"> </p>
    <p align="center"> </p>
    <p align="center"> </p>
    <p align="center"> </p>
    <p align="center"> </p>
    <p align="center"> </p>
    <p align="center"> </p>
    <p align="center"> </p>
    <p align="center"> </p>
    <p align="center"> </p>
    <p align="center"> </p>
    <p align="center"> </p>
    <p align="center"> </p>
</div>
<div id="mainContent">
    <h2>Radon Gas Inspection</h2>
    <div id="paragraphFloat">
      <h5>What Is Radon?</h5>
      <p> Radon is a cancer causing radioactive gas. You cannot see, smell or taste radon, but it may be a problem in your home. The Surgeon General has warned that radon is the second leading cause of lung cancer in the United States today. </p>
      <div id="apDiv1">
    <div align="center"><a href="http://www.epa.gov/radon/video/epa-epu.wmv"><img src="_images/psa_revised.jpg" alt="What Is Radon?" width="200" height="172" border="0" /></a></div></div></div>
    <p>If you smoke and your home has high radon levels, you're at high risk for developing lung cancer. Some scientific studies of radon exposure indicate that children may be more sensitive to radon. This may be due to their higher respiration rate and their rapidly dividing cells, which may be more vulnerable to radiation damage. </p>
<p> </p>
    <h5>Why Is It Dangerous?</h5>
<p> The U.S. Environmental Protection Agency (US EPA) and the Surgeon General's Office have estimated that as many as 20,000 lung cancer deaths are caused each year by radon. Radon is the second leading cause of lung cancer. Radon-induced lung cancer costs the United States over $2 billion dollars per year in both direct and indirect health care costs.</p>
<p>According to the US EPA, nearly 1 in 3 homes checked in seven states and on three Indian lands had screening levels over 4 pCi/L, the EPA's recommended action level for radon exposure.</p>
<p>The alpha radiation emitted by radon is the same alpha radiation emitted by other alpha generating radiation sources such as plutonium.</p>
<p>A family whose home has radon levels of 4 pCi/l is exposed to approximately 35 times as much radiation as the Nuclear Regulatory Commission would allow if that family was standing next to the fence of a radioactive waste site. (25 mrem limit, 800 mrem exposure)</p>
<p> At the 4 pCi/l EPA action guideline level, radon carries approximately 1000 times the risk of death as any other EPA carcinogen. It is important to note that the action level is not a safe level, as there are no "safe" levels of radon gas.</p>
<p> </p>
<h5>How Does It Get Into My Home?</h5>
<p> Radon is a radioactive gas. It comes from the natural decay of uranium that is found in nearly all soils. It typically moves up through the ground to the air above and into your home through cracks and other holes in the foundation. Your home traps radon inside, where it can build up. Any home may have a radon problem. This means new and old homes, well-sealed and drafty homes, and homes with or without basements.</p>
<p> Radon from soil gas is the main cause of radon problems. Sometimes radon enters the home through well water. In a small number of homes, the building materials can give off radon, too. However, building materials rarely cause radon problems by themselves.</p>
<p><strong>Radon gets in through:</strong></p>
<ul>
<li>Cracks in solid floors
    <div id="apDiv3">
      <div align="center"><a href="http://www.fullcirclehomeinspections.com/_assets/CitizensGuideRadon.pdf"><img src="_images/citguidecoverradon.jpg" alt="Guide To Radon" width="154" height="200" border="0" /></a></div>
    </div>
</li>
<li>Construction joints</li>
<li>Cracks in walls</li>
<li>Gaps in suspended floors</li>
<li>Gaps around service pipes</li>
<li>Cavities inside walls</li>
<li>Surrounding water supply</li>
</ul>
<p> </p>
<h5>What Can I Do?</h5>
<p> Radon is a national environmental health problem. Elevated radon levels have been discovered in every state. The US EPA estimates that as many as 8 million homes throughout the country have elevated levels of radon. Current state surveys show that 1 home in 5 has elevated radon levels.</p>
<p> Testing is the only way to know your home's radon levels. There are no immediate symptoms that will alert you to the presence of radon. It typically takes years of exposure before any problems surface. </p>
<p>Let <strong>Full Circle Home Inspections</strong> ensure your family and your home are protected and safe from radon exposure!</p>
<p> </p>
<h5>Radon Myths</h5>
<p><strong><em>MYTH:</em> Scientists are not sure that radon really is a problem.</strong></p>
<blockquote>
<p><strong><em>FACT:</em></strong> Although some scientists dispute the precise number of deaths due to radon, all the major health organizations (like the Centers for Disease Control and Prevention, the American Lung Association and the American Medical Association) agree with estimates that radon causes thousands of preventable lung cancer deaths every year. This is especially true among smokers, since the risk to smokers is much greater than to non-smokers.</p>
</blockquote>
<p><strong><em>MYTH:</em> Radon testing is difficult, time-consuming and expensive.</strong></p>
<blockquote>
<p><strong><em>FACT:</em></strong> Radon testing is easy. You can test your home yourself or hire a qualified radon test company. Either approach takes only a small amount of time and effort.</p>
</blockquote>
<p><strong><em>MYTH:</em> Homes with radon problems can't be fixed.</strong></p>
<blockquote>
<p><strong><em>FACT:</em></strong> There are simple solutions to radon problems in homes. Hundreds of thousands of homeowners have already fixed radon problems in their homes. Most homes can be fixed for about the same cost as other common home repairs; check with one or more qualified mitigators. Call your <a href="http://www.epa.gov/radon/whereyoulive.html">state radon office</a> for help in identifying qualified mitigation contractors.</p>
</blockquote>
<p><strong><em>MYTH:</em> Radon affects only certain kinds of homes.</strong></p>
<blockquote>
<p><strong><em>FACT: </em></strong>House construction can affect radon levels. However, radon can be a problem in homes of all types: old homes, new homes, drafty homes, insulated homes, homes with basements, and homes without basements. Local geology, construction materials, and how the home was built are among the factors that can affect radon levels in homes.</p>
</blockquote>
<p><strong><em>MYTH:</em> Radon is only a problem in certain parts of the country.</strong></p>
<blockquote>
<p><strong><em>FACT:</em></strong> High radon levels have been found in every state. Radon problems do vary from area to area, but the only way to know your radon level is to test.</p>
</blockquote>
<p><strong><em>MYTH:</em> A neighbor's test result is a good indication of whether your home has a problem.</strong></p>
<blockquote>
<p><strong><em>FACT:</em></strong> It's not. Radon levels can vary greatly from home to home. The only way to know if your home has a radon problem is to test it.</p>
</blockquote>
<p><strong><em>MYTH:</em> Everyone should test their water for radon.</strong></p>
<blockquote>
<p><strong><em>FACT:</em></strong> Although radon gets into some homes through water, it is important to first test the air in the home for radon. If your water comes from a public water supply that uses ground water, call your water supplier. If high radon levels are found and the home has a private well, call the Safe Drinking Water Hotline at 1-800-426-4791 for information on testing your water.</p>
</blockquote>
<p><strong><em>MYTH:</em> It's difficult to sell homes where radon problems have been discovered.</strong></p>
<blockquote>
<p><strong><em>FACT:</em></strong> Where radon problems have been fixed, home sales have not been blocked or frustrated. The added protection is some times a good selling point.</p>
</blockquote>
<p><strong><em>MYTH:</em> I've lived in my home for so long, it doesn't make sense to take action now.</strong></p>
<blockquote>
<p><strong><em>FACT: </em></strong>You will reduce your risk of lung cancer when you reduce radon levels, even if you've lived with a radon problem for a long time.</p>
</blockquote>
<p><strong><em>MYTH:</em> Short-term tests can't be used for making a decision about whether to fix your home.</strong></p>
<blockquote>
<p><strong><em>FACT:</em> </strong>A short-term test, followed by a second short-term test* can be used to decide whether to fix your home. However, the closer the average of your two short-term tests is to 4 pCi/L, the less certain you can be about whether your year-round average is above or below that level. Keep in mind that radon levels below 4 pCi/L still pose some risk. Radon levels can be reduced in most homes to 2 pCi/L or below.</p>
<p> </p>
<p> </p>
<p> </p>
<p align="center"><img src="_images/CA-3.jpg" width="520" height="207" /></p>
</blockquote>
</div>
<div id="footer">
    <p align="center"><strong>© 2009 XL Designs Online - All Rights Reserved </strong></p>
</div>
</div>
<script type="text/javascript">

</script>
</body>
</html>
And here is my CSS if needed,
@charset "utf-8";
body {
     font: 100% Verdana, Arial, Helvetica, sans-serif;
     background: #666666;
     margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
     padding: 0;
     text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
     color: #000000;
.twoColFixLtHdr #container {
     width: 950px; /* the auto margins (in conjunction with a width) center the page */
     border: 1px solid #000000;
     text-align: left; /* this overrides the text-align: center on the body element. */
     margin-top: 20px;
     margin-right: auto;
     margin-bottom: 20px;
     margin-left: auto;
     background-color: #557050;
.twoColFixLtHdr #header {
     border-bottom: 1px solid #000000;
     height: 250px;
     background-color: #DDDDDD;
     padding-top: 0;
     padding-right: 10px;
     padding-bottom: 0;
     padding-left: 20px;
     background-image: url(../_images/homebanner1.png);
.twoColFixLtHdr #header h1 {
     margin: 0; /* zeroing the margin of the last element in the #header div will avoid margin collapse - an unexplainable space between divs. If the div has a border around it, this is not necessary as that also avoids the margin collapse */
     padding: 20px 0; /* using padding instead of margin will allow you to keep the element away from the edges of the div */
     text-align: center;
     font-size: 48px;
     font-family: Tahoma, Geneva, sans-serif;
     color: #000;
.twoColFixLtHdr #sidebar1 {
     float: left; /* since this element is floated, a width must be given */
     width: 200px;
     border-right: 1px solid #000000;
     background-color: #557050;
     padding-top: 0px;
     padding-right: 10px;
     padding-bottom: 15px;
     padding-left: 10px;
.twoColFixLtHdr #mainContent {
     margin-top: 0;
     margin-right: 0;
     margin-bottom: 0;
     margin-left: 250px;
     padding-top: 0;
     padding-right: 20px;
     padding-bottom: 0;
     padding-left: 20px;
     text-align: left;
.twoColFixLtHdr #mainContent h1 {
     font-size: 48px;
     font-family: "Arial Rounded MT Bold";
     font-weight: bold;
.twoColFixLtHdr #mainContent h2 {
     font-family: "Arial Rounded MT Bold";
     font-size: 32px;
.twoColFixLtHdr #mainContent h3 {
     font-family: Georgia, "Times New Roman", Times, serif;
     font-style: italic;
     color: #CF0;
     font-size: 125%;
.twoColFixLtHdr #mainContent h5 {
     font-size: 120%;
.twoColFixLtHdr #footer {
     padding: 20px 10px 20px 20px;
     border-top: 1px solid #000000;
     background-color: #A3A3A3;
     font-family: Arial, Helvetica, sans-serif;
.twoColFixLtHdr #footer p {
     margin: 0; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse - a space between divs */
     padding: 10px 0; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */
.fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
     float: right;
     margin-left: 8px;
.fltlft { /* this class can be used to float an element left in your page */
     float: left;
     margin-right: 8px;
.clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */
     clear:both;
    height:0;
    font-size: 1px;
    line-height: 0px;
#paragraphFloat {
     width: 350px;
#paragraphFloat2 {
     width: 350px;
Please if anyone knows what I'm doing wrong please please let me know! Since I am learning, I really want to get main concepts like this down so I am not constantly doing things the hard way! Thank you!
Jayson

1) Regarding validation, what does it do?
It validates by telling you where your code isn't er... valid. Sometimes the results are a bit jumbled but if you work through them one at a time and revalidate, it's a good way to learn. If you fix all of the errors shown up through the validator you should end up with standards compliant code. Not necessarily the best, most efficient code you can write but at least it will be valid and it helps you spot errors that hours of code-staring never seems to find.
I don't use the DW validation tool because I find the W3c one easier.
The W3c validator has a check box of HTML Tidy which can tidy up your code but it's not always as easy to see what changes.
2) I know the <p> tag for spacing is wrong, I could just feel it in my bones. I just didn't know what else to do. If I <br> all the way down won't the code be just as cluttered?
You're obviously a born web coder!
<br> will bloat your page if you use them to position elements.
Here you need to get used to a) the Block Model and b) CSS positioning. Once you crack these, CSS opens up for you and becomes a little more intuitive.
if you have two elements on top of each other rather than push them apart with other elements you do it with padding and/or margin. There are things to watch out for here namely, collapsing margins but if you start to read up on the above, you'll get it.
I just thought of something. If I add a div in main content, align it to the bottom center with CSS, use a line break between it and the text above, and add the image in question in the new div, will the spacing between the text and image work itself out? I just really want to get out of the <p> bad habit.
Keep thinking! Web design is not like desktop publishing or print. Elements on a HTML page don't behave like paragraphs on a page. Once you begin to figure out why not it all gets a little easier.
If you want an image at the bottom an element you put that at the end of the content in that element. Then you need to ensure there is no margin, padding or border between the img element and the next element (your footer). HTML elements come with some styling that is applied by default in the browser. Many web developers include a rule like this:
body {
margin: 0;
padding:0;
This sets the margin and padding to zero of course and it's purpose is to override the defaults. Some people advocate applying similar rules to all elements and if your interested try googling Eric Meyer who has written about it online.
One of the key purposes of CSS is to take styling out of the page. It's leaner, more efficient for the viewer and the coder and helps with site management.
3) AP divs are weird, and I did only use as a last resort.
See? You're a natural!
The reason is I am confused by the float and clear float classes. My left column is floated left and that element is what I was having problems understanding. I tried to make new divs and float right but I screwed it all up. I am sure I am just not applying the clear float in the right places.
Getting the hang of floating is key to CSS positioning. You use a float if you want two elements to sit side by side on the page. It disrupts the "document flow." Ordinarily HTML elements are rendered one after the other, on top of each other. Floating an element takes it out of the document flow and allows other elements to occupy its space. When you float an element it should always have a width. If the element below it also has a width, that width has to be sufficiently narrow to allow it to occupy the space. In short, floated elements can't be wider than their containing element.
The clear property is used after a float to stop an element occupying the space left by a floated element. It works but confuses the heck out of me!
So that leads me to my final point. I am a novice too! I might have fluffed a few of the technical points above but it's pretty much there.
Regards
Martin

Bullets not spaced correctly next to floated div

This page displays the issue I'm having (see the second set of bullets on the bottom right side of the page):
http://kwikturnmachine.com/machining-capabilities.html
The image to the left is inserted into a div tag. Here is the style for the div:
#wrapper #content-wrapper #content-middle #content-bg-gradient #img-holder-flt-left {
    margin: 10px;
    padding: 0px;
    float: left;
    clear: both;
Anyone know why the top set of bullets indents just fine but the bottom set is right on the edge of the inserted image? How can I fix the second set of bullets so that they appear indented the same as the first set?
Thanks!
Aaron

Please see the validation errors here -
http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fkwikturnmachine.com%2Fmachining-c apabilities.html
Most of these can be solved by using DW's FILE | Convert > XHTML1.0 Transitional (these errors are a mismatch between perhaps legacy code on the page and the XHTML doctype - that will be fixed by doing this conversion).
The ones that concern me, though, are the reused ID values. An ID must be unique on a given page. Can you fix those, please before pushing ahead with your bullet issue? I'm guessing you could just convert navimage to a class instead of an ID.

Should I use a Div instead of a UL?

I have used three unordered-lists for my navbar. On
validation it suggests I should'nt have the opening UL as a
"wrapper". Should I make the wrapper a div instead? or is it ok to
have a UL as a wrapper with other UL's inside it?
<ul id="wrapper">
<ul id="threebarmenu">
<li class="firstlinespace">line one</li>
<li class="secondlinespace">line two</li>
<li class="thirdlinespace">line three </li>
</ul>
<ul id="leftnav">
<li></li>
<li class="leftnavCrouton">leftnavCrouton</li>
</ul>
<br style="clear: both;">
</ul>
Or... Could I just keep the UL's have lay them out like this?
<ul id="threebarmenu">
<li class="firstlinespace">line one</li>
<li class="secondlinespace">line two</li>
<li class="thirdlinespace">line three </li>
</ul>
<ul id="navigation">
<ul id="leftnav">
<li></li>
<li class="leftnavCrouton">leftnavCrouton</li>
</ul>
<br style="clear: both;">
</ul>

SEMANTIC, not scematic.
> <ul id="wrapper">
> <ul id="threebarmenu">
You cannot nest <ul> tags like this. That's the cause
of the problem.
I don't like your approach to this at all. You are making it
MUCH too
complex.
Why do you have includes within lists again?
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.dreamweavermx-templates.com
- Template Triage!
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
http://www.macromedia.com/support/search/
- Macromedia (MM) Technotes
==================
"~Billy~" <[email protected]> wrote in
message
news:fap3hb$ojh$[email protected]..
> The include file is my main tab menu.
>
> I have removed the opening and closing ul statements and
replaced them
> with a
> Div wrapper because I think I shouldnt have used a
scematic element (ul)
> for a
> wrapper, instead I have used a scematically neutral div.
>
> Before I had -
>
> <ul id="wrapper">
> <ul id="threebarmenu">
> <li class="firstlinespace">line one</li>
> <li class="secondlinespace">line two</li>
> <li class="thirdlinespace">line three </li>
>
> <ul id="leftnav">
>
</li>
> <li
class="leftnavCrouton">leftnavCrouton</li>
>
> <br style="clear: both;">
>
>
> I now have -
>
> <div id="wrapper">
> <ul id="threebarmenu">
> <li class="firstlinespace">line one</li>
> <li class="secondlinespace">line two</li>
> <li class="thirdlinespace">line three </li>
>
> <ul id="leftnav">
>
</li>
> <li
class="leftnavCrouton">leftnavCrouton</li>
>
> <br style="clear: both;">
> </div>
>
>
>

How do I overlap text in a Div Tag over an Image

Hi,
I have a large image which I would like to set as as border around the page.
Please see www.touchw1.com, it is the grey border with the 3 archways on it that I would like as a border. At present, everything on this screen apart from the contact details at the bottom are saved as one JPEG. I saved it like this as I don't know how to set that border as a border and then insert other div tags over, or in it? Can anyone help??
Thanks

Create a 'wrapper" and 'footer1' <div>
<div id="wrapper">
</div>
<div id="footer1">
</div>
Create some css:
#wrapper {
border: 1px solid #333;
border-bottom: none;
width: XXXpx /* width you require */
margin: 0 auto; /* centers wrapper horizontally in browser window */
#footer1 {
background-image: url(archway.gif); /*archway image plus borders */
background-repeat: no-repeat;
height: XXpx /* height of background archway image */
width: XXXpx /* width you require */
margin: 0 auto; /* centers footer1 horizontally in browser window */
Then start adding content to the 'wrapper' <div>. Insert your logo into a <h1> header.
<div id="wrapper">
<h1><img src="images/logo.jpg" width="XXX" height="XXX" alt="TouchW1 Sales and Press Agency - Central London" /></h1>
<p>TouchW1 is a newly created niche agency that specialises in all aspects of sales management, press and licensing, based in the heart of Central London</p>
</div>
<div id="footer1"></div>
Move h1 header into position in the 'wrapper" <div> with css:
h1 {
margin: XXpx XXpx XXpx XXpx; /* top, right, bottom, left */
padding: XXpx XXpx XXpx XXpx;
Do the same with the paragraph tag
#wrapper p {
margin: XXpx XXpx XXpx XXpx; /* top, right, bottom, left */
padding: XXpx XXpx XXpx XXpx;
Add rose as background to 'wrapper' <div>
#wrapper {
border: 1px solid #333;
border-bottom: none;
width: XXXpx /* width you require */
margin: 0 auto; /* centers wrapper horizontally in browser window */
background-image: url(rose.jpg);
background-position: top right;
background-repeat: no-repeat;
Hummm that its really....add a 'footer2' <div> for the address line

CS6 div layout issue

http://www.lestock.ca/index.html
I am having a problem with the layouts of the divs here.
As the page loads, the curved border placed around the container appears to load as a small oval, then proceeds to load correctly but there is a small space in the top corner.
I found it necessary to place <p> tags at the end of the side bar and the container in order for the page to maintain its full content.
Thanks
Message was edited by: Pat Krushen
CSS style sheet
@charset "utf-8";
/* CSS Document */
body {
font: 100% Verdana, Arial, Helvetica, sans-serif;
margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
padding: 0;
text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
color: #000000;
background-repeat: no-repeat;
background-color: #FFF;
background-position: 0px;
top: 0px;
background-attachment: fixed;
background-image: url();
.twoColLiqLtHdr #container {
width: 80%;
text-align: left; /* this overrides the text-align: center on the body element. */
overflow: visible;
background-color: #FFFFFF;
border: thin solid #060;
border-radius: 50px;
margin-right: auto;
margin-left: auto;
padding-top: 10px;
padding-right: 15px;
padding-bottom: 10px;
padding-left: 15px;
.twoColLiqLtHdr #header {
background-image: url(greencorner2.jpg);
background-repeat: no-repeat;
font-size: 90%;
background-color: #FFF;
width: 100%;
padding-top: 0;
padding-right: 0px;
padding-bottom: 0;
padding-left: 0px;
.twoColLiqLtHdr #header h1 {
margin: 0; /* zeroing the margin of the last element in the #header div will avoid margin collapse - an unexplainable space between divs. If the div has a border around it, this is not necessary as that also avoids the margin collapse */
padding: 10px 0; /* using padding instead of margin will allow you to keep the element away from the edges of the div */
/* Tips for sidebar1:
1. since we are working in percentages, it's best not to use padding on the sidebar. It will be added to the width for standards compliant browsers creating an unknown actual width.
2. Space between the side of the div and the elements within it can be created by placing a left and right margin on those elements as seen in the ".twoColLiqLtHdr #sidebar1 p" rule.
3. Since Explorer calculates widths after the parent element is rendered, you may occasionally run into unexplained bugs with percentage-based columns. If you need more predictable results, you may choose to change to pixel sized columns.
.twoColLiqLtHdr #sidebar1 {
float: left;
width: 22%; /* top and bottom padding create visual space within this div */
background-color: #FFF;
margin-left: 15px;
background-repeat: no-repeat;
border-right-width: medium;
border-right-style: outset;
border-right-color: #060;
/* Tips for mainContent:
1. the space between the mainContent and sidebar1 is created with the left margin on the mainContent div. No matter how much content the sidebar1 div contains, the column space will remain. You can remove this left margin if you want the #mainContent div's text to fill the #sidebar1 space when the content in #sidebar1 ends.
2. to avoid float drop at a supported minimum 800 x 600 resolution, elements within the mainContent div should be 430px or smaller (this includes images).
3. in the Internet Explorer Conditional Comment below, the zoom property is used to give the mainContent "hasLayout." This avoids several IE-specific bugs.
.twoColLiqLtHdr #mainContent {
margin-top: 0;
margin-bottom: 0;
text-align: left;
float: left;
width: 23%;
margin-left: 20px;
.twoColLiqLtHdr #footer {
background-color: #060;
font-family: Verdana, Geneva, sans-serif;
font-size: x-small;
color: #FFF;
text-align: center;
margin: 0px;
padding-top: 0;
padding-right: 10px;
padding-bottom: 0;
padding-left: 10px;
border-top-width: thin;
border-right-width: thin;
border-bottom-width: thin;
border-left-width: thin;
border-top-color: #090;
border-right-color: #090;
border-bottom-color: #090;
border-left-color: #090;
border-radius: 10px;
.twoColLiqLtHdr #footer p {
margin: 0; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse - a space between divs */
padding: 10px 0;
/* Miscellaneous classes for reuse */
.fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
float: right;
margin-left: 8px;
.fltlft { /* this class can be used to float an element left in your page */
float: left;
margin-right: 8px;
.clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */
clear:both;
    height:0;
    font-size: 1px;
    line-height: 0px;
.menudiv {
float: left;
width: 50%;
#menudiv2 {
float: left;
width: 60%;
margin-left: 10%;
padding: 10px;
margin-right: 28%;
.fltrtintroduction {
float: right;
width: 66%;
padding-left: 15px;
font-weight: normal;
color: #333333;
#weatherdiv {
float: right;
width: 200px;
.twoColLiqLtHdr #container #header #slideshow {
float: right;
width: 70%;
margin-left: 35px;
a:link {
color: #090;
text-decoration: none;
a:visited {
color: #FC0;
text-decoration: none;
a:hover {
color: #333;
text-decoration: underline;
a:active {
color: #8E9AB0;
text-decoration: none;
#updatetable {
float: left;
width: 60%;
margin-left: 30px;
background-color: #FFF;
#updatetable table tr {
#updatetable table tr td strong {
color: #FFF;
</style>
.lightfont { font-family: Verdana, Geneva, sans-serif;
font-weight: normal;
#logo {
float: left;
width: 24%;
.current.current {
background-color: #090;
.green {
font-weight: bold;
color: #060;
Message was edited by: Pat Krushen

Replace all of the below - from your fax number to the closing </html> tag with the code marked in red
Fax: (306) 274–2110 </span>
</p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</div>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p><br />
</p>
<p> </p>

<h1> </h1>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</div>
<script type="text/javascript">

</script>
</body>
</html>
Fax: (306) 274–2110 </span>
</p>
</div>
<br style="clear: both;" />
</div>
<script type="text/javascript">

</script>
</body>
</html>

Need help-confused on top margin space with div in sidebar div

Hello,
I have tried for hours to figure out what is affecting the margin of the top right div #first_ad which is contained in #sidebar2. Right now I have that div first nav with 10px top that looks like 30 in IE7 and 40px in iIE8 (chrome, firefox are fine). I have tried 0 margin on p and h tags and other things to lord only knows what else. I just cannot see what is affecting this.
If I could understand this it would be of great help as I seem to run into this alot with placing a div in a sidebar. I start out by using the dreamweaver templates in cs4 as my base.
Here is the link to the page.
http://www.hanovertypocraft.ca/test2/index3.html
Thank you for any assistance you may give me!!
below is the css
@charset "UTF-8";
body {
margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
padding: 0;
text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
color: #FFF;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 100%;
background-color: #000;
background-image: url(../images/hantypbg2.jpg);
background-repeat: no-repeat;
.thrColFixHdr #container {
width: 900px;
text-align: left; /* this overrides the text-align: center on the body element. */
margin-top: 50px;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
background-image: url(../images/container_bkgd.png);
background-repeat: no-repeat;
.thrColFixHdr #header {
padding: 0;
height: 110px;
margin: 0px;
clear: none;
float: left;
width: 740px;
.thrColFixHdr #header h1 {
margin: 0; /* zeroing the margin of the last element in the #header div will avoid margin collapse - an unexplainable space between divs. If the div has a border around it, this is not necessary as that also avoids the margin collapse */
padding: 10px 0; /* using padding instead of margin will allow you to keep the element away from the edges of the div */
.thrColFixHdr #sidebar1 {
float: left; /* since this element is floated, a width must be given */
width: 165px; /* padding keeps the content of the div away from the edges */
display: inline;
.thrColFixHdr #container #sidebar1 p {
margin: 0px;
padding: 0px;
#header #head_logo_text {
height: 110px;
width: 355px;
margin-top: 0px;
margin-bottom: 0px;
margin-left: 225px;
color: #FFF;
font-size: 18px;
font-family: Arial, Helvetica, sans-serif;
font-weight: normal;
clear: none;
float: left;
margin-right: 0px;
padding: 0px;
#header #head_logo_text a {
color: #FFF;
#header #head_logo_text p {
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
line-height: 21px;
margin: 0px;
padding: 0px;
.thrColFixHdr #container #header img {
margin: 0px;
padding: 0px;
#nav_home {
width: 135px;
padding: 0px;
margin-right: 15px;
margin-bottom: 0px;
margin-left: 15px;
height: 320px;
margin-top: 10px;
.thrColFixHdr #sidebar2 {
float: right; /* since this element is floated, a width must be given */
width: 140px; /* padding keeps the content of the div away from the edges */
margin-right: 10px;
padding: 0px;
margin-top: 0px;
margin-bottom: 0px;
margin-left: 0px;
background-color: #00F;
.thrColFixHdr #container #sidebar2 h1 {
margin: 0px;
padding: 0px;
.thrColFixHdr #container #sidebar2 p img {
margin: 0px;
padding: 0px;
.thrColFixHdr #container #sidebar2 p {
margin: 0px;
padding: 0px;
#mainContent {
margin-top: 10px;
margin-right: 160px;
margin-bottom: 0;
margin-left: 175px;
padding-top: 0;
padding-right: 10px;
padding-bottom: 0;
padding-left: 10px;
#mainContent p {
font-family: Arial, Helvetica, sans-serif;
text-align: center;
font-weight: normal;
font-size: 16px;
line-height: 20px;
margin: 0px;
padding: 0px;
#mainContent #flash_div {
width: 353px;
margin-right: auto;
margin-left: auto;
border: 3px solid #000;
height: 265px;
overflow: hidden;
.fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
float: right;
margin-left: 8px;
.fltlft { /* this class can be used to float an element left in your page */
float: left;
margin-right: 8px;
.clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */
clear:both;
    height:0;
    font-size: 1px;
    line-height: 0px;
#sidebar2 #first_ad {
height: 140px;
margin-top: 10px;
margin-bottom: 10px;
border: 1px solid #000;
#sidebar2 #second_ad {
height: 140px;
margin-top: 10px;
margin-bottom: 10px;
border: 1px solid #000;
#sidebar2 #third_ad {
height: 140px;
margin-top: 10px;
margin-bottom: 10px;
border: 1px solid #000;
#sidebar2 #fourth_ad {
height: 140px;
margin-top: 10px;
margin-bottom: 10px;
border: 1px solid #000;

Thank you.
I am relatively new at this and you guided me to google the patch and how to overrice it using - padding 10px !important; on my css which let me override the fixes padding.
I was under the misconception that the IE fix being in grey was only for information not actually pertinent.
Again thanks and I will try to research more regarding the implimentation of these patches

div not extending full width

I have a basic page built on the standard twoColFixLtHdr template that comes with CS4. Have created a new div #welcome that should extend across the whole width of the mainContent div, and the math adds up and the view layout guides shows everything in place. When you use Design Live View or a browser, there is a 20px white space at the right end of the #welcome block. I have just included the basic definitions below as I am sure this is something simple that my limited experience is not seeing. Thanks in advance for any/all advice or suggestions.
.twoColFixLtHdr #container {
width: 760px; /* using 20px less than a full 800px width allows for browser chrome and avoids a horizontal scroll bar */
background: #FFFFFF;
margin: 0 auto;
text-align: left; /* this overrides the text-align: center on the body element. */
.twoColFixLtHdr #sidebar1 {
float: left; /* since this element is floated, a width must be given */
width: 200px; /* the actual width of this div, in standards-compliant browsers, or standards mode in Internet Explorer will include the padding and border in addition to the width */
background-image: url(../Images/sidebar-graphic-bkgrnd.gif);
background-repeat: repeat-y;
/* the background color will be displayed for the length of the content in the column, but no further */
padding: 0;
position: relative;
top: 0px;
left: 0px;
*in the Spry Vertical Menubar.CSS I have added a 2px border around each menu item and sub item giving me a total of 204px width for the sidebar}
.twoColFixLtHdr #mainContent {
margin: 0 0 0 204px; /* the left margin on this div element creates the column down the left side of the page - no matter how much content the sidebar1 div contains, the column space will remain. You can remove this margin if you want the #mainContent div's text to fill the #sidebar1 space when the content in #sidebar1 ends. */
padding: 0; /* remember that padding is the space inside the div box and margin is the space outside the div box */
                position: relative;
                top: 0;
                left: 0;
.twoColFixLtHdr #container #mainContent #welcome {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #FFF;
width: 556px;
position: relative;
left: 0;
top: 0px;
background-image: url(../Images/welcome-graphic-bkgrnd.gif);
background-repeat: repeat-y;
float: left;

By the way I just used the same css as yours and it is working fine for me:
Following are the styles that I testerd for the said template:
body {
     font: 100% Verdana, Arial, Helvetica, sans-serif;
     background: #666666;
     margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
     padding: 0;
     text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
     color: #000000;
.twoColFixLtHdr #container {
width: 760px; /* using 20px less than a full 800px width allows for browser chrome and avoids a horizontal scroll bar */
background: #FFFFFF;
margin: 0 auto;
text-align: left; /* this overrides the text-align: center on the body element. */
.twoColFixLtHdr #header {
     background: #DDDDDD;
     padding: 0 10px 0 20px; /* this padding matches the left alignment of the elements in the divs that appear beneath it. If an image is used in the #header instead of text, you may want to remove the padding. */
.twoColFixLtHdr #header h1 {
     margin: 0; /* zeroing the margin of the last element in the #header div will avoid margin collapse - an unexplainable space between divs. If the div has a border around it, this is not necessary as that also avoids the margin collapse */
     padding: 10px 0; /* using padding instead of margin will allow you to keep the element away from the edges of the div */
.twoColFixLtHdr #sidebar1 {
float: left; /* since this element is floated, a width must be given */
width: 200px; /* the actual width of this div, in standards-compliant browsers, or standards mode in Internet Explorer will include the padding and border in addition to the width */
background-image: url(../Images/sidebar-graphic-bkgrnd.gif);
background-repeat: repeat-y;
/* the background color will be displayed for the length of the content in the column, but no further */
padding: 0;
position: relative;
top: 0px;
left: 0px;
/*in the Spry Vertical Menubar.CSS I have added a 2px border around each menu item and sub item giving me a total of 204px width for the sidebar*/}
.twoColFixLtHdr #mainContent {
margin: 0 0 0 204px; /* the left margin on this div element creates the column down the left side of the page - no matter how much content the sidebar1 div contains, the column space will remain. You can remove this margin if you want the #mainContent div's text to fill the #sidebar1 space when the content in #sidebar1 ends. */
padding: 0; /* remember that padding is the space inside the div box and margin is the space outside the div box */
position: relative;
top: 0;
left: 0;
.twoColFixLtHdr #container #mainContent #welcome {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #FFF;
width: 556px;
position: relative;
left: 0;
top: 0px;
background-image: url(../Images/welcome-graphic-bkgrnd.gif);
background-color:#330099;/*used this to see the div properly*/
background-repeat: repeat-y;
float: left;
Are your all the styles same as this?
Regards,
Vinay

Help! Divs extend beyond parent container! Clearing doesn't seem to work!

My "mainContent" div extends beyond the "Container" div. It seems that I've tried everything--clearing doesn't seem to work.
Help!
Here is my css:
@charset "UTF-8";
/* CSS Document */
body {
     margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
     padding: 0;
     text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
     color: #000000;
     font-family: Arial, Helvetica, sans-serif;
     font-size: 100%;
     background-color: #FFF;
.twoColFixRtHdr #container {
     width: 960px; /* using 20px less than a full 800px width allows for browser chrome and avoids a horizontal scroll bar */
     background: #FFFFFF;
     text-align: left; /* this overrides the text-align: center on the body element. */
     font-family: Arial, Helvetica, sans-serif;
     margin-top: 0;
     margin-right: auto;
     margin-bottom: 0;
     margin-left: auto;
     top: 10px;
     padding-top: 10px;
     clear: both;
.twoColFixRtHdr #header {
     height: 180px;
     padding-top: 10px;
     padding-right: 0px;
     padding-bottom: 5px;
     padding-left: 0px;
     border-top-width: 1px;
     border-right-width: 0px;
     border-bottom-width: 5px;
     border-left-width: 0px;
     border-top-style: solid;
     border-bottom-style: solid;
     border-top-color: #999;
     border-bottom-color: #000;
     margin-top: 5px;
     margin-bottom: 0px;
.twoColFixRtHdr #container #sidebar1 img {
     padding-top: 10px;
     border-bottom-width: 1px;
     border-bottom-style: solid;
     border-bottom-color: #999;
     margin-bottom: 0px;
     padding-bottom: 10px;
     padding-left: 10px;
.twoColFixRtHdr #header h1 {
     margin: 0; /* zeroing the margin of the last element in the #header div will avoid margin collapse - an unexplainable space between divs. If the div has a border around it, this is not necessary as that also avoids the margin collapse */
     padding: 10px 0; /* using padding instead of margin will allow you to keep the element away from the edges of the div */
.twoColFixRtHdr #sidebar1 {
     width: 315px;
     padding: 0px;
     top: 200px;
     float: right;
.twoColFixRtHdr #mainContent {
     width: 643px;
     padding-top: 10px;
     border-right-width: 1px;
     border-right-style: solid;
     border-right-color: #999;
     overflow: hidden;
     top: 230px;
     position: absolute;
     clear: right;
.twoColFixRtHdr #footer {
     background:#DDDDDD;
     top: 50px;
     clear: both;
     padding-top: 0;
     padding-right: 10px;
     padding-bottom: 0;
     padding-left: 20px;
.twoColFixRtHdr #footer p {
     margin: 0; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse - a space between divs */
     padding: 10px 0; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */
.fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
     float: right;
     margin-left: 8px;
.fltlft { /* this class can be used to float an element left in your page */
     float: left;
     margin-right: 8px;
.clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */
     clear:both;
     height:0;
     font-size: 0px;
     line-height: 0px;
.spacer {
     clear: both;
.twoColFixRtHdr #container #mainContent #article_main_head {
     font-family: Arial, Helvetica, sans-serif;
     top: 10px;
     width: 635px;
     float: left;
.twoColFixRtHdr #container #mainContent #article_img {
     width: 630px;
     float: left;
     margin-top: 10px;
     clear: both;
.twoColFixRtHdr #container #mainContent #article_main_txt {
     float: right;
     width: 450px;
     clear: both;
     padding-top: 10px;
     height: 500px;
.twoColFixRtHdr #container #mainContent #article_main_pq {
     clear: both;
     float: left;
     width: 180px;
     margin-top: 100px;
Here is my html:
                                                       Donec eu mi sed turpis feugiat feugiat. Integer turpis arcu, pellentesque eget, cursus et, fermentum ut, sapien. Fusce metus mi, eleifend sollicitudin, molestie id, varius et, nibh. Donec nec libero.
Loading news. please wait...
Loading news. please wait...
Loading news. please wait...
    Footer

This CSS sends up a red flag:
.twoColFixRtHdr #mainContent {
     width: 643px;
     padding-top: 10px;
     border-right-width: 1px;
     border-right-style: solid;
     border-right-color: #999;
     overflow: hidden;
/******DELETE THE FOLLOWING*****/
     top: 230px;
   position: absolute;
     clear: right;
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb

Div jumps down in IE

Wondering why this page views properly in FF when browser
window is made smaller, but in IE div named "contentnews" jumps
below design? Pulling my hair out over this one... Thanks!
http://www.paddocksinc.com/newsletter.html

here is what I see;
When I resize my windows your div position itself properly
when the size
becomes big enough to fit everything.
Maybe this bit of information could point you in the right
direction. Or
you already knew that.
aka Frenchy ASP
"da" <[email protected]> wrote in message
news:gea4di$j8o$[email protected]..
>> Well I think the container is already wider than the
div within
>
> It isn't. That's why you see what you see in IE. You
have your wrapper
> DIVS set to percentage widths. The table, given the
content within, it
> going to have a minimum width which is wider than the
wrapper divs
> therefore causing the issue you see.
>
> -Darrel

Shaded edges in your div wrapper

Similar Messages

Maybe you are looking for