Jump to content

clear:both not working???

ShootingBlanks

By ShootingBlanks
in CSS Help

 Share

Recommended Posts

ShootingBlanks Regular Member

ShootingBlanks

Posted
Posted

Can someone explain to my why my "spacer" div is not working (i'm looking in IE7 & Firefox)?  Here's the page (I put a 1p border around the "clear" div so that you can see it for testing):

 

http://www.welcome-home-interiors.net/services.php

 

Below is the HTML and CSS...

 

HTML:

<body>
<div id="container">
<div id="header">
  <?php include('includes/flashHeader.php'); ?>
</div>
    <div id="nav">
    	<?php include('includes/navbar.php'); ?>
    </div>
    <div id="maincontent">
    	<div id="mainLeftText">
    	  <p><img src="images/headers/services.gif" alt="SERVICES" width="188" height="49" /></p>
          	<div id="mainLeft">
              <p><span class="header">INTERIOR DESIGN</span><br />
              Whether it's simply choosing a paint color or extensively remodeling a kitchen, Welcome Home Interiors can offer you guidance. Space planning and 3D Images are available so that you can visualize your room and make changes before any labor or purchasing is made.</p>
                <p><span class="header">REAL ESTATE STAGING</span><br />
                "Set the Stage" by rearranging current furnishings and accessories to create your own "model home" - spacious, fresh, and beautiful - exactly what buyers are looking for! As trained professionals, Welcome Home Interiors will assist you in establishing a perfect first impression - an important factor in selling your home for the highest price and in the shortest amount of time. In a 1 to 2 hour consultation we will offer suggestions to enhance your home easily and economically, and leave you the comprehensive list of tasks we've discussed. If you'd prefer, you can enjoy the instant gratification of having us rearrange your space on the spot. We also can add pieces from our inventory to enhance your belongings or even fill your vacant home.</p>
              <p><span class="header">ROOM REDESIGN</span><br />
              Welcome Home Interiors can give your room a whole new look using the furniture and accessories currently in your home. Want to add a few fresh pieces? Let us provide you with a design plan tailored to meet your lifestyle. We can roll up our sleeves and complete the look for you, or turn over the plan for the "do-it-yourselfers".</p>
    		  <p><span class="header">SHOPPING</span><br />
    		  Do you get overwhelmed by all the options? Or just don't have time to shop? Let's discuss the look you're dreaming of and establish a budget, then Welcome Home Interiors will locate it and bring it to you.</p>
    		    <p><span class="header">YOUR NEW PLACE</span><br />
    		    Welcome Home Interiors will recycle your existing furnishings into your new home. We will offer answers to all of those design questions about paint, window treatments, and finishing touches so you'll soon have the "at home" feeling in your new surroundings.</p>
    		    <p><span class="header">GIFT CERTIFICATES</span><br />
    		    Welcome Home Interiors  GIFT CERTIFICATES make wonderful hostess, house warming, wedding, birthday, and special occasion gifts. They can be customized to your needs.</p>
    		    <p><span class="header">FEES</span><br />
    		    Together, Lori and Teri of Welcome Home Interiors are $75.oo an hour for design consulting. Prop rental for real estate staging is quoted per room.</p>
       	  </div>
      </div>
        <div id="mainRight">
        <p><img src="images/indexPic.jpg" alt="Welcome Home Interiors" width="310" height="415" /></p>
        </div>
        <div class="spacer"> </div>
    </div>
</div>
</body>

 

CSS:

html, body {
background: #DACCCC;
font-family: Georgia, "Times New Roman", Times, serif;
padding: 0;
margin: 0;
color: #6E6E53;
height: 100%;
line-height: 1.5em;
}
a:link, a:visited, a:active {
text-decoration: underline;
color: #6E5256;
}
a:hover {
text-decoration: none;
color: #7F0A32;
}

#container {
background: #000;
width: 780px;
margin:auto;
padding: 0;
text-align: justify;
height: 100%;
}

