how to fix css float problem for div li image

how to fix css float problem for div li image

Css float problem most common css issue

After float html tag like div images li ul p , the design broke and the layout of the page destroyed . to fix this there is so much method some of them works in all the browsers and some of them works in modern browsers, so let's see how to fix it !

What's css float problem and why it happen

In most case css float problem happen because of the size of the object images or div or li not defined , after you apply a float to an image or div that doesn't have a fixed size , you confuse the browser so he calculate the available free space and put the next object at that space .

Css float problem for div

This is the normal code , in that code there is image inside <div> with text , when i want to float image so the text come beside the image the layout destroyed and you see the green color stop only after the text end .

<style>
div.mydiv{background:teal;}
div.mydiv img{float:left;width:100px;height:85px;}
</style>
<div class="mydiv">
<img src="flower.jpg" />
float image inside div
</div>

Css float problem for ul li

The most annoying css setting is this : <ul> <li> , and <li> with <img> will be more confusing because <li> have flexible height and also the image have float problem

<style type="text/css">
ul.menu li{background:teal;padding:10px;}
ul.menu li img{width:100px;height:85px;float:left}
</style>
<ul class="menu">
<li><a href="#"><img src="flower.jpg" />float image inside li</a></li>
<li><a href="#"><img src="flower.jpg" />float image inside li</a></li>
<li><a href="#"><img src="flower.jpg" />float image inside li</a></li>
</ul>

Css float problem for p

Css problem for <p> you can ignore it sometimes because if you put a small images inside a big text you will not notice a float problem , you will only find problem if you put small text and big image

<style>
p.mytext{background:teal;}
p.mytext img{float:left;width:100px;height:85px;}
</style>
<p class="mytext">
<img src="flower.jpg" />
float image inside p tag
</p>

Fix css float problem using overflow

The most easy way to fix float problem is to add overflow:hidden to the parent div this method works fine in most the browser , but it sometimes hide your text if your text cross the layout so it will be hidden . and if you use overflow:auto so if your text cross the layout there will be a scroll bar inside your div .

<style>
div.mydiv{background:teal;overflow:hidden}
div.mydiv img{float:left;width:100px;height:85px;}
</style>
<div class="mydiv">
<img src="flower.jpg" />
float image inside div
</div>
<style>
ul.menu{}
ul.menu li img{width:100px;height:85px;float:left}
ul.menu li{background:teal;padding:10px;overflow:hidden}
</style>
<ul class="menu">
<li><a href="#"><img src="flower.jpg" />float image inside li</a></li>
<li><a href="#"><img src="flower.jpg" />float image inside li</a></li>
<li><a href="#"><img src="flower.jpg" />float image inside li</a></li>
</ul>
<style>
p.mytext{background:teal;overflow:hidden}
p.mytext img{float:left;width:100px;height:85px;}
</style>
<p class="mytext">
<img src="flower.jpg" />
float image inside p tag
</p>

Fix css float problem using clear float

My second method is to add a clear float after every float , this method fine but you have to add a clear float with clear:both after every float you did .

<style>
div.mydiv{background:teal;}
div.mydiv img{float:left;width:100px;height:85px;}
.clear{display:block;float:none;clear:both;}
</style>

<div class="mydiv">
<img src="flower.jpg" />
float image inside div
<div class="clear"></div>
</div>
<style>
ul.menu{}
ul.menu li img{width:100px;height:85px;float:left}
ul.menu li{background:teal;padding:10px;}
.clear{display:block;float:none;clear:both;}
</style>

<ul class="menu">
<li><a href="#"><img src="flower.jpg" />float image inside li</a><span class="clear"></span></li>
<li><a href="#"><img src="flower.jpg" />float image inside li</a><span class="clear"></span></li>
<li><a href="#"><img src="flower.jpg" />float image inside li</a><span class="clear"></span></li>
</ul>
<style>
p.mytext{background:teal;}
p.mytext img{float:left;width:100px;height:85px;}
.clear{display:block;float:none;clear:both;}
</style>
<p class="mytext">
<img src="flower.jpg" />
float image inside p tag
<span class="clear"></span>
</p>

Css float problem fixed result

Leave comment
Wecome To alistarbot.com