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

"Keeping your HTML content up-to-date with AngularJS dynamic updates

I've noticed that when I upload changes to my AngularJS HTML partial files, there is a caching issue where the old data is displayed. It takes a few refresh actions before the changes become visible. Is there a way to make these changes appear immedi ...

javascripthtmlangularjs

The Vite build tool creates unique CSS module classes for each component

Is it possible to set the CSS module class name in the index.js file generated during the Vite build process? I am developing with multiple themes and a single-entry JS file. Currently, this is the output I get when trying to build the project: Index.js & ...

htmlcssvue.jsvitecss-modules

calc() not supported on IE11

Why is IE11 unable to calculate this? The console shows it as invalid (highlighted in red) h6 { ... font-size: calc(calc((( (20 / 16) / 16 - 1 / 16) * (100vw - 20rem) / (992 / 16 - 20) + 1 / 16 * 1rem) * 16)); ... } However, the following code works ...

cssinternet-explorersassinternet-explorer-11css-calc

Having trouble getting the Pokemon modal to show both the type and image?

HTML: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>My First JS App</title> <lin ...

javascripthtmlbootstrap-4bootstrap-modal

Dealing with rowspan and colspan issues in Internet Explorer

Currently, I am facing the challenge of creating a table with a complex system of colspans and rowspans. If you want to take a look at it, you can view it here This is the HTML code for the table: <table cellspacing="0" cellpadding="0" style="table-la ...

cssinternet-explorerhtml-tableinternet-explorer-11

Saving Data in an Angular Material Table: A How-to Guide

I have a basic angular material table and I am looking for a way to save the data displayed in each row when a button is clicked. Is it possible to save each row of data as an object and push it to an array? If so, how can I achieve this? <div class=& ...

javascripthtmlangulartypescriptangular-material

Handling overflow and z-index of tabs in Vuetify Drawer

Struggling to create an expandable sidebar menu using Vuetify2, following the documentation, but unable to prevent the expanded menu from overlapping other elements on the page. The current behavior causes items to be pushed away and wrap onto the next ro ...

cssvue.jsvuejs2vuetify.jsnavbar

"Troubleshooting a JSON structure containing a complex array of objects with multiple layers

I've structured a complex array with JSON objects to allow users to customize background images and create unique characters. Below is the main code snippet: var newHead; var newBody; var newArm; var masterList = [ { {"creatureName":"Snowman ...

javascripthtmljson

I am struggling to create a responsive HTML/CSS/Bootstrap file that can adapt to all screen sizes

Exploring the world of web development for the first time and seeking guidance on how to make file elements responsive to accommodate any screen size or resolution. Assistance would be greatly appreciated! Here's a snippet of my code: `\<!DOCT ...

htmltwitter-bootstrapwebresponsivebootstrap-5

Issues with the alignment of the navbar-right in Bootstrap are causing

Just starting out with bootstrap and encountered an issue I have two different classes for the navbar-header, one I want on the left and the other on the right. I need both to be responsive. <nav class="navbar navbar-default navbar-fixed-top topnav " ...

htmlcsstwitter-bootstrap

Header and footer that remain in place while the content scrolls smoothly

I'm currently working on designing a webpage that includes three separate divs: a header, a footer, and a content area. These divs are intended to fill up the entire screen space available. The header and footer remain consistent in size and structur ...

htmlcss

Placing two parent flex containers on top of each other

I'm in a situation where I have two .container elements, both set at a height of 50%. Within these containers are the child divs .element, which belong to their respective parent divs .container. The problem arises when applying media queries with f ...

htmlcss

Having trouble with Ionic 4 navigation not triggering after a single click, requiring multiple clicks to navigate

I have a long list of items, around 40 in total, that load a page describing each item with photos, URLs, and other content. However, I find that I need to click two to three times before reaching this page. I suspect that the excessive use of HTML compone ...

androidhtmltypescriptionic-framework

Dynamically Growing Navigation Bar Elements with Nested Subcategories Based on Class Identification

Let's say you have a menu bar structured as follows: <nav> <ul class="nav"> <li class="menu1"><a href="#">Menu Item 1</a></li> <li class="menu2"><a href="#">Menu Item 2</a> <ul& ...

javascriptjqueryhtmlcssmenu

Bizarre Drop-down Peculiarities

Having a perplexing issue where the 'search' list item is oddly shifted below the dropdown box only when it is displayed. The other list items remain in their correct positions. Any advice on how to resolve this? The appearance and functionality ...

jqueryhtmlcssmenu

Ensuring HTML is clean in SQL query using PHP function for sanitization

I am currently working on a PHP page that contains a dropdown form. When an option is selected, it triggers an AJAX script which queries a result from the same MySQL table. Overall, the functionality works as expected. However, I have encountered an issue ...

phphtmlsqlfunctionsanitize

jQuery registers the enter event, but does not proceed to trigger the enter action

Hey there, I've been experimenting with jQuery to capture the enter event. Something peculiar is happening though - after pressing enter in the text area, an alert pops up but the text gets entered only after that. Despite trying various solutions, I ...

javascriptjqueryhtml

After loading ajax content onto the page, the scroll bars fail to appear

I am currently constructing a website that loads page content through ajax. Everything seems to be functioning perfectly, except for a peculiar issue I have encountered in Chrome and Safari. Surprisingly, it is working flawlessly in IE! The problem lies i ...

htmlcssajaxscroll

I am interested in incorporating jQuery into my React development project

I'm trying to implement jQuery in React. I have an input field in my project that I am using to create a match event with 'this.state.value'. When the content of the input field matches, I want the borders to turn green and red if they do no ...

javascripthtmljquerycssreactjs

Button to access overlay menu on my map with OpenLayers 3

I am trying to add a menu button on top of my map that, when clicked, will display a window. I have created the map div and the overlayMenu button div, but unfortunately, the button is not showing up where I want it to. I would like the button to be locate ...

javascriptjqueryhtmlcss