CODEWITHSUNDEEP
cssbordercss-float
Snowy Coder Girl
Snowy Coder Girl

Reputation: 5518

Putting a Border Around Floating Elements

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 using style="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).

enter image description here

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?

Upvotes: 29

Views: 24790

Answers (3)

Kelvin Farrell
Kelvin Farrell

Reputation: 305

Add this line to your CSS properties:

overflow: hidden

Upvotes: 7

Alex
Alex

Reputation: 35409

Adding an overflow in this case with a value of hidden or auto remedies the issue.

Check the fiddle below:

http://jsfiddle.net/XMrwR/

Clearing floats the overflow way

http://www.quirksmode.org/blog/archives/2005/03/clearing_floats.html

Upvotes: 45

benesch
benesch

Reputation: 5269

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/

Upvotes: 15

Related Questions