What is the best way to position these elements next to each other?

I'm struggling to align these elements side by side. Here is how it currently looks:

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

But I want it to look like this:

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

.reviewprofile {
  background-color: transparent;
  border: none;
  margin-top: 5em;
}

.reviewentry {
  display: inline-block;
  font-family: 'Abhaya Libre', Times, Serif;
  font-size: 0.8em;
  font-weight: 400;
  color: #5e5e5e;
  text-align: left;
  padding-left: 3.5em;
  margin: 0;
}

.commbutton button {
  float: left;
}

.starsrev {
  padding-left: 2.8em;
}
<div class="commsec">
  <div class="commbutton">
    <button class="reviewprofile"><img src="img/reviewprofile.png">  </button>
  </div>

  <div class="commentry">
    <p class="reviewentry">Cras ultricies dolor ac justo scelerisque, sit amet imperdiet<br> purus placerat.</p>
    <img class="starsrev" src="img/stars.png" alt="stars" />
  </div>
</div>

htmlcss

Answer №1

Utilizing the flex property on the parent element will effortlessly generate this layout using your current HTML structure. For a more detailed explanation and examples of flexbox syntax and options, refer to this informative resource here.

.reviewprofile {
  background-color: transparent;
  border: none;
}

.reviewentry {
  font-family: 'Abhaya Libre', Times, Serif;
  font-size: 0.8em;
  font-weight: 400;
  color: #5e5e5e;
  text-align: left;
  margin: 0;
}

.commsec {
  display: flex;
  align-items: center; /* this will affect vertical alignment */
}
<div class="commsec">
  <div class="commbutton">
    <button class="reviewprofile"><img src="http://cdn.quilt.janrain.com/2.1.2/profile_default.png">  </button>
  </div>

  <div class="commentry">
    <p class="reviewentry">Cras ultricies dolor ac justo scelerisque, sit amet imperdiet<br> purus placerat.</p>
    <img style="max-width: 100px" class="starsrev" src="http://www.moviesmacktalk.com/news/wp-content/uploads/2013/11/2.5-Stars.jpg" alt="stars" />
  </div>
</div>

Answer №2

One solution is to attempt floating them, this is my go-to method.

.commbutton{
 float:left;
 }

 .commentry{
 float:left;
 }

Answer №3

Utilize float:left on the div you wish to display on the left side, and implement float: right for the one intended for the right side. This is where you begin. Depending on the outcomes, adjustments may need to be made to switch them to inline as well.

Answer №4

Make sure to implement the following CSS and review it:

.image {
    float: right;
}

I have not tested this code yet.

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

Express app unable to retrieve dropdown menu data using Node.js BodyParser

I am currently working on creating a pug file for a signup form and I'm encountering an issue with the drop-down menu not functioning. How can I properly include my drop-down menu in the body parser? I initially assumed it would be processed with json ...

htmlnode.jsexpress

Tips for enabling autoplay for videos in Owl Carousel

I am facing an issue with implementing autoplay functionality for videos in an owl carousel. Despite trying different solutions found online, including this Owl Carousel VIDEO Autoplay doesn’t work, I haven't been able to make it work. Additionally, ...

javascriptjquerycssowl-carousel

Replacing a div with another div can be achieved in a single swap

My goal is to swap one div with another div upon clicking using the provided code. It functions properly for a single instance. However, the issue arises when the class appears multiple times, causing all instances to change due to sharing the same class n ...

javascripthtmlajax

unselect the button using jQuery

