Adjusting the width of speech balloon in CSS

This question might seem basic to those who are familiar with CSS (unlike me lol). I'm currently working on incorporating speech balloons into my website using this code from jsfiddle. However, I encountered an issue when the text inside the balloon is short. For instance, in the code provided above, if we change the content of the "bubble you" balloon to something like:

<div class="bubble you">Hi.</div>

You'll notice that the balloon remains on the same horizontal line as the previous one, which looks unattractive and odd. I want the balloons to stack vertically (one below the other) even when the message is brief, such as a simple 'Hi'... What CSS properties do I need to modify or add to achieve this?

htmlcsscss-shapes

Answer №1

Include the CSS property clear: both in the styling for the class .bubble.

See it in action here:

http://jsfiddle.net/uniqueuser/examplelink/1234/

.bubble{
    background-color: #F2F2F2;
    border-radius: 5px;
    box-shadow: 0 0 6px #B2B2B2;
    display: inline-block;
    padding: 10px 18px;
    position: relative;
    vertical-align: top;
    clear: both
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

In this guide, learn the best way to dynamically adjust image height to match the height of any device

I am trying to make sure that the image on the front page of my website fits the height of the screen or device, and resizes responsively without cropping when the device height changes. How can I achieve this? If you need a visual example of what I mean, ...

cssmobileresponsive-designcross-browser

What steps do I need to follow to create a 3D shooting game using HTML5 Canvas?

I'm eager to create a 3D shooter game with HTML5 Canvas, focusing solely on shooting mechanics without any movement. Can anyone provide guidance on how to accomplish this? I've looked for tutorials online, but haven't come across any that m ...

javascripthtmlcanvas

Is it possible to align the second "navbar" div inline with the first "navbar" div?

I am struggling to align the div "nav2" on the same line as "nav1", but it just won't move up. I've tried using float, but it's not working. * { padding: 0; margin: 0; box-sizing: border-box; } body { width: 100%; height: 100vh; } #navb ...

htmlcss

Passing a variable from index.html to a script in Angular

I am attempting to pass the array variable 'series' to the script in HTML. Is there a way to do this? app.component.ts import { Component } from '@angular/core'; @Component({ selector: 'my-app', templateUrl: './app ...

javascripthtmljqueryangular

What advantages does using ImageMagick to resize images offer compared to using CSS?

My Ruby on Rails application has a feature that allows users to upload images. I have discovered that Active Storage can utilize ImageMagick to resize images using this code: model.image.variant(resize: "100X100") However, resizing images can also be ach ...

htmlcssruby-on-railsimage-processingimagemagick

How to override an event in JavaScript when a specific value is entered

I am looking to implement a system with complex conditions. The goal is to have an alert appear when a value is inputted and the button is clicked. First, a confirmation message Have you input ? should be displayed, followed by clicked with input. If no va ...

javascripthtml

Creating Dynamic Videos with PHP and HTML

Trying to display the user-submitted video, but all my attempts failed for some reason: 1. echo "<video width='500px'>"; echo "<source type='video/mp4' src=$var autoplay>"; echo "</video>"; echo "<video width=& ...

phphtmlvideo

Illustration: Fixing a CSS Issue

After implementing Technique #8 from the Nine Techniques for CSS Image Replacement, I am not getting the desired results. Instead of correctly positioned images, the output is not what I anticipated. Here is a link to see for yourself: I made a modificati ...

css

Using AJAX to create an interactive dropdown menu with changing options

I have been working on creating a dropdown menu using Ajax. When hovering over the navigation bar, the menu successfully triggers the Ajax function to display the dropdown options. The issue arises when attempting to navigate to another page (show_activi ...

javascripthtmlcssajax

A complete guide on utilizing *ngFor in Angular to display data rows

I am facing an issue with using *ngFor to create new "rows" for adding new categories dynamically. Although there are no errors displayed when I run the program, the intended functionality is not achieved. I have tried making some modifications but it see ...

htmlcssangular

Alignment of elements in a list at the bottom

I am looking to create multi-level tabs using <li> that grow from bottom to top. Here is the current code I have: div{ width: 200px; border: 1px solid black; } ul{ margin: 0px; padding: 0px; } li{ margin: 2px; width: 20px; display: ...

htmlcss

Photo not completing the table

Hey there, I'm currently working on creating a table to showcase some products but I am struggling with ensuring that the images display at the correct size. Any assistance on this matter would be greatly appreciated. #tbldesktops { width: 100%; ...

htmlcss

"Modify hyperlink attributes to enhance security and optimize user experience

$("a[href*='youtube']").attr('rel', 'prettyPhoto'); Having some trouble targeting links on a page containing "youtube" in the URL. I'm trying to set their rel attribute to "prettyPhoto" so they open in a lightbox window. ...

javascriptjqueryhtml

How can I duplicate or extract all the formatting applied to a specific text selection in Ckeditor?

I am currently utilizing CKEditor version 3.6 within my Asp.net MVC 3 Application. One of my tasks involves creating a Paint format option similar to Google Docs. I am looking to integrate this feature into CKEditor. Is there a way in CKEditor to transfe ...

javascriptasp.netcssasp.net-mvcckeditor

Validating Forms with Jquery across Various Inputs

My HTML page includes multiple dynamically generated forms, ranging from 1 to 4 in number. I am looking for a way to validate each input field when the form is submitted. Below is the code I have: <script type="text/javascript"> $(document).re ...

jqueryhtmlforms

Maintaining Object Position in 2D Transforms

I am trying to create multiple perspective-transformed rectangles in the lower right corner of a canvas by using ctx.transform: ctx.transform(1, 0, -1, 1, 10, 10). My goal now is to adjust the size of the drawing based on a variable scale=n, while keeping ...

javascripthtmlcsscanvastransform

Craft a CSS triangle shape from scratch

Looking at the image of a blue triangle, I am curious about how to recreate it using CSS. Would using a background image be the best approach, or is there a way to achieve this with CSS transforms? I noticed the triangle is on the left side but not on the ...

csstransformtransformation

Combining strings with JQuery

Looking for help with a code snippet <script> function goToDetails($i){ $(function(){ var transValue = $('#trans'+$i).html(); var mileageValue = $('#mileage'+$i).html(); var engineValue = $('#eng'+$i).html ...

phpjavascriptjqueryhtml

Start flicker issue in Vue 3 transition

I have created a carousel of divs that slide in and out of view on the screen. However, I am facing an issue where during the start of each transition, when a new div is rendered (i.e., the value of carousel_2 changes), it appears without the transition-en ...

javascriptcssvue.jstransitionvuejs3

When trying to click the button in Navbar.jsx, I encounter an error when attempting to invoke the setShowCart(true) function

I've encountered an issue while trying to call the setShowCart(true) function in Navbar.jsx. I'm unsure of how to fix this. import React from 'react' import Link from 'next/link'; import {AiOutlineShopping} from 'react-ic ...

htmlreactjstypescriptnext.jsreact-hooks