Solved

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

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

Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

Question has a verified solution.

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

Any business that wants to seriously grow needs to keep the needs and desires of an international audience of their websites in mind. Making a website friendly to international users isn’t prohibitively expensive and can provide an incredible return…
This article will inform Clients about common and important expectations from the freelancers (Experts) who are looking at your Gig.
Any person in technology especially those working for big companies should at least know about the basics of web accessibility. Believe it or not there are even laws in place that require businesses to provide such means for the disabled and aging p…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

773 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