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

Is it possible to place an open div panel between two tweets?

I'm in the process of developing a UI with Twitter feeds. I want to create a feature where a panel can be opened between two tweets, causing the tweet below to shift downwards. This function is commonly seen in tweet clients like TweetBot; as each new ...

javascriptjqueryhtmltwitter

What steps can be taken to resolve the Angular error stating that the property 'bankCode' is not found on type 'User' while attempting to bind it to ng model?

I'm encountering an issue with my application involving fetching values from MongoDB and displaying them in an Angular table. I've created a user class with properties like name and password, but I keep getting errors saying that the property doe ...

htmlangulartypescriptcompiler-errorsngmodel

Tips for detecting the height of a row with 2 columns in CSS

I am attempting to create two text/image boxes side by side, where one box dictates the height of both on desktop. In this scenario, the leftcol box should expand its background color to match the size of rightcol and center the content. On mobile devices, ...

htmlcssflexbox

Adding one class at a time, with each new class being added every second

My goal is to add classes one by one [test0 test1 test2] up to 10, with each class being added after one second. $('.rating-block').AddClass('test0 test1 test2 ... test10' ); I am experimenting with the following code, but I don' ...

jqueryhtmlarrays

Storing user input in an existing text file using ASP.NET MVC

What steps should I take to store user form input from a view into an already existing text file using the ASP.NET MVC framework? ...

c#htmlasp.net-mvc-4

Video not visible in program (CSS, EXPRESS)

I am struggling to add a video to my page. The default method of creating a path for it isn't working for me. I believe I need to place the path somewhere else, but I'm not sure where. I have attempted to include the video in the same folder as ...

cssnode.jsexpress

Calculate the quantity of rows within a specific div container

Looking at the image provided, there are multiple divs inside a main div. I am trying to figure out how many rows the main div contains. For instance, in this particular scenario, there are 5 rows. It is important to mention that the inner div is floated ...

javascriptjqueryhtmlcss

Having difficulty customizing the color of bullet points within a list

I've been attempting to update the color of the list points without success. Can you help me troubleshoot? <div class="mobile-menu" id="mobile-menu"> <div id="mobile-menu-links"> <h4>General:</h4> ...

htmlcss

What could be causing WidgEditor, the JavaScript text editor, to fail to submit any values?

After clicking submit and attempting to retrieve text from the textarea, I am encountering a problem where the text appears blank. The reason for this issue eludes me. function textSubmit() { var text = $("#noise").val(); console.log(text); consol ...

javascripthtmltextareatext-editor

As I spun four images along the outer edge of a circular border, one image came to a halt at 90 degrees, revealing its content. Now, I am looking to enlarge that particular

I managed to rotate four images around a circular border and stop one image at every 45-degree angle. However, I am struggling to enlarge the image that stops at 90 degrees on the website while still showing the content of the respective image when it reac ...

javascripthtmlcssbootstrap-5

``Change the color of the sections in a 3D pie chart on a Highcharts

I am looking to create a custom pie chart with two different colors: one for the main surface and another for the sides. Currently, I can only configure the lighter blue color for the main surface, but I would like to also change the darker blue color for ...

javascriptcsshighcharts

Dynamic content display using AJAX

Having already tried to find a solution through Google with no success, I am at a loss. I have articles where a paragraph is initially displayed, followed by a "read more" link which reveals more content using JavaScript. However, this approach may slow do ...

phpjavascripthtmlajax

Utilize the return function in a separate PHP file

I wanted to create a basic login form as a way to dive into learning php. After setting up the form, I wrote a function that sends a query to a MySQL database to fetch the username and password (stored in md5 encryption) for comparison with user input. T ...

phphtmlmysql

Applying CSS rules from an array to elements by looping through

I'm looking for a way to allow users to input CSS styles and have those styles applied to the last selected element, which is determined by the "rangeselector" variable. Currently, the code selects the correct element, but only the first CSS rule is b ...

javascriptjquerycss

How to resolve CORS error when using custom request header in Django with JavaScript and redirecting to OPTIONS request?

I am currently working on building an API library using Django. This API will be accessed by javascript, with the Django-API and javascript running on separate servers. The Django API library requires a custom request header from the javascript front end, ...

javascripthtmljquerydjangodjango-rest-framework

Using Python to Detect a Late-Rendered Image on a Webpage Using JSON

I'm currently in the process of reviewing a list of URLs to verify the presence of a specific image. So far, I have experimented with both selenium and beautiful soup but haven't been able to crack it. The appearance of the image is represented ...

pythonhtmljsonweb-scraping

Div Boxes at the Center

I've searched extensively for a solution to my unique problem, but haven't been able to find one that fits. I have 4 div boxes with a max width of 50% and a min width of 400px. When the site is viewed on a smaller screen, I want the boxes to alig ...

htmlcss

placing an image within a frame

I am having trouble aligning two divs side by side. I want to create a white background box with the date displayed in the top right corner, and I want the image to be at the same height as the date. Below is the code I have written: #boxx { background-c ...

csshtmlposition

The background color in CSS remains stagnant, refusing to change despite

Can someone help me figure out why the background color isn't changing in my simple code? I've double-checked that the external CSS is properly linked because the text color of h1 is changing. <!DOCTYPE html> <html> < ...

css

Experiencing difficulty moving information from React form to DATA.txt file through Express

I've tried various things, but I keep encountering the same error. Changing the file path didn't seem to make a difference. The current structure of my project is as follows: {nodemodules,public,scr (containing all files including App.jsx),DATA. ...

javascripthtmlreactjsnode.jsexpress