Problems with layout using Floats, Clear, Display - Not Understanding when to use what - Improper coding - html

Question

I am making a Image upload result box, somehow I managed to give it proper layout but elements of the result box doesn't seem right in 'Brackets View'
I struggle when it comes to use floats, clear and display. I get confused, I've tried to learn it 4-5 times till now but somewhere I fail to apply them properly.
Can someone guide me through this code while explaining when and where to use them..
Also, I use this technique to clear floats but sometimes it works and sometimes nothing happens:
.example
{
content: ' ';
display: block;
clear: both;
}
My HTML & CSS:
.files-bar {
width: 100%;
max-width: 700px;
margin: 20px auto;
padding: 15px;
overflow: auto;
border: 1px solid #BBBBBB;
box-shadow: 2px 3px 15px #E7E7E7;
}
.delete {
float: right;
background-color: #02BFC1;
color: #FFFFFF;
font-family: gothic;
width: 100%;
max-width: 75px;
border: 1px solid #02BFC1;
font-size: 10pt;
padding: 10px;
border-radius: 5px;
cursor: pointer;
}
.image-thumb {
float: left;
display: inline;
width: 160px;
height: 120px;
margin-right: 20px;
}
.img-thumb:after {
content: '';
display: block;
clear: both;
}
.image-name {
font-size: 17pt;
margin-top: 2px;
}
.image-size {
font-size: 13pt;
margin: 20px 0;
}
.file-status {
display: block;
font-size: 12pt;
margin-bottom: 10px;
}
.progress-wrap {
float: left;
width: 300px;
height: 20px;
color: #111;
height: 5px;
margin-top: 5px;
}
.progress-meter {
max-width: 300px;
height: 5px;
background: #02BFC1;
}
.up {
margin-left: 30px;
}
.cancel-upload {
float: left;
margin: -25px 0 0 -15px;
}
<div class="files-bar">
<button class="manage-btn delete">Delete</button>
<img class="image-thumb" src="profile_image/2861e205148ccebc01cb9b1d8a4c6b0c.jpg">
<p class="image-name">14217596f69f44507b.jpg</p>
<p class="image-size">22 KB</p>
<p class="file-status">File Uploaded Successfully!</p>
<div class="progress-wrap">
<!-- Progress bar -->
<div class="progress-meter"></div>
</div>
<p class="cancel-upload">✖</p>
</div>

Answer 1

Float is not a good strategy for layout as it requires managing floats with clear:both. clear will clear any floats defined previously, in this case your delete button that is floated right.
Please see this quick reference on float and clear properties.
As mentioned in a comment above, using display:flex will give you greater control over layout. Here is a solution with minimal change to your original code. I set display:flex on the container defined by div files-bar, created a container for progress and one for the delete button. Together with the img, these sibling elements are flex items. Here is a good tutorial on using flex.
And the complete code:
.files-bar
{
width: 100%;
max-width: 700px;
margin: 20px auto;
padding: 15px;
overflow: auto;
border: 1px solid #BBBBBB;
box-shadow: 2px 3px 15px #E7E7E7;
display:flex;
}
.delete
{
background-color: #02BFC1;
color: #FFFFFF;
font-family: gothic;
max-width: 75px;
border: 1px solid #02BFC1;
font-size: 10pt;
padding: 10px;
border-radius: 5px;
cursor: pointer;
display:inline-block;
}
.button-cell {
text-align:right;
flex-grow:1;
}
.image-thumb
{
display: inline;
width: 160px;
height: 120px;
margin-right: 20px;
}
.image-name
{
font-size: 17pt;
margin-top: 2px;
}
.image-size
{
font-size: 13pt;
margin: 20px 0;
}
.file-status
{
display: block;
font-size: 12pt;
margin-bottom: 10px;
}
.progress-wrap
{
float: left;
width: 300px;
height: 20px;
color: #111;
height: 5px;
margin-top: 5px;
}
.progress-meter
{
max-width: 300px;
height: 5px;
background: #02BFC1;
}
.up
{
margin-left: 30px;
}
.progress {
position:relative;
}
.cancel-upload
{
position:absolute;
right:4px;
bottom:2px;
}
<div class="files-bar">
<img class="image-thumb flex-item" src="profile_image/2861e205148ccebc01cb9b1d8a4c6b0c.jpg">
<div class="progress">
<p class="image-name">14217596f69f44507b.jpg</p>
<p class="image-size">22 KB</p>
<p class="file-status">File Uploaded Successfully!</p>
<div class="progress-wrap"> <!-- Progress bar -->
<div class="progress-meter"></div>
</div>
<p class="cancel-upload">✖</p>
</div>
<div class="button-cell">
<button class="manage-btn delete flex-item">Delete</button>
</div>
</div>
UPDATE – New snippet using absolute position within a relative positioned container.
Please review the following solution. Instead of using float, I positioned the elements absolute within the files-bar container. This will work in any browser.
.files-bar
{
width: 100%;
max-width: 700px;
margin: 20px auto;
padding: 15px;
overflow: auto;
border: 1px solid #BBBBBB;
box-shadow: 2px 3px 15px #E7E7E7;
position:relative;
}
.delete
{
background-color: #02BFC1;
color: #FFFFFF;
font-family: gothic;
max-width: 75px;
border: 1px solid #02BFC1;
font-size: 10pt;
padding: 10px;
border-radius: 5px;
cursor: pointer;
position:absolute;
right:12px;
}
.image-thumb
{
display: inline;
width: 160px;
height: 120px;
margin-right: 20px;
float:left;
}
.image-name
{
font-size: 17pt;
margin-top: 2px;
}
.image-size
{
font-size: 13pt;
margin: 20px 0;
}
.file-status
{
display: block;
font-size: 12pt;
margin-bottom: 10px;
}
.progress {
position:absolute;
left:185px;
}
.progress-wrap
{
width: 300px;
height: 20px;
color: #111;
height: 5px;
margin-top: 5px;
}
.progress-meter
{
max-width: 300px;
height: 5px;
background: #02BFC1;
}
.up
{
margin-left: 30px;
}
.cancel-upload
{
position:absolute;
right:4px;
bottom:2px;
}
<div class="files-bar">
<img class="image-thumb" src="profile_image/2861e205148ccebc01cb9b1d8a4c6b0c.jpg">
<div class="progress">
<p class="image-name">14217596f69f44507b.jpg</p>
<p class="image-size">22 KB</p>
<p class="file-status">File Uploaded Successfully!</p>
<div class="progress-wrap"> <!-- Progress bar -->
<div class="progress-meter"></div>
</div>
<p class="cancel-upload">✖</p>
</div>
<button class="manage-btn delete flex-item">Delete</button>
</div>

