CODEWITHSUNDEEP
htmlcss
Artemkller545
Artemkller545

Reputation: 999

margin-top doesn't work after clear: both

Hello I am creating a chat UI which looks like this:

img
(source: gyazo.com)

As you can see, each message is a li element now the avatar and the message div are floating left. Now if I don't add clear: both; on the li element, the elements will go one after each other in one line. So after the clear both, when I do margin-top, to create some padding between the message elements, it doesn't do anything unless I add a margin of 500px or something.

<section id="chat-area">
  <section id="users-in-chat">
    <ul>
      <li><img src="images/avatar-big.png"/></li>
    </ul>
  </section>
  <section id="chat-messages">
    <ul>
      <li><img src="images/avatar-big.png" class="message-avatar"/>
        <div class="message"><span>So yeah I am good how are you? I am currently in this shit and i should finish it asap so ill t alk to you laterSo yeah I am good how are you? I am currently in this shit and i should finish it asap so ill t alk to you later</span></div>
      </li>
      <li><img src="images/avatar-big.png" class="message-avatar"/>
        <div class="message"><span>So yeah I am good how are yoly in this shit and i shou later</span></div>
      </li>
    </ul>
  </section>
</section>

And the css:

#chat-messages ul {
    list-style: none;
    padding: 20px;
}

#chat-messages ul li {
    clear: both;
    margin-top: 15px;
}

#chat-messages ul li:first-child {
    margin-top: 0;
}

.message-avatar {
    -webkit-border-radius: 20px 20px 20px 20px;
    border-radius: 20px 20px 20px 20px;

    float: left;
}

.message {

    margin-left: 15px;

    padding: 15px;
    max-width: 70%;
    background-color: rgba(144, 195, 245, 0.3);
    -webkit-border-radius: 0 20px 20px 20px;
    border-radius: 0 20px 20px 20px;

    float: left;
}

What did I do wrong in there?

Upvotes: 2

Views: 275

Answers (2)

Kasumi
Kasumi

Reputation: 104

#chat-messages ul li {
clear: both;
margin-top: 15px;
overflow:hidden;
}

Upvotes: 0

Ash
Ash

Reputation: 2108

Try this:

#chat-messages ul li {
    clear: both;
    margin-top: 15px;
    float: left;
}

Upvotes: 4

Related Questions