CODEWITHSUNDEEP
phphtmlcss
Jack Hales
Jack Hales

Reputation: 1644

CSS Clearing isnt working as expected

So on my profile.php I have a tab that is loaded and displays the recent 10 messages the user has gotten posted on their profile. I am trying display each area in a div then float the user that has posted on the page's image floated to the left of the div. But when I do that the entire divs collapses in a weird way. Like shown here:

enter image description here

So after I had some issues with that I tried to add a clear:both; line of code inside of the image code and this is what it gave me:

enter image description here

Simply I want the divs to all be the same height and the top div to not have so much height, and its confusing me as to why it actually is that height.

Here is the code that runs in the message div:

while ($r = $query->fetch(PDO::FETCH_ASSOC) ) {
          ?>
            <div style="background-color: white; color:black; margin-left:280px; padding:5px; font-family: Sintony; font-size:16px; margin-bottom:5px;">
                <img src="<?=user::idToPic($r['userID'])?>" width="50" height="50" style="float:left;" />
                Test Message

                <div style="clear:both;"> </div>
            </div>

          <?php
        }

This is the browsers output for the first message then the second message

enter image description here

Upvotes: 1

Views: 74

Answers (2)

Sebastian Manuelli
Sebastian Manuelli

Reputation: 191

Change it to min-height: 50px

Upvotes: 1

Sebastian Manuelli
Sebastian Manuelli

Reputation: 191

Put height: 50px; on every div, or just use classes.

Here you go

Upvotes: 1

Related Questions