I'm trying to do good by using more CSS/Divs and less tables.

However, I'm often having this problem: When I create a DIV and put more DIVs inside them, I assume that the outer div will surround the inner divs. However this is not what happens.

   <div style="width:100%; border:thin; border-style:solid; border-color:#9B370C; height:auto;">
        <div style="float:left;"> some image
        </div>
        <div style="float:right;">
       some text
        </div>
    </div>

I expected the above to create a border around the whole thing, but instead I get this (the border looks like a line):

some image
some text
  • i see that my posted question doesn't look like the preview. However you can copy-paste the code into an html file to see what I mean. Nathan almost 7 years ago

2 answers

2
points
This was chosen as the best answer

Try adding "overflow:auto;" to your outer div.

Have a look here for more information (see the section titled "Float Clearing"): http://css-tricks.com/the-css-overflow-property/

Answered almost 7 years ago by Justin Ryan
  • Justin is absolutely right. When you float those inner divs, everything changes. +1 Abinadi Ayerdis almost 7 years ago
  • Per the CSS spec, parent elements are never to expand to contain floated elements. To make this happen, there are several tricks, including the one suggested here. Another is making the parent element float if possible. Rob almost 7 years ago
1
point

You could use any one of the clearing of floats, each technique has it's pro's and cons. There is also the option of using CSS 2.1 content-generation: http://www.positioniseverything.net/easyclearing.html

An important note is that this behavior isn't a bug or "wrong". This is logically correct according to the standards of the Visual Formatting Model. Floated elements (as positioned elements) exist in their own space, outside the normal flow of the page. The wrapping div of one or more floated elements shouldn't recognize it's children because they exist in their own "float space". That's why it works to also float the wrapper and teleport it to the same dimension as it's children. Good luck!

Answered almost 7 years ago by Jens Hedqvist