?
Solved

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

Posted on 2009-07-14
2
Medium Priority
?
504 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

Get 15 Days FREE Full-Featured Trial

Benefit from a mission critical IT monitoring with Monitis Premium or get it FREE for your entry level monitoring needs.
-Over 200,000 users
-More than 300,000 websites monitored
-Used in 197 countries
-Recommended by 98% of users

Question has a verified solution.

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

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…
Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
This video teaches users how to migrate an existing Wordpress website to a new domain.
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
Suggested Courses

752 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