Is it possible to adjust positioning using just CSS?

I'm attempting to arrange these elements as shown in the image below:

https://i.stack.imgur.com/tWy1I.png

https://jsfiddle.net/ut1mgcLb/

HTML

<div class="object1">
    <div class="snax-voting-container-body">
        <div class="snax-voting snax-voting-positive snax-voting-large" data-snax-item-id="297">
            <div class="snax-voting-score">
                <strong>6203</strong> points
            </div>
            <a href="#" class="snax-voting-upvote snax-vote snax-vote-up snax-guest-voting" title="Upvote" data-snax-item-id="297" data-snax-author-id="0" data-snax-nonce="6bb412040e"><span class="snax-vote-icon snax-vote-icon-caret"></span> Upvote</a>
            <a href="#" class="snax-voting-downvote snax-vote snax-vote-down snax-guest-voting" title="Downvote" data-snax-item-id="297" data-snax-author-id="0" data-snax-nonce="6bb412040e"><span class="snax-vote-icon snax-vote-icon-caret"></span> Downvote</a>
        </div>
    </div>
    <a href=" https://themeforest.net/item/bimber-viral-buzz-wordpress-theme/14493994 "><img id="postTB" src=" https://i.imgur.com/Nf57W2G.jpg"></a><a href=" https://themeforest.net/item/bimber-viral-buzz-wordpress-theme/14493994 "> 25 Delicious Things To Cook In September (themeforest.net)</a><img alt="" src="//www.gravatar.com/avatar/9f221658beaba2ee853f978fa48f49c2?s=40&amp;r=g&amp;d=retro" srcset="//www.gravatar.com/avatar/9f221658beaba2ee853f978fa48f49c2?s=40&amp;r=g&amp;d=retro 2x" class="avatar avatar-40 photo" height="40" width="40">
</div>

CSS

#postTB{
  width:10%;
}

Is there a way to rearrange these elements correctly using only CSS, or do I need to rethink the HTML structure?

htmlcss

Answer №1

redesigned without the use of display: contents

#postTB{
 width: 100%;
}

 .object1 {
   display: flex;
  }

 .object1 a {
   width: 10%;
  }

 .object1 a:last-of-type {
   width: auto;
  }

  .snax-voting {
   display: flex;
   flex-direction: column;
   text-align: center;
   }
<div class="object1">
    <div class="snax-voting-container-body">
        <div class="snax-voting snax-voting-positive snax-voting-large" data-snax-item-id="297">
            <div class="snax-voting-score">
                <strong>6203</strong> points
            </div>
            <a href="#" class="snax-voting-upvote snax-vote snax-vote-up snax-guest-voting" title="Upvote" data-snax-item-id="297" data-snax-author-id="0" data-snax-nonce="6bb412040e"><span class="snax-vote-icon snax-vote-icon-caret"></span> Upvote</a>
            <a href="#" class="snax-voting-downvote snax-vote snax-vote-down snax-guest-voting" title="Downvote" data-snax-item-id="297" data-snax-author-id="0" data-snax-nonce="6bb412040e"><span class="snax-vote-icon snax-vote-icon-caret"></span> Downvote</a>
        </div>
    </div>
    <a href=" https://themeforest.net/item/bimber-viral-buzz-wordpress-theme/14493994 "><img id="postTB" src=" https://i.imgur.com/Nf57W2G.jpg"></a><a href=" https://themeforest.net/item/bimber-viral-buzz-wordpress-theme/14493994 "> 25 Delicious Things To Cook In September (themeforest.net)</a><img alt="" src="//www.gravatar.com/avatar/9f221658beaba2ee853f978fa48f49c2?s=40&amp;r=g&amp;d=retro" srcset="//www.gravatar.com/avatar/9f221658beaba2ee853f978fa48f49c2?s=40&amp;r=g&amp;d=retro 2x" class="avatar avatar-40 photo" height="40" width="40">
</div>

#postTB{
  width:10%;
}

.object1 {
   display: flex;
}

.object1 a {
   display: contents;
}
<div class="object1">
    <div class="snax-voting-container-body">
        <div class="snax-voting snax-voting-positive snax-voting-large" data-snax-item-id="297">
            <div class="snax-voting-score">
                <strong>6203</strong> points
            </div>
            <a href="#" class="snax-voting-upvote snax-vote snax-vote-up snax-guest-voting"><span class="snax-vote-icon snax-vote-icon-caret"></span> Upvote</a>
            <a hr

ef="#" class="snax-voting-downvote snax-vote snax-vote-down snax-guest-voting"><span class="snax-vote-icon snax-vote-icon-caret"></span> Downvoteg"></a>
        </div>

Answer №2

Do you have experience using the css flexbox? I like to refer to this handy cheatsheet: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

In flexbox, you have the ability to specify ordering by using inline-flex and setting the order manually. Here's an example:

.snax-voting-container-body {
  display: inline;
}

.snax-voting {
  display: inline-flex;
  flex-direction: column;
}
.snax-voting a {
  display: block;
}

.snax-voting-upvote {
  order: 0;
}
.snax-voting-score {
  order: 1;
}
.snax-voting-downvote {
  order: 2;
}

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

Certain images are not being retrieved by Express on Linux, although they are functioning properly on Windows

When using a template to display HTML code, everything works smoothly on Windows. However, when transferring the code to a Linux machine, an issue arises - "Cannot GET /SmallVacImages/1.jpg". It seems that the index.html file can load images from the publi ...

javascripthtmllinuxexpress

Shopping cart feature in PHP - Ajax response only functioning once

