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

Switching icon images using JQuery based on state changes

I'm attempting to switch the background image of my webpage's "body" element when the user toggles between playing and pausing music icons. This is what the CSS for the "body" element looks like: body { background: url('https://s3-us-wes ...

javascriptjqueryhtmlcss

Explore various date formats using the datepicker functionality

I'm dealing with the code below: <script type="text/javascript" language="javascript" src="~/Scripts/bootstrap-datepicker.min.js"></script> <script type="text/javascript" language="javascript" src="~/Scripts/locales/bootst ...

javascriptc#jquerydatepicker

Content in React Router may fail to load when refreshing the page, navigating forward, or manually

I recently started using React and I'm getting familiar with React Router. I divided my application into two main routes because each uses a different style: the Splash path is for when the user first enters, which contains the Splash screen, Login, a ...

javascriptreactjsreact-router

PHP Timer for Keeping Track of Time

Is it feasible to develop a timer using PHP that triggers an action after 60 seconds? I am looking for a countdown effect where the timer starts at 60 and decreases to 0. Ideally, I would like to refresh the corresponding div element to simulate the countd ...

phpjavascripttimercountdown

What is the purpose of applying the two unique class names (root and disabled) to the DOM in order for it to function correctly?

When it comes to customizing components using material-ui, the process can be a bit tricky. Here's how you can do it: const styles = { root: { '&$disabled': { color: 'white', }, }, disabled: {}, // This is i ...

cssreactjsmaterial-uijsscss-specificity

Ajax Multidimensional Array Response

Currently, I am attempting to retrieve a Multiarray response from an ajax Post JSON request. After numerous attempts, I am hopeful that I can get assistance here... JS AJAX RESPONSE var data = { "myid": "1234" }; $(".the-return").html(""); $.ajax({ ...

javascriptphparraysajaxjson

How to incorporate a routing file within another routing file in Node.js

I have structured my routes as follows: / /business /business/stuff1 /business/stuff2 /business/admin For /business, I am using a separate file for the routing and functions. And similarly, for /business/admin, I also want to use a separate file f ...

javascriptnode.jsexpress

Is there a way for me to incorporate the input parameter value passed to a JavaScript function into the popup that is being opened by the function itself?

I am not very proficient in PHP and JavaScript, and I'm facing an issue while trying to pass a value from a main page to a popup page that is defined within this main page. To provide more context: In my account.php page, there is a link like this: ...

javascriptphpjquery

Review Limited Screen Size for a Smartphone Website

I have been working on optimizing a mobile website and I utilized CSS to adjust the layout design for screen widths between 150px and 480px. However, during testing on an actual phone, the desktop layout is appearing instead of the custom layout set with C ...

javascriptphpcsshtml

"Utilizing Node.js to access modules with their absolute

My directory structure is as follows: -- app/ |- models/ |- user.js |- config.json I am trying to make my user.js file require the config.json. Currently, I am using require('/config') but it doesn't seem to be working. Can som ...

javascriptnode.jsexpressdirectory

Displaying HTML Tags in jQuery JSON Response

Whenever I execute the following code: <html> <head> </head> <body> <?php $value = isset($_GET['send_request']) ? $_GET['send_request'] : false ; if ($value) { echo $value; return ...

phpjqueryajax

Having trouble utilizing JQuery to toggle the visibility of the div closest to a checkbox

Currently, I am utilizing Ruby on Rails along with the Cocoon Gem for generating dynamic forms. Specifically, users are able to add or remove their Education details using this form. Here is an example of how my form appears: <div class='nested-fi ...

jquery

What is the main object used in a module in Node.js for global execution?

Node.js operates on the concept of local scope for each module, meaning variables defined within a module do not automatically become global unless explicitly exported. One question that arises is where a variable declared in a module file belongs in term ...

javascriptnode.jsscope

Acquire information asynchronously in JavaScript while inside a for loop

Recently, I've been exploring this particular function snippet: function add_cnh(arr_clelem){ var id=arr_clelem.getElementsByClassName("present")[0].id; var date=arr_clelem.getElementsByClassName("present")[0].getAttribute('date'); v ...

javascriptajaxasynchronousprototypejs

Looping through RenderPartial with jQuery variables

I'm struggling to find a solution to this issue! On my page, there is a loop that calls a RenderPartial foreach(var item in Items) { Html.RenderPartial("Graph", item) } Within this RenderPartial, I am generating a graph var newGraph = new Grap ...

jquery

Is there a way to prevent the slide-out bar from automatically hiding when selecting an item from its list?

I am facing an issue with my dashboard that has a slideout sidebar. Whenever I press the toggle button, the sidebar slides out as expected. However, when I click on any tab within the sidebar, it hides again. I only want it to hide when toggled. My code is ...

javascriptjqueryhtmlcss

Transforming the setting into redux using setTimeout

I am currently working with the following context: interface AlertContextProps { show: (message: string, duration: number) => void; } export const AlertContext = createContext<AlertContextProps>({ show: (message: string, duration: number) =&g ...

javascriptreactjstypescriptreduxreact-redux

How to effectively send data via POST request in ASP.NET to ensure that images are properly displayed on the form

Case Study : An ASP.NET web application includes a page called ShowDesign.aspx The ASPX page is equipped with various controls. Within the page, there's a DIV element where images are dynamically loaded from the code behind. The structure of the DIV ...

asp.netjqueryposthttp-getimageurl

Access your login page with a nodejs mongoDB connection

After successfully sending username, password, and email through postman, the information gets added to the MongoDB schema. However, on the login page in React, it doesn't seem to work correctly. Any assistance would be greatly appreciated. Thank you. ...

javascriptnode.jsreactjsmongodbexpress

Guide on displaying an X mark on a checkbox in AngularJS when the ng-disabled value is set to true

Is there a way to display an X mark in red on checkboxes when the ng-disabled condition is evaluated as true? I am a beginner in Angular.js and would appreciate any assistance. Here is what I have attempted so far: if (module.Name === 'val1' || ...

javascriptcssangularjscheckbox