Solved

CSS Clear Issue

Posted on 2011-02-17
3
261 Views
Last Modified: 2012-05-11
On the page below we have included clear:both in the CSS for the appropriate footer divs, yet the footer still doesn't clear the right column.

It looks like the divs are closed correctly.

Any help would be greatly appreciated: http://new.pecklaw.com/practiceareas/contract_review_program
0
Comment
Question by:jsuissa
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
3 Comments
 
LVL 3

Accepted Solution

by:
thecrew earned 250 total points
ID: 34919685
Okay, I think this should work for you. I think that your #apDiv2 div should be moved after your div with a class of "Construction", and the position declaration of apDiv2 should be relative not absolute (div.css line 485). you'll want to add a float:left to this div, also the left declaration for apDiv2 should be something like -23px. You will need to play a bit with the top declaration to get it back where you want it vertically (I'd try -155px or so). All of those will be on line 485.
So it should now look like this:

#apDiv2 {
background-color:#FFFFFF;
border-left:1px solid #4090AC;
float:left;
height:550px;
left:-23px;
position:relative;
top:-155px;
width:308px;
z-index:1;
}

I think that will work for you.
0
 
LVL 10

Assisted Solution

by:jtwcs
jtwcs earned 250 total points
ID: 34920015
The clear will not work because you have the apDiv2 positioned absolutely.  If you swap order of the Construction div with the apDiv2, you can float the apDiv2 to make the clear work.  Here is what I changed for the ConstructionMiddleContent div.

 
<div class="ConstructionMiddleContent">

<div class="Construction"><div class="Left"><h2>With a unique team of attorneys wholly dedicated to drafting and reviewing contracts, Peckar &amp; Abramson offers an unparalleled level of expertise and up-to-the-minute knowledge of contract practices and terms.</h2>
<p>We specialize in identifying the risks posed by potential contracts and eliminating or devising responses to those risks. Our attorneys also can prepare contracts and guide clients through the industry’s maze of standard and non-standard contract issues.
</p>
    
</div>
</div> 


<div id="apDiv2">
          <div class="LawUpperSection"><ul><li><h4>Richard L. Abramson</h4>
<p>+1 201.343.3434
rabramson@pecklaw.com</p></li>
          </ul></div>
          <!--LawBottomSection Section Starts here-->
          <div class="LawBottomSection"><h2>Practice Areas</h2><ul>
    
<li><a href="http://new.pecklaw.com/practiceareas/international_construction">International Construction</a></li>
    
<li><a href="http://new.pecklaw.com/practiceareas/securities_litigation_regulatory_compliance">Securities Litigation Regulatory &amp; Compliance</a></li>
    
<li><a href="http://new.pecklaw.com/practiceareas/white_collar_criminal_defense_compliance">White Collar Criminal Defense Compliance</a></li>
    
<li><a href="http://new.pecklaw.com/practiceareas/real_estate">Real Estate</a></li>
    
<li><a href="http://new.pecklaw.com/practiceareas/contract_compliance_and_ethics">Contract Compliance and Ethics</a></li>
    
<li><a href="http://new.pecklaw.com/practiceareas/employment">Employment</a></li>
    
<li><a href="http://new.pecklaw.com/practiceareas/corporate">Corporate</a></li>
    
<li><a href="http://new.pecklaw.com/practiceareas/labor_and_immigration">Labor and Immigration</a></li>
    
<li><a href="http://new.pecklaw.com/practiceareas/dispute_resolution">Dispute Resolution</a></li>
    
<li><a href="http://new.pecklaw.com/practiceareas/public_private_partnerships">Public-Private Partnerships</a></li>
    
<li><a href="http://new.pecklaw.com/practiceareas/contract_review_program">Contract Review Program</a></li>
    
<li><a href="http://new.pecklaw.com/practiceareas/project_notice">Project Notice</a></li>
    
<li><a href="http://new.pecklaw.com/practiceareas/government_contract_law">Government Contract Law</a></li>
    
<li><a href="http://new.pecklaw.com/practiceareas/construction_law">Construction Law</a></li>
    
<li><a href="http://new.pecklaw.com/practiceareas/environmental_law">Environmental Law</a></li>
    
          </ul>
          </div>
        
          </div>       
</div>

Open in new window


CSS changes to replicate what you originally had.

.Left {
    float: left;
    padding: 0 25px 41px 10px;
    width: 582px;
}

#apDiv2 {
    background-color: #FFFFFF;
    border-left: 1px solid #4090AC;
    float: left;
    margin: -155px 0 0;
    width: 308px;
}

Hope this helps.

0
 

Author Comment

by:jsuissa
ID: 34920316
Thank you both!
0

Featured Post

[Webinar] Learn How Hackers Steal Your Credentials

Do You Know How Hackers Steal Your Credentials? Join us and Skyport Systems to learn how hackers steal your credentials and why Active Directory must be secure to stop them. Thursday, July 13, 2017 10:00 A.M. PDT

Question has a verified solution.

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

CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
Originally, this post was published on Monitis Blog, you can check it here . Websites are getting bigger and more complicated by the day. Video, images and custom fonts are all great for showcasing your product or service. But the price to pay in…
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

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

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

Join & Ask a Question