#header {
background-color: #FFF;
width: 100%;
height: 272px;
margin: 0px;
padding: 0px;
border-left: 6px solid #6E5256;
border-right: 6px solid #6E5256;
}
#nav {
width: 100%;
height: 32px;
background: url(../images/nav/navLeftFade.jpg) #7F0A32 top left no-repeat;
margin: 0px;
padding: 0px;
text-align: left;
border-left: 6px solid #6E5256;
border-right: 6px solid #6E5256;
}
#nav img {
margin: 0px;
padding: 0px;
width: 126px;
height: 32px;
vertical-align: top;
}
#maincontent {
background-color: #CAD49F;
height: 100%;
margin: 0px;
padding: 0px;
width: 100%;
border-left: 6px solid #6E5256;
border-right: 6px solid #6E5256;
overflow: visible;
}
#mainLeftText {
width: 350px;
float: left;
padding: 20px 0px 0px 10px;
margin: 0;
overflow: hidden;
}
#mainLeft {
width: 320px;
padding: 0px 0px 0px 30px;
margin: 0;
float:left;
}
#mainRight {
width: 350px;
float: right;
padding: 50px 5px 0px 0px;
margin: 0px;
overflow: hidden;
}
.header {
font-weight: bold;
text-align: left;
text-decoration: underline;
margin-bottom: 0px;
padding-bottom: 0px;
}
.spacer {
clear: both;
border: 1px solid;
}

/* NAVIGATION ROLLOVERS */
a#home:link, a#home:visited, a#home:active {
margin-left: 150px;
display: inline-block;
width: 126px;
height: 32px;
text-decoration: none;
background: url(../images/nav/home.gif);
}
a#home:hover {
margin-left: 150px;
background-position: -126px 0px;
}
a#services:link, a#services:visited, a#services:active {
display: inline-block;
width: 126px;
height: 32px;
text-decoration: none;
background: url(../images/nav/services.gif);
}
a#services:hover {
background-position: -126px 0px;
}
a#gallery:link, a#gallery:visited, a#gallery:active {
display: inline-block;
width: 126px;
height: 32px;
text-decoration: none;
background: url(../images/nav/gallery.gif);
}
a#gallery:hover {
background-position: -126px 0px;
}
a#testimonials:link, a#testimonials:visited, a#testimonials:active {
display: inline-block;
width: 126px;
height: 32px;
text-decoration: none;
background: url(../images/nav/testimonials.gif);
}
a#testimonials:hover {
background-position: -126px 0px;
}
a#contact:link, a#contact:visited, a#contact:active {
display: inline-block;
width: 126px;
height: 32px;
text-decoration: none;
background: url(../images/nav/contact.gif);
}
a#contact:hover {
background-position: -126px 0px;
}

 

Thanks!...

Link to comment
https://forums.phpfreaks.com/topic/126062-clearboth-not-working/
Share on other sites
ShootingBlanks Regular Member

ShootingBlanks

Posted
  • Author
Posted

spacer  clears left and right on firefox  and has a border its doing its job

THat's weird.  I'm looking at it in Firefox 3.0.1, and it looks the same as in IE7 (which is wrong).  I should have been more clear that the border definitely works.  What doesn't work is the fact that it should be inside the green background (the maincontent div) to expand it the height of the page.  Hmmmm...

 

Any thoughts on how to fix?  Thanks!...

 

dropfaith Advanced Member

dropfaith

Posted
Posted

odd i just refreshed and all hell broke loose  now i see the clear which i dont hink the issue is im seeing your content just strecthed way past the green background having visable on your main div and hidden on both content divs isnt that just overiding youself?

 

 

#maincontent {

background-color: #CAD49F;

height: 100%;

margin: 0px;

padding: 0px;

width: 100%;

border-left: 6px solid #6E5256;

border-right: 6px solid #6E5256;

overflow: visible;

}

#mainLeftText {

width: 350px;

float: left;

padding: 20px 0px 0px 10px;

margin: 0;

overflow: hidden;

}

ShootingBlanks Regular Member

ShootingBlanks

Posted
  • Author
Posted

having visable on your main div and hidden on both content divs isnt that just overiding youself?

 

I dunno.  I guess that's what I'm asking.  But if I leave the "visible" in the maincontent div and then remove the "hidden"s in the other two divs, I get the exact same results (I just tried it).  Any suggestions?...

 

 

wildteen88 Regular Member

wildteen88

Posted
Posted

Change your css for #maincontent and #mainlefttext to

#maincontent {
background-color: #CAD49F;
margin: 0px;
padding: 0px;
border-left: 6px solid #6E5256;
border-right: 6px solid #6E5256;
}
#mainLeftText {
width: 350px;
float: left;
padding: 20px 0px 0px 10px;
margin: 0;
}

 

Note, changes only tested in firefox

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.