Move the contents of a div to the right side

One of the issues I am facing is with aligning replies to comments correctly in my comment section. The replies are not aligning properly with the parent comment and it's causing a display problem.

Link to JSFiddle for reference

Here is the CSS code:

.alignleft {
    float: left;
}
.alignright {
    float: right;
}
.comment-icon {
    padding-right: 0px;
    padding-left: 0px;
    width: 60px;
    margin-bottom: 5px;
}

Current display result can be seen here:

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

This is how I want it to look:

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

htmlcsstwitter-bootstrap

Answer №1

Check out the revised Fiddle right over here. Revised JsFiddle

<div class="row responses">

                    <div class="col-sm-10 response-area pull-right">
                        <p class="alignleft">Peter &bull; 2014-12-12</p>
                        <p class="alignright">
                            <span class="badge votes">4</span><a class="comment-vote-up" href="#"><span data-count="1" class="glyphicon glyphicon-thumbs-up up"></span></a></span>
            <a class="comment-vote-down" href="#"><span class="glyphicon glyphicon-thumbs-down"></span></a></p>
                        <hr style="clear: both">
                        he'd
                    </div>
                <div class="col-sm-2 feedback-icon pull-right">
                        <img src="https://cdn3.iconfinder.com/data/icons/ultimate-social/150/34_google_plus-512.png" alt="" class="img-circle"  width="60" height="60"/>
                    </div>
                </div>

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

Angular 1.4.8 Issue: [$injector:modulerr]

I can't seem to identify the main cause of this error. I consistently see a green underline below the word angular in my javascript file. I'm not sure why. (Using Visual Studio Code) HTML <html ng-app="myapp"> <head> ...

javascripthtmlangularjs

Is there a way to change the orientation of the cards so that they move from left to right instead of

I am looking to have my cards displayed from left to right rather than vertically, but I'm struggling to achieve this. I have tried using the float: left property with no success. Below is an example of a single card in my layout. They all follow the ...

htmlcss

PHP query returned no matches

<?php include 'db.php'; $GLOBALS["conn"] = connect(); if (isset($_POST['submit'])) { $ime = $_POST['ime']; $rm = $_POST['rm']; $minpl = $_POST['minpl']; $maxpl = ...

phphtmlmysql

When using ReactJS, hovering over a row in a table should trigger a change in the background color of the corresponding row in another table with the same index

I need to create a feature where hovering over a row in the first table will highlight a corresponding row in the second table. The highlighting should be based on the index of the hovered row. Here is an example: <div> <table> < ...

javascriptcssreactjsstyled-components

Two separate pieces of text converge within a single span

I am facing a challenge with alignment in a bootstrap <span> element. Specifically, I want to align the word "amount" to the left, and the "$" to the right, within the same label. I attempted to nest a <span> inside another <span> and app ...

htmlcsstwitter-bootstrap

No feedback received from JSON

Hi, I'm having trouble receiving JSON response using JavaScript. My goal is to display the JSON data as a treeview. index.html: <!DOCTYPE html> <html> <head> <title>JSON VIEW</title> <link href="https:// ...

javascripthtmljsontreeview

Having Difficulty Applying a Background Color to a Class in Bulk

I am working on a unique HTML canvas for pixel art, which is created using a table made up of various divs all sharing the "pixel" class. I want to add a clear button that can reset the entire canvas, but changing the background color of each individual di ...

javascriptcssclassbackground-color

What is the process for including icons on buttons?

I have been researching how to use Font Awesome software to incorporate icons into my HTML elements, but I am uncertain about the implementation process for my specific case. Currently, I have created a basic webpage with buttons and I would like to includ ...

htmlcss

Challenge with the positioning of HTML output layout

Is there a way to center the output/result of the HTML code below both horizontally and vertically on the web page using CSS? I have tried the following code but it only centers the output horizontally. Vertical alignment is not working properly. Can someo ...

htmlcss

Is there a method to display text on the screen after a countdown has finished?

I am looking for a way to display some text or an image of a cake on the screen once this countdown reaches zero. It's a countdown leading up to my birthday, and I really want it to have that special touch at the end. However, I've been strugglin ...

htmlcountdown

Check the input in the text box against the selected options to validate it

Currently, I am working on an add contacts page where I am facing the challenge of displaying an error message or highlighting input as invalid if a user tries to enter a contact name that already exists. It seems like one solution could be populating a s ...

javascriptjqueryhtmlasp.net

Comparing GET and POST actions in mod_rewrite search form

Hey there, thank you for taking the time to address this query. I have implemented a live search form using jQuery on my website. The search bar is present on every page and functions well. Now, I am looking to enhance its functionality. When users press ...

phphtmlmod-rewrite

What is the process for displaying the current bitcoin price on an HTML page using API integration?

I'm looking to develop an application that can display the current Bitcoin price by fetching data from the API at . I want to showcase this information within an h2 element. Any suggestions on how I could achieve this? Thank you in advance. const e ...

javascripthtmlapiexpressbitcoin

Ensure that text input is restricted from containing any HTML or script tags when utilizing the Web API within an HTML page

On a html page, there are two text boxes provided for entering Employee Name and Employee Age, along with a Save button. Clicking this button triggers the Web API method called SaveEmployeeData to save the data. This Web API is hosted on an asp.net website ...

javascriptc#htmlvalidationasp.net-web-api2

I find it frustrating that Angular consistently redirects me to the login page every time I attempt to navigate to a different page

I currently have a website with both normal user-accessible pages and an admin dashboard accessible only by admins through ngx-admin. To restrict users from accessing the admin dashboard, I've implemented an auth guard that redirects them to the logi ...

htmlangularngx-admin

The issue with style.background not functioning in Internet Explorer is causing complications

I am currently developing a JavaScript game that involves flipping cards. However, I have encountered an issue with the style.background property. It seems to be functioning correctly in Chrome but not in Internet Explorer. Here is the problematic code sn ...

javascripthtmlcssinternet-explorer

Compatibility discrepancies for object-fit: cover as per observations from Mozilla and caniuse

I'm curious about the browsers that support the CSS property object-fit: cover. My usual sources for checking compatibility are the Mozilla browser compatibility table and caniuse, but they sometimes provide conflicting information. For example, while ...

csscross-browserobject-fitchrome-for-androidcaniuse

How can I conceal the contents of a webpage until the entire page has finished loading before revealing them?

Is there a way to delay displaying my login template until all elements are fully loaded? Currently, when I visit the site, the template appears first followed by fonts and other components. I want to ensure that nothing is shown to the user until the enti ...

javascripthtmlfunctionclassvue.js

Create a stylish progress bar using CSS arrows

https://i.sstatic.net/vSPZ3.png I have a progress bar that is almost complete, but the arrow position is not working properly. I have tried using :before to fix it, but the position is still incorrect. <div class="progress-panel"> < ...

htmlcsssass

What is the proper syntax for using .focus() with the nextElementSibling method in typing?

As I strive to programmatically shift focus in my form using nextElementSibling, I encounter a challenge with typing variables/constants due to working with Typescript... I have managed to achieve success without typing by implementing the following: myF ...

javascripthtmltypescripttypeselement