I want to trigger a popover when a variable exceeds a certain value, triggered by clicking a button: $(function () { $('[data-toggle="tooltip"]').tooltip({ trigger: 'manual', placement: 'top', titl ...

javascriptjqueryhtmltwitter-bootstrap

Role-based dynamic layout

I am currently working on a website that requires user login functionality. To achieve this, I am utilizing materialise-css and Angularjs for the front-end development, while the back-end is powered by Java-Hibernate (as Spring is not an option in my case) ...

htmlcssangularjs

Determining if an HTML dialog was closed using the escape key

Wondering about detecting when an HTML dialog is closed using the ESC key. Specifically referring to the HTML dialog, not jQuery. ...

htmldialog

The div should remain at the top after the animation effect, instead of returning to its initial position when moving from the bottom to the top using CSS

I have successfully applied an animation effect to a div tag. Initially, the div is positioned at the bottom, but with the CSS animation effect, it moves to the top. However, after reaching the top position, it reverts back to the bottom. I want it to st ...

javascripthtmlcss

Which is more effective: utilizing <nav> paired with <li> <a>, or simply using <nav> <a>?

<nav> <a href="#">Main Page</a> <a href="#">Contact Us</a> <a href="#">About Us</a> </nav> or <nav> <ul> <li> <a href="#">Main Page</a> </li> </ul> </n ...

htmlcssweb

Transform HTML table data into XML format

My challenge is to transform an HTML table into XML format using pure JavaScript without the use of jQuery or any other libraries. I have found plenty of tutorials on converting XML to HTML, but none on how to go in the opposite direction without resorting ...

javascripthtmlxml

What is the best way to transfer a user-generated PNG file to my backend server?

I'm in the process of developing a website that enables users to generate personalized graphics and easily download them directly from the platform. My approach involves allowing users to customize an svg using a javascript-powered form, which is the ...

javascripthtmlajaxgraphicsrequest

Tips on ensuring a div covers the entire page even when a scrollbar is present

<div id="outer_product_wrapper" style="display: none;"> <div id="outer_inner_product_wrapper"> <div id="inner_product_wrapper"> Test </div> </div> </div> I&apo ...

htmlcss

Download personalized HTML design

Situation When exporting to HTML, the resulting code appears as follows: <html> <head> <title></title> <meta content="text/html; charset=UTF-8" http-equiv="Content-Type"> <style type="text/css" ...

htmljasper-reportsexport

Ensuring DIVs are completely contained within their parent DIV using Fullscreen CSS and a height of

I found a nearly-perfect design using the code below: https://i.sstatic.net/56i2E.png This code provides the layout mentioned: <!DOCTYPE html> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="http://maxcdn. ...

htmlcss

Adjust the dimensions of the canvas without disrupting the existing artwork

I am currently working on a pixel art application where I am facing an issue with saving images from the canvas. The saved image appears small and pixelated when I try to resize it. I would like to resize the image to larger dimensions, but I am unsure of ...

javascripthtmlcsscanvas

Adjust the overall size of the CSS baseball field

Attempting to adjust the size of the baseball field proved challenging, as it wasn't a simple task. Is there a way to achieve this effectively? Thanks, HTML - is using DIV the only method for resizing? I couldn't find a way to resize everything a ...

javascripthtmlcssnode.jsresponsive-design

Is there a way to conceal the parent element when the child element is hidden from view?

Wanting to remove the stars badge in the review section of a Shopify store when there are 0 reviews for the product. The goal is to have the badge appear automatically once a review is received. Here's the code snippet: HTML <div class="spr- ...

htmljquerycssshopifyliquid

What is the best way to gather the contents of several textboxes and save them in a single variable?

I've been working on a page that should calculate total hours worked, but unfortunately, I'm facing issues with the output. I've tried using both querySelectorAll and getElementsByTagName by switching the class tag to the name in the textbox ...

javascripthtml

Exploring depths with nested ng-Repeat in Depth First Search

I am dealing with an object that has variable key names, each of which contains nested objects. My goal is to perform a depth-first search (DFS) over this object. For example, consider the following object: object = { "var1" : { "var2 ...

htmljsonangularjsobjectdepth-first-search

What steps do I need to take to get a website up and running with the index.html

After successfully hosting my website, I encountered an issue where it opens the index of the website (a list of files added via FTP) instead of the Index.html page. Can you advise on how to resolve this? Your assistance is greatly appreciated. ...

htmlftp

What steps should I take to repair the footer on this webpage?

Working on a footer using bootstrap and it's looking great, but I encountered an issue with blank space appearing at a specific resolution (see image below). Bootstrap Footer: https://i.sstatic.net/XifQe.png My Footer Design: <footer> < ...

htmlcssbootstrap-4footer