Why aren't these div elements aligning with each other?

I am facing challenges in formatting these divs.... I have added borders around the divs to highlight the issue... I am aiming to align these divs similar to the second image, and I am puzzled as to why the top div is not aligning properly. My goal is for it to expand all the way over until it reaches the profile photo div, without increasing its current height. The main message should be able to fit anywhere that is not the profile picture or the name plate. I am confused as to why the chat is overlapping with the nameplate.

If my explanation is unclear, the first image shows the current behavior, while the second image depicts my desired outcome.

Here is the current layout:

https://i.sstatic.net/MvqHg.png

This is the desired layout:

https://i.sstatic.net/B6aOi.png

.chat{
border: 2px solid #73AD21;  
font-weight:100;
color:#ffffff;
letter-spacing:0pt;
word-spacing:1pt;
font-size:300%;
text-align:right;
font-family:Helvetica Neue, Helvetica Ultra Light, Helvetica Light, Helvetica, Roboto, Lucida Grande, Tahoma, comic sans, comic sans ms, cursive, verdana, arial, sans-serif;
line-height:1;
margin: 20px;
padding:0px;
opacity:1.0;
position: relative
}
.newChat{

}
.chatBubble{
    position: relative;
    left:40px;
max-width: 400px;
max-height: 350px;
padding: 5px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
word-wrap: break-word;
height: -webkit-fit-content;
height: -moz-fit-content;
width: -webkit-fit-content;
width: -moz-fit-content;
float: bottom;
}
.speechBubble{
    max-width:100%;
max-height:100%;
}

html, body, .glass {
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.glass::before {
    display: block;
    width: 100%;
    height: 100%;
    background-size: cover;
    content: ' ';
    opacity: 0.4;
}

.glass {
    background: rgba(81, 81, 81, .3);
    position: relative;
    left:40px;
    bottom:0px;
    min-width: 200px;
    min-height: 75px;
    max-width: 400px;
    max-height: 350px;
    padding: 5px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;   
    word-wrap: break-word;
    height: -moz-fit-content;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    float: bottom;
    margin-bottom:10px;
}
.profilePic{
    border: 2px solid #73AD21;
    width: 100px;
    height: 100%;
    left: 0px;
    bottom:0px;
    float: left;
    position: absolute;
}

var thisBubble = $('<div>').addClass('glass').append(
                $('<div>').addClass('nameTag').append(fullName)).append(
                $('<img src="'+ profilePic +'">').addClass('profilePic')).append(               
                $('<div>').addClass('chat').append(message)).appendTo('#MenuBackground');
     setTimeout(function(){thisBubble.fadeOut('slow');}, 10000);
    }   
}
.nameTag{
    border: 2px solid #73AD21;
    font-weight:100;
color:#ffffff;
letter-spacing:0pt;
word-spacing:1pt;
font-size:100%;
text-align:right;
font-family:Helvetica Neue, Helvetica Ultra Light, Helvetica Light, Helvetica, Roboto, Lucida Grande, Tahoma, comic sans, comic sans ms, cursive, verdana, arial, sans-serif;
    position: absolute;
    top:0px;
    right: 5px;
    float: top; 
}

Answer №1

VIEW DEMO Utilizing flexbox for layout is a simple and effective approach. To structure your HTML, follow this format:

<div class='profile'>

    <div class="image"></div>
    <div class="body">
      <header>Lorem Ipsum</header>
      <article>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim aperiam veniam odit in, maxime..</article>
    </div>

</div>

Next, add the following CSS styling:

.profile{
  display: flex;
}

.profile .body{
  display: flex;
  flex-direction: column;
}

.profile .body>article{
  flex-grow: 1;
}

https://i.sstatic.net/O1RDO.png

Answer №2

To achieve this, create individual divs for the text and then use display:inline-block; for both elements.

Another option is to utilize position:absolute for the text, requiring only margin adjustments (although this may vary depending on the context).

Answer №3

<html>
<body>
<div id="" class="pic" style="float:right;background:blue;width:200px;">

      <div class="overlay" style="float:left;width:40%;height:250px;">
      Display Picture
      <img src=""/></div>
      <div id="left-side" style="float:left;width:60%;">
      <div id="LeftPicAbove" class="info" style="background:orange;height:30px;">
        Username
      </div>
      <div id="LeftPicBelow" class="info" style="background:purple;height:220px;">
        Messages go here..
      </div>
      </div>
</body>
</html>

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

Struggling to make the text color change when hovering

On my website, I added a tab called newarrival at the top of the page. When you hover over this tab, I want the text to turn blue to indicate that it's a link. However, despite my efforts, it doesn't seem to be working as expected. You can see th ...

Using ajax to submit a form in CodeIgniter and displaying the returned data in a table view

When I submit a form on the view page, I want the form data to be saved in a database table and displayed without refreshing the page. Below is my view code: <div class="col-md-12"> <div class="row"> <div> <table class="table table-s ...