Answer 2

Layout Problem Solved!
The problem was that I wanted to put image on the left and other contents to the right of the image.
But there was too much use of floats, clear and display it was confusing also code was improper. And even though using them I was not getting the proper output. As the 'paragraph' element was also behind the image due to floats.
So, after some more trials I achieved that layout I wanted without using 'position' and too much of floats and clear.
What I Applied:
First, Floated the image to the left.
Put all of the other content below image inside a div class named 'rest'.
Floated 'rest div' to the left too.
Floated delete button to the right.
At last I've applied Clear Fix for "files-bar div."
It was simple that's it. All other elements adjusted itself. I just needed to put all other contents inside a div element and float it.
Updated HTML:
<div class="files-bar">
<button class="delete">Delete</button>
<img class="image-thumb" src="profile_image/1777859bb71d37aec3.jpg">
<div class="rest">
<p class="image-name">14217596f69f44507b.jpg</p>
<p class="image-size">22 KB</p>
<p class="file-status">File Uploaded Successfully!</p>
<p class="cancel-upload">✖</p>
<div class="progress-wrap">
<div class="progress-meter"></div>
</div>
</div>
</div>
Default HTML's CSS has been removed which is also known as 'Doctor CSS'
Updated CSS:
.files-bar
{
width: 100%;
max-width: 600px;
padding: 15px;
border: 1px solid #BBBBBB;
box-shadow: 2px 3px 15px #E7E7E7;
}
.files-bar:after
{
clear: both;
content: '';
display: block;
}
.image-thumb
{
float: left;
width: 160px;
height: 120px;
margin-right: 20px;
}
.rest {float: left;}
.delete
{
float: right;
width: 100px;
background-color: #02BFC1;
color: #FFFFFF;
font-family: gothic;
max-width: 75px;
border: 1px solid #02BFC1;
font-size: 10pt;
padding: 10px;
border-radius: 5px;
cursor: pointer;
}
.image-name {font-size: 17pt;}
.image-size
{
font-size: 13pt;
margin: 20px 0;
}
.file-status
{
display: inline-block;
font-size: 12pt;
margin-bottom: 15px;
}
.progress-wrap
{
width: 300px;
height: 20px;
color: #111;
height: 5px;
}
.progress-meter
{
max-width: 300px;
height: 5px;
background: #02BFC1;
}
.cancel-upload
{
padding: 5px;
float: right;
cursor: pointer;
}