Solved

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

Posted on 2009-07-14
2
500 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 500 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

Guide to Performance: Optimization & Monitoring

Nowadays, monitoring is a mixture of tools, systems, and codes—making it a very complex process. And with this complexity, comes variables for failure. Get DZone’s new Guide to Performance to learn how to proactively find these variables and solve them before a disruption occurs.

Question has a verified solution.

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

Developer portfolios can be a bit of an enigma—how do you present yourself to employers without burying them in lines of code?  A modern portfolio is more than just work samples, it’s also a statement of how you work.
Although a lot of people devote their energy toward marketing for specific industries, there are some basic principles that can be applied to any sector imaginable. We’ll look at four steps to take and examine how those steps were put into action fo…
The viewer will learn how to count occurrences of each item in an array.
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

705 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