I'm in the process of developing a shopping cart. I start by adding products to the cart, then use Ajax to dynamically update the quantity when it changes. Everything works smoothly after the first change, but subsequent quantity updates do not refres ...

javascriptphpjqueryhtmlajax

Text element in SVG not displaying title tooltip

Looking for a solution to display a tooltip when hovering over an SVG Text element? Many sources suggest adding a Title element as the first child of the SVG element. This approach seems to work in Chrome, but not in Safari - the primary browser used by mo ...

javascriptjqueryhtmlsvgtooltip

If the user decides to change their answer, the current line between the two DIVs will be removed

After clicking on two DIVs, I created two lines. Now, I am facing an issue with resetting the unwanted line when changing my answer. To reset the line, you can refer to the code snippet below: var lastSelection; ...

javascriptangularjshtmlcsscanvas

Increase the height and width of the inner divs to match the outer div while reducing the number of inner divs

Within my HTML structure, I have three vertical divs that each contain multiple inner div elements. I am looking to achieve a responsive layout where the inner divs wrap into either a 2-column or 1-column grid based on the browser's height and width. ...

jqueryhtmlcss

Is there a way to target the mat-icon element using the icon's name in CSS

I have a group of mat-icons that are automatically generated, meaning I cannot assign them ids or classes. The only way to distinguish between them is by their names: <mat-icon role="img">details</mat-icon> <mat-icon role="img ...

htmlcssangularangular-materialmaterial-ui

Having trouble with your Bootstrap Accordion panels?

I am in the process of creating a unique accordion-style panel for a client's website. However, I am facing difficulties as this is my first attempt at setting up such panels and it doesn't seem to be functioning correctly. I'm not sure if I ...

htmltwitter-bootstrap

Exploring different sections of the website

I am looking to create a seamless navigation experience between controls on a webpage. Below is an example code snippet that outlines the functionality where a user can click on any component and be directed to another controller. Sample code: const app ...

javascripthtmlangularjs

How to harness the power of loops in JavaScript

Having trouble getting this code to repeat a CSS transition properly. for (var i=0 ; i<4 ; i++){ setTimeout(function() { $('#top-left').css('margin', '45px 0 0 45px'); $('#top-mid' ...

javascriptjquerycsscss-transitions

Why is there a CSS reference failure in Express and how can it be resolved?

Below, you'll find a simple express server I've put together: // check out my basic Express server var express = require("express"); var app = express(); var bodyparser = require("body-parser"); app.use("/public/", express.static("./public/")); ...

javascriptcssnode.jsexpress

Turning HTML elements 90 degrees for vertical printing without the need for a landscape class

My current project involves creating a template for generating PDF files with CSS. I've set up different paper sizes and orientations using @page and media queries in my CSS code. You can check out a snippet of the CSS here. One challenge I'm fa ...

htmlcsspdf

Modifying website elements with JavaScript

Can someone assist me with getting a script to work on my website that will allow me to switch between four different sets of content using buttons labeled 1, 2, 3, and 4? I have tried using addClass and removeClass but cannot seem to get it right. Here i ...

javascriptjqueryhtmlcss

Unique custom CSS and meta tag options for enhancing iPad/iPhone user experience

Currently, I am developing a web application that integrates Extjs components, PHP, and MySQL. My main goal is to ensure that my application looks correct on the iPad. Are there any specific CSS rules or meta tags that I should be implementing for optima ...

javascriptcssipadextjs

How can we develop play buttons for Facebook timelines similar to those found on Spotify?

Is it possible to create an HTML5 player that can be embedded on Facebook timelines, similar to the way Spotify has special privileges as a Facebook partner? I'm looking to provide a list of play buttons that, when clicked, will play songs sequentiall ...

facebookhtmlaudio

Having difficulty assigning the $_Session value in the captcha file

I'm having trouble assigning a value to $_Session in a captcha file. Below is the code for my captcha file: <?php session_name('U'); session_start(); session_regenerate_id(); ini_set('session.cookie_httponly',true); $string=&a ...

phpajaxhtmlsession

Display the website logo when users share on WhatsApp

My goal is to have my website icon appear in WhatsApp when I share it (similar to the example below). https://i.stack.imgur.com/KCWi8.jpg I initially tried using this code, but it didn't work: <link rel="shortcut icon" href="css/img/favicon/favi ...

htmlcsswhatsappico

Tips for displaying JSON data in HTML without the use of placeholder DIV elements

Customer Scenario: A user wants to search through Wikipedia. The search results should be limited to 5 articles, and the user should be able to view the title and introduction of each article. Developer Scenario: User input is provided via an HTML input f ...

javascriptjqueryhtmljson

manipulating dropdown visibility with javascript

I'm feeling a bit lost on how to structure this code. Here's what I need: I have 5 dropdown boxes, with the first one being constant and the rest hidden initially. Depending on the option chosen in the first dropdown, I want to display the corres ...

javascripthtmlcss

PHP Unable to Locate the header.html File Within the Specified Directory

Currently, I am facing an issue while trying to use PHP to incorporate the same header, navigation, and footer elements on all my website pages. The problem arises when the .php file fails to recognize the header.html file for an include("/header.html") op ...

phphtmlcss

Unable to position a div alongside a fluid div with minimum and maximum widths

Within this container, there is a div. #leftBanner { height: 100%; background-color: #CCC; width: 22%; min-width: 245px; max-width: 355px; float: left; } This particular div doesn't cooperate when I try to float another div next to it. While I could ...

htmlcss