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).
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?
Borders can be applied to most HTML elements within the body. To make a border around an element, all you need is border-style . The values can be solid , dotted , dashed , double , groove , ridge , inset and outset .
You can use Padding in your style attribute or CSS class. Show activity on this post. Padding allows you to control the space between your image and its border. Padding is just one piece of a larger concept, the CSS Box Model, which includes the content, padding, border and margin.
There is no way to float center in CSS layout. So, we can center the elements by using position property.
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
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/
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With