Floating image to the left changes container div's height
Add overflow:auto;
to #container
(Explanations below)
Why does the size of a image in my floating element does not change?
You are defining the size for the container, but not for the image itself, so the image will display at its original size, and since the container doesn't have overflow: hidden
, it will go out of the container.
Add this to fit the image into the container (well, height
will depend on the image format):
EDIT: I changed height
to 100% after the comment, wich distorts the image. If you set it to auto
, and also set the container height
to auto (or just erase it, since that is the default setting), it will become higher, according to its proportions/format. (The original image in this case is 400x400)
#picture { float: right; width: 300px; height: 200px;}
#picture img { width: 100%; height: 100%;}
<body> <h1>Heading 1</h1> <div id="picture"> <img src="https://lorempixel.com/400/400/" alt="photograph" /> </div> <p>sampletext</p></body>
How to make div height increase to include floated image
You can change the behaviour of how parent blocks deal with floated content by changing the overflow
property. This should do it:
#main_contentbox { overflow: hidden; }
Inner left-floating div's do not expand the container div vertically
you need to set overflow for the main div. overflow: auto; this will force the div container to expand and adapt to the content.
#cat_container{
margin:0;
padding:5px;
border:1px solid red;
min-height:200px;
overflow: auto;
height: auto !important;
}
Why doesn't the height of a container element increase if it contains floated elements?
The floated elements do not add to the height of the container element, and hence if you don't clear them, container height won't increase...
I'll show you visually:
More Explanation:
<div>
<div style="float: left;"></div>
<div style="width: 15px;"></div> <!-- This will shift
besides the top div. Why? Because of the top div
is floated left, making the
rest of the space blank -->
<div style="clear: both;"></div>
<!-- Now in order to prevent the next div from floating beside the top ones,
we use `clear: both;`. This is like a wall, so now none of the div's
will be floated after this point. The container height will now also include the
height of these floated divs -->
<div></div>
</div>
You can also add overflow: hidden;
on container elements, but I would suggest you use clear: both;
instead.
Also if you might like to self-clear an element you can use
.self_clear:after {
content: "";
clear: both;
display: table;
}
How Does CSS Float Work?
What is float exactly and what does it do?
The
float
property is misunderstood by most beginners. Well, what exactly doesfloat
do? Initially, thefloat
property was introduced to flow text around images, which are floatedleft
orright
. Here's another explanation by @Madara Uchicha.So, is it wrong to use the
float
property for placing boxes side by side? The answer is no; there is no problem if you use thefloat
property in order to set boxes side by side.Floating an
Demoinline
orblock
level element will make the element behave like aninline-block
element.If you float an element
left
orright
, thewidth
of the element will be limited to the content it holds, unlesswidth
is defined explicitly ...You cannot
float
an elementcenter
. This is the biggest issue I've always seen with beginners, using, which is not a valid value for thefloat: center;
float
property.float
is generally used tofloat
/move content to the very left or to the very right. There are only four valid values forfloat
property i.eleft
,right
,none
(default) andinherit
.Parent element collapses, when it contains floated child elements, in order to prevent this, we use
clear: both;
property, to clear the floated elements on both the sides, which will prevent the collapsing of the parent element. For more information, you can refer my another answer here.(Important) Think of it where we have a stack of various elements. When we use
float: left;
orfloat: right;
the element moves above the stack by one. Hence the elements in the normal document flow will hide behind the floated elements because it is on stack level above the normal floated elements. (Please don't relate this toz-index
as that is completely different.)
Taking a case as an example to explain how CSS floats work, assuming we need a simple 2 column layout with a header, footer, and 2 columns, so here is what the blueprint looks like...
In the above example, we will be floating only the red boxes, either you can float
both to the left
, or you can float
on to left
, and another to right
as well, depends on the layout, if it's 3 columns, you may float
2 columns to left
where another one to the right
so depends, though in this example, we have a simplified 2 column layout so will float
one to left
and the other to the right
.
Markup and styles for creating the layout explained further down...
<div class="main_wrap">
<header>Header</header>
<div class="wrapper clear">
<div class="floated_left">
This<br />
is<br />
just<br />
a<br />
left<br />
floated<br />
column<br />
</div>
<div class="floated_right">
This<br />
is<br />
just<br />
a<br />
right<br />
floated<br />
column<br />
</div>
</div>
<footer>Footer</footer>
</div>
* {
-moz-box-sizing: border-box; /* Just for demo purpose */
-webkkit-box-sizing: border-box; /* Just for demo purpose */
box-sizing: border-box; /* Just for demo purpose */
margin: 0;
padding: 0;
}
.main_wrap {
margin: 20px;
border: 3px solid black;
width: 520px;
}
header, footer {
height: 50px;
border: 3px solid silver;
text-align: center;
line-height: 50px;
}
.wrapper {
border: 3px solid green;
}
.floated_left {
float: left;
width: 200px;
border: 3px solid red;
}
.floated_right {
float: right;
width: 300px;
border: 3px solid red;
}
.clear:after {
clear: both;
content: "";
display: table;
}
Let's go step by step with the layout and see how float works..
First of all, we use the main wrapper element, you can just assume that it's your viewport, then we use header
and assign a height
of 50px
so nothing fancy there. It's just a normal non floated block level element which will take up 100%
horizontal space unless it's floated or we assign inline-block
to it.
The first valid value for float
is left
so in our example, we use float: left;
for .floated_left
, so we intend to float a block to the left
of our container element.
Column floated to the left
And yes, if you see, the parent element, which is .wrapper
is collapsed, the one you see with a green border didn't expand, but it should right? Will come back to that in a while, for now, we have got a column floated to left
.
Coming to the second column, lets it float
this one to the right
Another column floated to the right
Here, we have a 300px
wide column which we float
to the right
, which will sit beside the first column as it's floated to the left
, and since it's floated to the left
, it created empty gutter to the right
, and since there was ample of space on the right
, our right
floated element sat perfectly beside the left
one.
Still, the parent element is collapsed, well, let's fix that now. There are many ways to prevent the parent element from getting collapsed.
- Add an empty block level element and use
clear: both;
before the parent element ends, which holds floated elements, now this one is a cheap solution toclear
your floating elements which will do the job for you but, I would recommend not to use this.
Add, <div style="clear: both;"></div>
before the .wrapper
div
ends, like
<div class="wrapper clear">
<!-- Floated columns -->
<div style="clear: both;"></div>
</div>
Demo
Well, that fixes very well, no collapsed parent anymore, but it adds unnecessary markup to the DOM, so some suggest, to use overflow: hidden;
on the parent element holding floated child elements which work as intended.
Use overflow: hidden;
on .wrapper
.wrapper {
border: 3px solid green;
overflow: hidden;
}
Demo
That saves us an element every time we need to clear
float
but as I tested various cases with this, it failed in one particular one, which uses box-shadow
on the child elements.
Demo (Can't see the shadow on all 4 sides, overflow: hidden;
causes this issue)
So what now? Save an element, no overflow: hidden;
so go for a clear fix hack, use the below snippet in your CSS, and just as you use overflow: hidden;
for the parent element, call the class
below on the parent element to self-clear.
.clear:after {
clear: both;
content: "";
display: table;
}
<div class="wrapper clear">
<!-- Floated Elements -->
</div>
Demo
Here, shadow works as intended, also, it self-clears the parent element which prevents to collapse.
And lastly, we use footer after we clear
the floated elements.
Demo
When is float: none;
used anyways, as it is the default, so any use to declare float: none;
?
Well, it depends, if you are going for a responsive design, you will use this value a lot of times, when you want your floated elements to render one below another at a certain resolution. For that float: none;
property plays an important role there.
Few real-world examples of how float
is useful.
- The first example we already saw is to create one or more than one column layouts.
- Using
img
floated insidep
which will enable our content to flow around.
Demo (Without floating img
)
Demo 2 (img
floated to the left
)
- Using
float
for creating horizontal menu - Demo
Float second element as well, or use `margin`
Last but not the least, I want to explain this particular case where you float
only single element to the left
but you do not float
the other, so what happens?
Suppose if we remove float: right;
from our .floated_right
class
, the div
will be rendered from extreme left
as it isn't floated.
Demo
So in this case, either you can float
the to the left
as well
OR
You can use margin-left
which will be equal to the size of the left floated column i.e 200px
wide.
Floating a div with image results in extra space
Your images width (caused by its class .class-0-569
) is 33%. But that's of its container / parent element, i.e. the floated .class-0-568
element.
Apply the 33% width to the image's parent (.class-0-568
) and 100% width to the image itself:
.class-0-568 {
float: left;
width: 33%;
}
.class-0-569 {
padding-right: 2%;
width: 100%;
height: auto;
}
.class-0-570 {
line-height: 1.2em;
margin-top: 0.2816004em;
}
<div class="class-0-568" id="id-0-553">
<img alt="Sample Image" class="class-0-569" id="id-0-554" src="https://i.postimg.cc/BZYZRfKP/image-0-4.jpg">
</div>
<p class="class-0-570" id="id-0-555">These offer a description of who you are</p>
Floating divs around and under an image
I got it working in your fiddle:
http://jsfiddle.net/BcjzK/4/
Because of the way div layouts work, its always going to start the green div below the red one if it comes after the red one in the HTML code unless you put it in a parent container that encapsules the entire left side.
As a fix I made another container div that would hold both the img and the green div and then floated that container left.
HTML:
<div class="container">
<div class="imgContainer">
<img src="http://hazelden.ca/sample.png" alt="Some Image" width="320" height="auto" />
<div class="extra-content">
Text
</div>
</div>
<div class="content">
...
CSS:
.container {
width:700px;
border:solid 1px gray;
}
.imgContainer{
float: left;
}
.content {
width:460px;
border:solid 1px red;
margin-right:0px;
margin-left:auto;
}
.extra-content {
width:230px;
border:solid 1px green;
}
img {
border:solid 1px blue;
}
blockquote {
border:solid 1px gray;
width:30%;
float:right;
}
EDIT:
I noticed that the imgContainer box forces your content text to change position slightly to accommodate it's presence. if you want the content text to lay out precisely the same as before use this:
.imgContainer{
float: left;
height: 450px;
overflow: visible;
}
http://jsfiddle.net/BcjzK/5/
You can even get the content text under the pic as close as it is on the side by changing the height property of imgContainer to 430px.
http://jsfiddle.net/BcjzK/6/
Hope this helps!
How to float:left a container with an image having a relative width?
Tough problem. I had to read the spec to help you out and here is my result.
It's impossible to solve the problem with the given constraints since it all depends on the width of the image (also called "replaced element")
Why?
Let's read the spec http://www.w3.org/TR/CSS2/visudet.html#float-width
If 'margin-left', or 'margin-right' are computed as 'auto', their used value is '0'.
If 'width' is computed as 'auto', the used value is the "shrink-to-fit" width.
Calculation of the shrink-to-fit width is similar to calculating the width of a table cell using the automatic table layout algorithm. Roughly: calculate the preferred width by formatting the content without breaking lines other than where explicit line breaks occur, and also calculate the preferred minimum width, e.g., by trying all possible line breaks. CSS 2.1 does not define the exact algorithm. Thirdly, find the available width: in this case, this is the width of the containing block minus the used values of 'margin-left', 'border-left-width', 'padding-left', 'padding-right', 'border-right-width', 'margin-right', and the widths of any relevant scroll bars.
Then the shrink-to-fit width is: min(max(preferred minimum width, available width), preferred width).
Lets do the "math" for your case
Preferred minimum width = 1000px (real width of the image)
Available width = assume 1990 (roughly page width)
Preferred width = 1000px (real width of the image)
min(max(1000, 1990), 1000) = 1000
As a proof http://jsfiddle.net/xnt27crz/5/ with 200px image
Summary
In your case the floated div will get the width equal to the real width of the image.
CSS Float does not stretch Div Height
You need to clear your floats using a clearfix or clearing element.
Method #1 clearfix
.clearfix:before,
.clearfix:after {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
Then you add the class on the containing element
<div class="module-box-body clearfix" style="display: block;">
http://jsfiddle.net/u5HXu/8/
Method #2 Clearing Element
.clear {
clear: both;
}
Then you add the following HTML after your floated elements.
<div class="clear"></div>
http://jsfiddle.net/u5HXu/9/
How might I force a floating DIV to match the height of another floating DIV?
Wrap them in a containing div with the background color applied to it, and have a clearing div after the 'columns'.
<div style="background-color: yellow;">
<div style="float: left;width: 65%;">column a</div>
<div style="float: right;width: 35%;">column b</div>
<div style="clear: both;"></div>
</div>
Updated to address some comments and my own thoughts:
This method works because its essentially a simplification of your problem, in this somewhat 'oldskool' method I put two columns in followed by an empty clearing element, the job of the clearing element is to tell the parent (with the background) this is where floating behaviour ends, this allows the parent to essentially render 0 pixels of height at the position of the clear, which will be whatever the highest priorly floating element is.
The reason for this is to ensure the parent element is as tall as the tallest column, the background is then set on the parent to give the appearance that both columns have the same height.
It should be noted that this technique is 'oldskool' because the better choice is to trigger this height calculation behaviour with something like clearfix or by simply having overflow: hidden on the parent element.
Whilst this works in this limited scenario, if you wish for each column to look visually different, or have a gap between them, then setting a background on the parent element won't work, there is however a trick to get this effect.
The trick is to add bottom padding to all columns, to the max amount of size you expect that could be the difference between the shortest and tallest column, if you can't work this out then pick a large figure, you then need to add a negative bottom margin of the same number.
You'll need overflow hidden on the parent object, but the result will be that each column will request to render this additional height suggested by the margin, but not actually request layout of that size (because the negative margin counters the calculation).
This will render the parent at the size of the tallest column, whilst allowing all the columns to render at their height + the size of bottom padding used, if this height is larger than the parent then the rest will simply clip off.
<div style="overflow: hidden;">
<div style="background: blue;float: left;width: 65%;padding-bottom: 500px;margin-bottom: -500px;">column a<br />column a</div>
<div style="background: red;float: right;width: 35%;padding-bottom: 500px;margin-bottom: -500px;">column b</div>
</div>
You can see an example of this technique on the bowers and wilkins website (see the four horizontal spotlight images the bottom of the page).
Related Topics
Search Button Inside the Search Box Like Bing
How to Use a Background Image on the Stroke of an Svg Element
How to Make Elements Flow from Bottom to Top
Disappearing Position Fixed Header in iOS7 Mobile Safari
How to Prevent Hidden Element to Be Shown When Focused in Chrome
Javafx Text Styling for Dynamic Objects
Can You Add New CSS Properties in Chrome Inspector
CSS :Not() Selector. Apply Style If Parent Does Not Exist
Can One Pixelate Images with an Svg Filter
Web Design for Smart Phone - Pixel Size
How to Figure Out Proper Min-Width and Max-Width Values for Responsive CSS
Safari Image Size Auto Height CSS
What Is Element.Style and Why Is It Overriding My CSS Settings
Rails Images and Assets Not Being Loaded Properly
Angular Material 6 Grid List Align-Items and Justify-Content to Flex-Start