Putting a Border Around Floating Elements
Solution 1
Adding an overflow
in this case with a value of hidden
or auto
remedies the issue.
Check the fiddle below:
Clearing floats the overflow way
http://www.quirksmode.org/blog/archives/2005/03/clearing_floats.html
Solution 2
In CSS, floated elements do not add height to a parent by default.
The solution is simply to set overflow: hidden
.
<div style="border: 2px solid black; overflow: hidden;"
<img src="testImage1.png" alt="Test Image 1" style="float:right;" />
<img src="testImage2.png" alt="Test Image 2" style="float:left;" />
<p>Test Text</p>
</div>
fiddle: http://jsfiddle.net/JNets/
Solution 3
Add this line to your CSS properties:
overflow: hidden
![Snowy Coder Girl](https://i.stack.imgur.com/To5Hw.png?s=256&g=1)
Comments
-
Snowy Coder Girl over 4 years
Say I have something like the following code, where I want to display some text between two images that I am floating left and right.
<img src="testImage1.png" alt="Test Image 1" style="float:right;" /> <img src="testImage2.png" alt="Test Image 2" style="float:left;" /> <p>Test Text</p>
I want to add a border around the two images and the text. I tried putting a
<div>
around all 3 of the above tags and usingstyle="border:2px black solid;"
. While this adds a border, it seems to not take the images into account. That is, we get something like the following (using StackOverflow and Google logos).I am guessing this is happening because the floating elements are not being considered as part of the
<div>
. I am a software developer, not a web developer, so I am no expert in CSS. But I do think I recall that floating elements are kind of "ignored" in a way. Can anyone give a detailed description of what is going on and how to fix it?