HTML & CSS divs are not in the same height column wise

[sabsac]

Please check attached html and css files.The 3 divs are not arranged at the same height from top.what is changes required in my csss to bring the 3 column/divs at the same height?

 

[sabsac]

I want to close this thread. I have found the solution by reviewing my code.

 

[Deleted member 2829]

If HTML does not look the way you expected, I recommend running it through a validator such as https://validator.w3.org/
This at once reveals that you are not closing all your <div> tags. Having fixed that, the 3 div's are now neatly lined vertically which is a bit of progress. Now, on to the CSS.

There is also a CSS validator at https://jigsaw.w3.org/css-validator/ but this reports no errors in your CSS. Which rather surprises me because on line 153 there is a spurious start comment tag, /* Apparently this is being simply ignored, but I'd take it out for good measure.

Now why are they underneath each other rather than next to each other ? Your basic error is that you put the display:flex inside the divs. It needs to go into a container around these divs. Try this

.cont
{
    display: flex;
}

.row
{
    margin-top: 5%;
    justify-content: space-between;
}

with

<div class="cont">
...
</div>

around your 3 divs (and make sure you terminate all 3 of them !)

Not sure what the justify-content: space-between; is supposed to achieve, I don't see it making a difference. If you want some space between the 3 divs, add for example margin:10px to the .row class.

 

[Deleted member 2829]

Seems my advice came in too late 😐 Hopefully there is still something useful in it.