Arranging icons at the bottom of the post with a text box that changes dynamically

My challenge is that when the content in a box overflows, the box size increases and pushes the icons out of place. I want to ensure that the icons remain in a fixed position. This is how it currently looks:

The comment, delete, and likes count end up on the side instead of where I want them to be, even with more content added.

Below is the CSS for the box:

.main-content{
    margin-top: 20px;
    width: 100%;
    min-height: 100px;
    background: #fff;
    border-radius: 15px;
    position: relative;
}

And here are the styles for the icons:

.fa-comment {
    float: right;
    margin-top: 67px;
    margin-right: 15px;
    font-size: 24px;
    cursor: pointer;
    color: #69f;
}
.likes{
    padding-left: 20px;
}
.fa-heart-o{    
    transition: 0.5s;
    margin-top: 60px;
    color: #FF6699;
    font-size: 24px;
    float: right;
    margin-right: 15px;
    cursor: pointer;
}

.fa-heart{  
    transition: 0.5s;
    margin-top: 60px;
    color: #FF6699;
    font-size: 24px;
    float: right;
    margin-right: 15px;
    cursor: pointer;
}

.fa-trash-o {   
transition: 0.5s;
    margin-top: 67px;
    color: #ABA9A9;
    font-size: 24px;
    float: right;
    margin-right: 15px;
    cursor: pointer;

}
.icons{
    float: right;
    margin-right: 0%;
    margin-top: 1%;
}

I'm unsure whether to use CSS or JS to address this issue, but any assistance would be appreciated.

javascriptjqueryhtmlcss

Answer №1

To ensure proper layout, consider adding a clearfix element after the comments block. For instance:

<div class="content-wrapper">
... 
Your content goes here
...
<div class="clear-fix"></div>
</div>


<style>
.clear-fix{
 clear:both;
}
</style>

You may also utilize this block-style template: jsfiddle

Answer №2

Perhaps you are making this more complicated than it needs to be.

Here is a reference point: http://jsfiddle.net/Y6HSB/17/

Start by organizing your DOM structure, keeping it tidy and straightforward.

HTML:

<div class="comment">
  <div class="comment-content">
    <div class="image-holder">
      <img src="">
    </div>
    <p>The comment text could vary in length but will adjust automatically without causing layout issues when the structure is clean with proper floating elements and clear fixes.</p>
  </div>
  <div class="comment-actions">
      <a href class="likes">0 Likes</a>
      <a href class="comment"><span class="fa fa-comment">comment</span></a>
    <a href class="delete"><span class="fa fa-trash-o">delete</span></a>
  </div>
</div>

Once the DOM is structured well, apply minimal styling for the basic layout.

CSS: (LESS OR SCSS for simplicity)

body {
    background: #888;
}

.comment {
    background: #fff;
    padding: 10px;
    border-radius: 10px;
    .comment-content {
        margin-bottom: 10px;
        .image-holder {
            float: left;
            width: 60px;
            height: 60px;
            border: 1px solid #ccc;
            margin-right: 10px;
        }
    }
    .comment-content:after {
        content: ".";
        display: block;
        clear: both;
        visibility: hidden;
        line-height: 0;
        height: 0;
    }

    .comment-actions {
        text-align: right;
        a {
            display: inline-block;
        }
    }
}

Customize as needed, but starting step by step can help achieve the desired layout before adding visual styles.

Cheers!

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

How to make an input blur in Angular 2 when a button is clicked?

Is there a way to blur an input field by pressing the return button on a mobile native keyboard? Here is an example: <input type="text" #search> this.search.blur() //-- unfocus and hide keyboard ...

javascriptangulartypescript

How can one create a function that delays the execution of code until AJAX data is received

I developed a CKEditor plugin that fetches data via ajax to create RichCombo functionality. The plugin functions correctly, however, when there are multiple instances of the editor on a single page, each plugin ends up sending its own ajax request, leading ...

javascriptckeditor4.x

Subsequent jquery functions fail to work following a smooth ajax operation

