[Last Call] Learn about multicloud storage options and how to improve your company's cloud strategy. Register Now

x
?
Solved

CSS help needed - Why doesn't div border enclose child elements?

Posted on 2009-07-14
2
Medium Priority
?
507 Views
Last Modified: 2012-05-07
I have a div containing a div which in turn contains two floating divs. See the code below for the organization. The border only covers the header and part of the floatContainer div, but not the two floating divs. The attached image shows the problem. I want the border should surround the contained elements.

Can someone tell me what I should change or what I should look for in my css to fix this? Unfortunately, this is just local at the moment, so I can't post a link.

<div id=parentWithBorder>
   <h2>Payment Information</h2>
   <div=floatContainer>
      <div style="float:left">Order Summary...</div>
      <div style="float:right">Pay With a Credit Card...</div>
   </div>
</div>

Open in new window

DivBorder.jpg
0
Comment
Question by:ZekeLA
[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
2 Comments
 
LVL 18

Accepted Solution

by:
Hube02 earned 2000 total points
ID: 24850816
The problem is that when you float an element that this basically takes that element out of the document flow, so the floating elements are no longer technically inside the parent element. This can be corrected in a couple of ways.

You can either put an element after the floaters that clears the floating elements or you can float the parent element as well.
==== Using a clearing element example ===
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Untitled Document</title>
  </head>  
  <body>
    <div id="parentWithBorder" style="border: 1px solid #F00;">
      <h2>Payment Information</h2>
      <div id="floatContainer">
        <div style="float:left">Order Summary...</div>
        <div style="float:right">Pay With a Credit Card...</div>
      </div>
      <br style="clear: both;" />
    </div>
  </body>
</html>
 
 
==== Float Parent Element Example ===
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Untitled Document</title>
  </head>  
  <body>
    <div id="parentWithBorder" style="border: 1px solid #F00; float:left; width: 100%;">
      <h2>Payment Information</h2>
      <div id="floatContainer">
        <div style="float:left">Order Summary...</div>
        <div style="float:right">Pay With a Credit Card...</div>
      </div>
    </div>
  </body>
</html>

Open in new window

0
 
LVL 1

Author Closing Comment

by:ZekeLA
ID: 31603314
Fantastic answer! I had used a work-around by getting rid of the floats and using a table instead but I'm going to try out the clear element instead. That would seem to correct the inherit problem in the original markup (which I inherited). Thanks for the info; I'll be able to keep an eye out for similar float problems in the future.
0

Featured Post

Moving data to the cloud? Find out if you’re ready

Before moving to the cloud, it is important to carefully define your db needs, plan for the migration & understand prod. environment. This wp explains how to define what you need from a cloud provider, plan for the migration & what putting a cloud solution into practice entails.

Question has a verified solution.

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

Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
Q&A with Course Creator, Mark Lassoff, on the importance of HTML5 in the career of a modern-day developer.
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

656 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