CODEWITHSUNDEEP
htmlcss
AhmadWabbi
AhmadWabbi

Reputation: 2197

Vertical flow layout in html and CSS

I have this simple HTML page:

.outer {
  width: 320px;
  height: 560px;
  background-color: gray;
  overflow: auto
}
.inner {
  float: left;
  background-color: pink;
  padding: 10px 10px 10px 10px;
  margin: 10px 10px 0px 10px;
  max-width: 60%;
}
.inner2 {
  float: right;
  background-color: pink;
  padding: 10px 10px 10px 10px;
  margin: 10px 10px 0px 10px;
  max-width: 60%;
}
<div class="outer">
  <div class='inner'>a a a</div>
  <div class='inner'>a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a</div>
  <div class='inner'>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
  <div class='inner'>iiiiiiiii iiiiiiiiiii</div>
  <div class='inner2'>iiiiiiiinnnnnnnnnnnnnnniiiii</div>
</div>

The result is:

enter image description here

I need to arrange the divs in a vertical flow layout using CSS in a way similar to a chatting program: some divs to the left and some to the right. I have two questions regarding my code:

1- How can I force the second div to pass to a new line?

2- How can I solve the problem of the third div, i.e. force a very long line without spaces to be warped around, just like the second div?

Upvotes: 1

Views: 1049

Answers (2)

dippas
dippas

Reputation: 60563

How can I force the second div to pass to a new line

  • you need clear:both for inners

How can I solve the problem of the third div, i.e. force a very long line without spaces to be warped around, just like the second div?

  • use word-wrap:break: break-word

    I simplified your code, removing some unnecessary code 

.outer {
  width: 320px;
  height: 560px;
  background-color: gray;
  overflow: auto
}
.outer > div {
  word-wrap: break-word;
  padding: 10px;
  margin: 10px;
  max-width: 60%;
  clear: both
}
.inner {
  float: left;
  background: pink
}
.inner2 {
  float: right;
  background: lightblue
}
<div class="outer">
  <div class='inner'>a a a</div>
  <div class='inner'>a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a</div>
  <div class='inner'>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
  <div class='inner2'>iiiiiiiinnnnnnnnnnnnnnniiiii</div>
  <div class='inner'>iiiiiiiii iiiiiiiiiii</div>
  <div class='inner2'>iiiiiiiinnnnnnnnnnnnnnniiiii</div>
</div>

Upvotes: 1

Sebastian Brosch
Sebastian Brosch

Reputation: 43574

Try the following solution using flexbox:

.outer {
  display:flex;
  flex-direction:column;
  width: 320px; 
  height:560px; 
  background-color:gray; 
  overflow:auto;
}
.inner {
  align-self:flex-start;
  background-color: pink;
  padding:10px 10px 10px 10px;
  margin:10px 10px 0px 10px;
  max-width: 60%;  
  word-wrap:break-word;
}
.inner2 {
  align-self:flex-end;
  background-color: pink;
  padding:10px 10px 10px 10px;
  margin:10px 10px 0px 10px;
  max-width: 60%;    
}
<body>
  <div class="outer">
    <div class='inner'> a a a  </div> 
    <div class='inner'> a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a </div>
    <div class='inner'> aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa </div> 
    <div class='inner'> iiiiiiiii iiiiiiiiiii </div>
    <div class='inner2'> iiiiiiiinnnnnnnnnnnnnnniiiii </div>
  </div>
</body>

Explanation: You can use flexbox to get all bubbles in a own row. With self-align you can define the sender and receiver side of the bubble. So you have not to use float. To break a long word without spaces you can use word-wrap:break-word;.

Upvotes: 2

Related Questions