MODIFY JQUERY-AJAX REQUEST CODE: <script type="text/javascript"> $(document).ready(function(){ $(".form").submit( function(e) { e.preventDefault(); var form = $(this); var div_add_comment = $(form).parent(); var div_comments = $(div ...

phpjqueryajaxjquery-selectors

Enabling and disabling contenteditable functionality on a div element in Angular

Issue I am facing an issue while trying to bind a boolean to the contenteditable directive of a div. However, it seems that this binding is not working as expected. Error Message: The 'contenteditable' property is not recognized as a valid p ...

javascriptangular

Three.js- I am having trouble with my shadow rendering, as lots of black lines are appearing everywhere instead of the shadows showing

Having recently delved into Three.js, I managed to add shadows to my model with the help of some knowledgeable individuals. However, upon the light hitting the model, numerous lines appear, causing me to question whether it's due to my poor modeling s ...

javascriptthree.js

Encountering connectivity issues with MongoDB client and struggling to insert data while utilizing promises

Currently, I am experimenting with nodeJS and encountering an error when trying to establish a connection to the MongoDB Client. I have implemented promises for improved readability but am facing issues connecting. The code involves connecting to the datab ...

javascriptmongodb

How can I access an object in ng-model in AngularJS?

When a user selects a client from the list, I want to display the client's ID and country. Currently, I can display the entire selected object but not the specific client details. <label class="control-label red">Client</label> ...

javascriptphpangularjslaravel

Building unique CSS classes with Material UI v5 theme - A step-by-step guide

Incorporating Material UI v5 into my application has been a smooth process, except when it comes to using react-d3-tree for rendering SVG tree charts. This library allows for custom CSS class names to be added to the <path> elements that connect the ...

cssreactjsmaterial-ui

The hidden overflow seems to be inconsistently effective

I've been working on creating some buttons with a rollover state. I have an image inside a div with overflow:hidden to hide the inactive state, but sometimes it doesn't work properly. What's even stranger is that when I inspect the page usi ...

htmloverflowcss

Customize hoverIntent to support touch events on mobile devices

Hello everyone. I've encountered an issue with hoverintent.js, a jQuery plugin that handles mouseOver events differently than usual. I am facing constraints where I can only modify the JavaScript of this plugin, but I need it to be compatible with to ...

javascriptjquerymouseeventmouseoverhoverintent

Issue with Vue Multiselect auto-suggestion functionality

I've been utilizing the [vue-multiselect] library for my project. [1]: https://www.npmjs.com/package/vue-multiselect. Within a form, I have multiple multiselect dropdowns. The issue I'm facing is with the browser's autocomplete feature. I&a ...

javascriptvue.jsautocompletemulti-selectvue-multiselect

Exploring the depths of JSON using @attributes and @association in the realm of JavaScript and AngularJS

Currently, I am working on a project that involves utilizing an API for data retrieval, updates, and deletions. The API in question is the prestashop API. While I have managed to retrieve data and update certain items successfully, I encountered an issue. ...

javascriptangularjsjsonweb-servicesprestashop

Javascript conditional testing

I need help coding a <div> to display only if the numeric input is 18 or above and the YO option is chosen. Any guidance on this would be highly appreciated. See the code snippet below. <input type=numeric id=ageSelf ng-model="ageSelf" style="c ...

javascriptjqueryif-statement

Vue - Continue to fetch all items asynchronously within a for loop

I am facing a challenge where I have an array of data that needs to be fetched using a for loop. However, I want to fetch this data asynchronously to make multiple calls at the same time. Additionally, once all the data has been fetched, I need to perform ...

javascriptvue.jsaxiosfetch

Tips for getting information from firestore by implementing a where clause specific to a field within an object?

In my React Native project, I am utilizing Firebase Firestore as the backend database. I have successfully retrieved data from the database using the following code: unsubscribe = firebase.firestore().collection('messages').where('user&apos ...

javascriptfirebasereact-nativegoogle-cloud-firestorereact-native-firebase

Automating the process of submitting a checkbox

Displayed below is a mix of HTML and JavaScript: <form method = "post" style="display: inline;" name="thisform<?php echo $employee->id; ?>"> <input type="hidden" name="user" value="<?php echo $employee->id; ?&g ...

phpjavascripthtmlforms

Align two lines of text in the center of a table

I need assistance with creating a table in HTML for an email. I would like to display a two-lined text, where the top line is formatted in bold. <table style="width:100%"><tr > <td style="background-color:#000000;color:#fff;font-fam ...

htmlemailhtml-tablehtml-email

Highcharts still unable to display series data despite successful decoding efforts

After receiving JSON decoded data from the server and using $.parseJSON to decode it, I am assigning it to the series in Highcharts. Although there are no console errors, the chart refuses to display. Below is the code snippet: <!DOCTYPE html> < ...

jqueryjsonhighcharts

Showing pdf documents without relying on third-party software

Within my Angular application, I have integrated the following snippet into an HTML template: <embed src="../assets/AOK_T2DM.pdf" style="width: 100%;height: 500px" type="application/pdf"> The representation of this code ...

htmlcssangulartypescriptpdf

Tips for ensuring Marketo forms are responsive when integrated into a WordPress website

We are currently using Wordpress for our responsive website. Within the site, we have integrated Marketo forms (a marketing automation system) with custom CSS for styling. The issue we are facing is that while the forms appear fine on desktops, they cause ...

htmlcsswordpressformsmarketo