CODEWITHSUNDEEP
htmlcss
wasp256
wasp256

Reputation: 6242

CSS show elements below each other

I have the following CSS and HTML script:

.chat {
       width: 100px;
       }

       .bubble{
       background-color: #F2F2F2;
       border-radius: 5px;
       box-shadow: 0 0 6px #B2B2B2;
       display: inline-block;
       padding: 5px 10px;
       position: relative;
       vertical-align: top;
       max-width: 200px;
       min-width: 200px:
       word-wrap: break-word;
       font-size: 85%;
       }

       .bubble::before {
       background-color: #F2F2F2;
       content: "\00a0";
       display: block;
       height: 10px;
       position: absolute;
       top: 13px;
       transform:             rotate( 29deg ) skew( -35deg );
           -moz-transform:    rotate( 29deg ) skew( -35deg );
           -ms-transform:     rotate( 29deg ) skew( -35deg );
           -o-transform:      rotate( 29deg ) skew( -35deg );
           -webkit-transform: rotate( 29deg ) skew( -35deg );
       width:  20px;
       }
       .me {
       float: left;
       margin: 5px 45px 5px 20px;
       }

       .me::before {
       box-shadow: -2px 2px 2px 0 rgba( 178, 178, 178, .4 );
       left: -9px;
       }

       .you {
       margin: 5px 20px 5px 45px;
       right: 10px;           
       position: absolute;       
    }

       .you::before {
       box-shadow: 2px -2px 2px 0 rgba( 178, 178, 178, .4 );
       right: -9px;
       }
</style>
</head><body>
<div class="chat">
    <div class="bubble you">test1</div>
    <div class="bubble you">test2</div>
    <div class="bubble me">test3</div>
</div>
</body></html>

But with this scripts elements are overwritten are placed on the same line like this:

    test1(test3 overwrites it)              test2

But what I want is:

    test1
                                            test2
    test3

Does anyone know how to accomplish that?

Upvotes: 0

Views: 2812

Answers (4)

General Charismo
General Charismo

Reputation: 123

Change the .Bubble display to display: block and .Bubble::before position to position: relative as well.

Inline block will place the content anywhere it can fit and since your position is being set to absolute with the previous .bubble (A.K.A test1) the next element is just going where it can which would be vertically aligned to the top relative to other elements. An absolute element doesn't affect a relative positioned element as an extra tid bit.

EDIT

Your min-width tag has a : at the end instead of a ; which is causing it to break both the word-wrap and min-width styling you have. This is actually why it gets so messed up when you change the two things I mentioned. You can't use absolute positioning bottom line because it doesn't work with flow.

My bad, I noticed that above I said to change the .bubble::before tags position to relative, that's used for your speech bubble effect, change the .you position to relative. Then find a different way to right align the bubble, I'll keep looking myself.

Upvotes: 0

ezattilabatyi
ezattilabatyi

Reputation: 357

The problem was position: absolute; on the .me bubbles. Those would always end up on the top-right corner of the closest parent with position: relative; (or the corner of the html if all parents lack that). If you use float on the elements but want them each to appear in new lines then clear: both; does the trick.

These are the changes to the css, I left everything else as it is:

.chat {
    width: 100%;
}

.bubble {
    clear: both;
}

.you {
    float: right;
    /* position: absolute;
       right: 10px; */
}

fiddle

Upvotes: 1

BCDeWitt
BCDeWitt

Reputation: 4773

Remove absolute positioning and swap it out for another solution.

Explanation: Absolute positioned elements do not contribute to the flow.

The first "you" element is currently getting positioned within the normal flow of the document. But, since it doesn't contribute to the flow, the next "you" element uses the same point in the flow to position itself and renders in the same spot.

Now that I've explained, I'll include a slightly modified version of the chosen answer:

.chat {
    width: 100%;
    overflow: hidden; /* clear fix for floats */
}

.bubble {
    clear: both;
}

.you {
    float: right;
    /* position: absolute;
       right: 10px; */
}


.chat {
    width: 100px;
    overflow: hidden;
}

.bubble{
    background-color: #F2F2F2;
    border-radius: 5px;
    box-shadow: 0 0 6px #B2B2B2;
    display: inline-block;
    padding: 5px 10px;
    position: relative;
    vertical-align: top;
    max-width: 200px;
    min-width: 200px:
    word-wrap: break-word;
    font-size: 85%;
    clear: both;
}

.bubble::before {
    background-color: #F2F2F2;
    content: "\00a0";
    display: block;
    height: 10px;
    position: absolute;
    top: 13px;
    -moz-transform:    rotate( 29deg ) skew( -35deg );
    -ms-transform:     rotate( 29deg ) skew( -35deg );
    -o-transform:      rotate( 29deg ) skew( -35deg );
    -webkit-transform: rotate( 29deg ) skew( -35deg );
    transform:         rotate( 29deg ) skew( -35deg );
    width:  20px;
}
.me {
    float: left;
    margin: 5px 45px 5px 20px;
}

.me::before {
    box-shadow: -2px 2px 2px 0 rgba( 178, 178, 178, .4 );
    left: -9px;
}

.you {
    margin: 5px 20px 5px 45px;
    float: right;
}

.you::before {
    box-shadow: 2px -2px 2px 0 rgba( 178, 178, 178, .4 );
    right: -9px;
}
<div class="chat">
    <div class="bubble you">test1</div>
    <div class="bubble you">test2</div>
    <div class="bubble me">test3</div>
</div>

Upvotes: 2

Paulie_D
Paulie_D

Reputation: 114981

Try removing the floats and absolute positioning.

.bubble {
  background-color: #F2F2F2;
  border-radius: 5px;
  box-shadow: 0 0 6px #B2B2B2;
  display: inline-block;
  padding: 5px 10px;
  position: relative;
  vertical-align: top;
  max-width: 200px;
  min-width: 200px;
  word-wrap: break-word;
  font-size: 85%;
}
.bubble::before {
  background-color: #F2F2F2;
  content: "\00a0";
  display: block;
  height: 10px;
  position: absolute;
  top: 13px;
  transform: rotate(29deg) skew(-35deg);
  -moz-transform: rotate(29deg) skew(-35deg);
  -ms-transform: rotate(29deg) skew(-35deg);
  -o-transform: rotate(29deg) skew(-35deg);
  -webkit-transform: rotate(29deg) skew(-35deg);
  width: 20px;
}
.me {
  margin: 5px 45px 5px 20px;
}
.me::before {
  box-shadow: -2px 2px 2px 0 rgba(178, 178, 178, .4);
  left: -9px;
}
.you {
  margin: 5px 20px 5px 45px;
  right: 10px;
}
.you::before {
  box-shadow: 2px -2px 2px 0 rgba(178, 178, 178, .4);
  right: -9px;
}
<div class="chat">
  <div class="bubble you">test1</div>
  <div class="bubble you">test2</div>
  <div class="bubble me">test3</div>
</div>

Upvotes: 0

Related Questions