Similar HTML code aligning differently

HTML-CSS
1

Hi,
I created two simple HTML pages expecting the same result but browser is displaying them differently.
Can somebody explain me why?

First HTML page:

<!DOCTYPE html>

<html>

<head>

<style>

.column {
   float: left;
   width: 450px;
   height: 500px;
   padding: 5px;
}

</style>

</head>

<body> 

<h1> Animals and Birds </h1>

<div class="row" id="Box-Container">

<div>
   <img class="column" src="https://images.pexels.com/photos/145939/pexels-photo-145939.jpeg" alt="Tigers's Photo">
</div>

<div>
   <img class="column" src="https://images.pexels.com/photos/40984/animal-ara-macao-beak-bird-40984.jpeg" alt="Birds's Photo">
</div>

<div>
   <img class="column" src="https://images.pexels.com/photos/247502/pexels-photo-247502.jpeg" alt="Lions's Photo">
</div>

<div>
   <img class="column" src="https://images.pexels.com/photos/47547/squirrel-animal-cute-rodents-47547.jpeg" alt="Squirrel's Photo">
</div>

</div>

</body>

</html>

Second HTML page:

<!DOCTYPE html>

<html>

<style>

.column {
   float: left;
   width: 450px;
   height: 500px;
   padding: 5px;
}

</style>


<body> 

<h1> Animals and Birds </h1>

<div class="row" id="Box-Container">

<div class="column">
   <img src="https://images.pexels.com/photos/145939/pexels-photo-145939.jpeg" alt="Tigers's Photo">
</div>

<div class="column">
   <img src="https://images.pexels.com/photos/40984/animal-ara-macao-beak-bird-40984.jpeg" alt="Birds's Photo">
</div>

<div class="column">
   <img src="https://images.pexels.com/photos/247502/pexels-photo-247502.jpeg" alt="Lions's Photo">
</div>

<div class="column">
   <img src="https://images.pexels.com/photos/47547/squirrel-animal-cute-rodents-47547.jpeg" alt="Squirrel's Photo">
</div>

</div>

</body>

</html>
2

i think it because every browser rendered it differently.

please read the link below.

3

The code is not similar.

This first one you have a set of elements (divs) which each sit on top of each other – a div is a block element that takes up 100% width. Inside each of those you have one element (img) which has that style applied (float, height, padding). You have lots of elements that will stack on top of each other each with one column inside.

The second on you have one block element that takes up 100% width (the div with the class row). Inside that you have four elements which would normally have 100% width but you have specified differently and told them to float. So one perent element with four columns.

1 Like
4

This answer makes sense to me. As per this, when i run the first one, i could see one picture on top of the other. And when i run the second i should see all the four pictures with 450pxx500px side by side.
But i see exact opposite result.

I tried these both in Chrome and Firefox and the results are same.

5

Float is a hack that was used when the only actual layout primitives in CSS were tables (now there is CSS Grid (for grids) and Flexbox (for one-dimensional things like menus)). And as part of the hack, to get columns working as intended you have to clear the floats. Otherwise float behaves as intended (it is designed to allow you to put images in text and have the text flow around it. You can’t just do what you’re trying to do there, Google “clearfix”.

6

Adding width and height to 100% for images fixed the issue.

<!DOCTYPE html>

<html>

<style>
.column {
   float: left;
   width: 450px;
   height: 500px;
   padding: 5px;
}

img {
width: 100%;
height: 100%;
}
</style>

<body> 

<h1> Animals and Birds </h1>

<div class="row">

<div class="column">
   <img src="https://images.pexels.com/photos/145939/pexels-photo-145939.jpeg" alt="Tigers's Photo">
</div>

<div class="column">
   <img src="https://images.pexels.com/photos/40984/animal-ara-macao-beak-bird-40984.jpeg" alt="Birds's Photo">
</div>

<div class="column">
   <img src="https://images.pexels.com/photos/247502/pexels-photo-247502.jpeg" alt="Lions's Photo">
</div>

<div class="column">
   <img src="https://images.pexels.com/photos/47547/squirrel-animal-cute-rodents-47547.jpeg" alt="Squirrel's Photo">
</div>

</div>

</body>

</html>
7

Without the image width, the images go to their actual size, so yes, you need a width. But it isn’t a solution though, for a few reasons:

The floats aren’t cleared, so the layout will still break - at the minute you have a very simple set of HTML, but once you start adding more things into the columns and adding more elements after the rows things will break down very fast.

You’ve set the width of each column to 450px. The width of row is almost always less than that (your browser window needs to be at least 1840px - 450 + the padding of 5px on both sides). So you just get wierd overlaps without the image width, and with the width the columns breaking to the next line. If I set the width of row to 1840px it sits properly, but that’s not really useful (I need a huge browser window, and if it’s less than that I just can’t look at the images).

Because you’re setting the height, all the images stretch and distort. You don’t need to set the height. Also, what happens once you add in other elements to the columns (text for example).

Again, I need to emphasise that using float for columns is a hack: it doesn’t work properly unless you use clearfix (at the minute this won’t be apparent, but you only have that one thing on the page, try adding more stuff after the row element). flexbox or grid (depending on usecase) are far better.

1 Like
8

HI Dan, Its very clear and got your point. Thanks a lot for your valuable replies.