Angular2: using the #ngFor directive to assign a value to a component field

Here's a component I'm working with: @Component({ selector: "expenses-component", templateUrl: "expenses.html" }) export default class ExpensesComponent { private expenses: [] = [{name: "Foo", amount: 100}, {name ...

Leveraging JavaScript within a Polymer component

I have an object made with polymer: <newfolder-element id="newfolderelement" popupStyle="width: 362px; height: 100px;"> <span class="title">Create a new folder</span> <input type="text" class="ginput" style="width: 350px; padd ...

PHP - Easily send emails with attachments

Below are the codes I am using to send an email with an attachment: if (isset($_POST['submit'])) { @$name=stripslashes($_POST['name']); @$last_name=stripslashes($_POST['last_name']); @$phone=stripslashes($_POST['phone&a ...

What is the best method to invoke a function recursively with a delay of 1 second following the completion of an ajax

I am facing a situation where I need to implement a delay of 1 second after an ajax request is completed, regardless of the outcome. Instead of calling a method every second, I specifically want to call a function 1 second after the ajax request finishes. ...

What is the reason for the disappearance of unordered list bullets when using padding: 0?

Updating an older website that contains numerous unordered lists has presented a challenge. When the padding is set to 0, the display markers on the unordered list disappear. The root cause of this issue was traced back to the CSS setting *{padding: 0; ma ...

How to Disable a Dynamically Generated <li> Element Using jQuery on Click Event

Script Query: Creating <li> Elements Dynamically echo '<div class="pagination"><ul>' . "\n"; // Previous Post Link. if ( get_previous_posts_link() ) { printf( '<li>%s</li>' . "\n", get_previ ...

Expanding the text box in PHP to incorporate new lines

So I have an HTML form where users enter addresses in a text box. The PHP code that processes this input looks like this: $address = $_POST["address"]; echo $address; The output currently comes out as one long line, for example: The Manager, Scotia b ...

I have always wondered about the meaning of " + i + " in Javascript. Can you explain it to

<script> var x,xmlhttp,xmlDoc xmlhttp = new XMLHttpRequest(); xmlhttp.open("GET", "cd_catalog.xml", false); xmlhttp.send(); xmlDoc = xmlhttp.responseXML; x = xmlDoc.getElementsByTagName("CD"); table="<tr><th>Artist</th><th>Ti ...

I struggled to modify the image cropping code to specify a particular image

(I will attempt to explain my issue once again) I came across a script online which can be viewed at this link : Link However, I am having trouble modifying the code to suit my needs. The script currently starts working on image upload, but I want it t ...

Troubleshooting a CSS problem with iPad browsers

I have a specific issue related to CSS on iPad. I am working with a set of sublinks and have defined the styles in CSS as follows: #leftNav .searchBySub {...} #leftNav a.searchBySub:hover {...} #leftNav .searchBySubClicked {...} In my JavaScr ...

Guide on displaying image thumbnails (image grid) on a website using JSP

Looking for advice on populating image thumbnails (image grid) on my website using JSP. Can anyone recommend the most efficient method? Additionally, should I store images in binary format or save their paths as text in the database? ...

Aligning text vertically within an HTML <a> tag block

Calling all CSS experts! I'm struggling with aligning text to the bottom of a block element with a fixed width and height that contains a background image and a title. I've tried using display: table-cell; and vertical-align: bottom; without succ ...

Last item in Material UI Grid container not filling up entire space

I designed a Grid container with 2 Grid columns, each containing 3 elements. However, I am facing an issue where the last element of each column is not appearing at the bottom as intended. What could be causing this problem? For reference, you can view th ...

Submit HTML checkboxes that have not been selected

I have a set of checkboxes that come pre-checked by default. I anticipate that my users may uncheck some, but will probably leave most of them checked. Is there a way to configure the form so that it submits the unchecked checkboxes instead of the checked ...

Trying to figure out how to execute a codeigniter helper function with JQuery AJAX?

I created a handy function in my helper file within codeigniter that formats prices based on the value and currency ID provided. if(!function_exists('format_price')){ function format_price($val,$curency_id=NULL){ $CI ...

Leveraging jQuery or javascript to display json data in a table with multiple columns

My goal is to convert a JSON data into an HTML table that dynamically creates columns based on the content of the JSON. However, I am facing challenges in looping through the JSON and rendering multiple columns when necessary. The desired output for the e ...

What is the best way to add a video to a web page similar to

After updating to the latest version of Firefox 3.5, I noticed something interesting on the Firefox website. There is a video that enlarges and plays when clicked. I'm curious to know if anyone has any insights on how this functionality is achieved. I ...

A TypeError is thrown when attempting to use window[functionName] as a function

I came across this page discussing how to call a function from a string. The page suggests using window[functionName](params) for better performance, and provides an example: var strFun = "someFunction"; var strParam = "this is the parameter"; //Creating ...