Solved

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

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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

Learn by example how to specify CSS selectors for Selenium WebDriver test automation software.
This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

862 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

23 Experts available now in Live!

Get 1:1 Help Now