Solved

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

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

Maximize Your Threat Intelligence Reporting

Reporting is one of the most important and least talked about aspects of a world-class threat intelligence program. Here’s how to do it right.

Join & Write a Comment

Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
This article discusses how to create an extensible mechanism for linked drop downs.
The viewer will learn how to dynamically set the form action using jQuery.
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…

760 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

Need Help in Real-Time?

Connect with top rated Experts

18 Experts available now in Live!

Get 1:1 Help Now