Positioning a block element following an inline-block element

I am in possession of the following HTML code:

<div id="wrapper">
    <div class="inline-block"></div>
    <div class="inline-block"></div>
    <div class="inline-block"></div>
    <div class="block"></div>
</div>

Currently, the inline elements are styled with display: inline-block. I require them to be aligned vertically. On the other hand, the block element has a style of display: block.

As shown in the image below, this displays (first image):

When attempting to set the pink element (block) to float: right, it causes the other elements to shift to the left, resulting in a margin on the right that corresponds to the width of the block element. Any suggestions?

htmlcss

Answer №1

To ensure the pink block appears on the right side, enclose it in a div and apply the float:right style.

<div id="wrapper">
    <div class="inline-block"></div>
    <div class="inline-block"></div>
    <div class="inline-block"></div>
    <div class="wrapper-inner clearfix">
        <div class="block" style="float:right"></div>
    </div>
</div>

If there is content below this inner wrapper, consider adding a clearfix class to accommodate floating elements that do not affect the height of their parent:

.clearfix:after {
    content:"";
    display:table;
    clear:both;
}

Answer №2

HTML

<div id="container">
    <div class="inline-block"></div><!-- eliminating the whitespace
 --><div class="inline-block"></div><!-- inline-blocks do not collapse whitespace completely
 --><div class="inline-block"></div><!-- within the container
 --><div class="block"></div>
</div>

CSS

#container {
  text-align: right; /* aligning inline-blocks to the right */
  position: relative; /* establishing a context for absolute positioning of .block */
}

.inline-block {
  display: inline-block;
  width: 30px;
  height: 30px;
  background: #f40;
}

.block {
  display: block;
  width: 30px;
  height: 30px;
  background: blue;
  position: absolute;
  right: 0; /* moving the block to the furthest right of #container */
}

Example: http://jsbin.com/etuxab/2/edit

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

Maintaining the order of elements in Angular's insertion process

I am currently facing an issue with my HTML fragment that iterates over a key and value collection. Everything works perfectly when I insert values into an object and iterate through it using the HTML fragment. However, in order to maintain a specific key ...

javascripthtmlangularjs

Tips for displaying an array and iterating through its children in Angular 7

I am currently working on extracting the parent and its children to an array in order to display them using ngFor. However, I am encountering an issue where the children are not being displayed during the ngFor. I have a service that retrieves data from a ...

htmlangulartypescriptecmascript-6observable

Managing a significant volume of form data transmission to PHP backend

I have a moderately large HTML form with Javascript functionality to dynamically create additional 'records' within certain sections of the form. There could potentially be over 50 INPUT elements in total. I am contemplating the most effective a ...

javascriptphpjqueryhtmlforms

Leveraging URL parameters to automatically enable the initial selection in a linked dropdown menu and trigger an OnChange event

Project Description: I have successfully implemented a search form with 5 dependent drop-down menus that are crucial for filtering data. The first dropdown, labeled dim_id, is chosen on the product_request page and triggers an OnChange event which sends th ...

javascriptphpjqueryhtmlajax

Saving HTML elements within an XML file

I am dealing with a String that has an html format containing various html tags. My goal is to enclose this string within xml tags while preserving the html tags, for example: public class XMLfunctions { public final static Document XMLfromString(Str ...

javahtmlxml

The number of characters can be measured in a div element that is editable

Looking to create a character counter similar to Twitter in a contenteditable div. The goal is to restrict users to typing a maximum of 140 characters. Using jQuery for character count and remaining display, but encountering an issue where the Enter key ( ...

javascriptjqueryhtmlcss

Designing personalized sass components

Seeking advice on developing a custom CSS unit that can be utilized in Sass with Node.js. Is there a tutorial available for creating a Sass plugin specifically for this purpose? For instance, I am looking to establish a unit called "dpx" which functions as ...

cssnode.jswebpacksass

Overriding the width value of a computed CSS style with an inline CSS style is not possible

There's a peculiar issue that has me stumped. The webpage I'm currently working on is loaded with CSS styles. To customize the width of one of my div elements, I added inline CSS code specifying the exact width I want (and it looks correct in th ...

csshtml

Obtain the identifier of a div within nested HTML components by utilizing jQuery

How do I retrieve the id of the first div with the class: post, which is "367", using jquery in the given HTML code: <div id="own-posts"> <span class="title">Me</span> <div class="posts_container"> <div class="post"& ...

javascriptjqueryhtml

Enable compatibility with high resolution screens and enable zoom functionality

My goal is to ensure my website appears consistent on all screen sizes by default, while still allowing users to zoom in and out freely. However, I've encountered challenges with using percentages or vh/vw units, as they don't scale elements prop ...

javascriptcssresponsive-design

When using jQuery and AJAX together, it seems that the POST method is returning

Currently experimenting with Cloud9. The current project involves creating an image gallery. On the initial page: There are a few pictures representing various "categories". Clicking on one of these will take you to the next page showcasing albums fro ...

javascriptphpjqueryhtmlajax

Determining the width of an element in terms of percentage

My issue involves input elements with widths set as percentages in CSS under the common class 'display-class' For example: input.test1 { width: 60% } In JavaScript, I am attempting to wrap a div around these input fields with the same width ...

javascriptcssdom

Modifying the dimensions of mat-card in Angular Material

https://i.stack.imgur.com/CP16N.png I am struggling to make both components the same height, similar to the left form. I have tried adjusting margins and padding but nothing seems to work. Below is the HTML code for the parent element: <mat-tab label= ...

cssangularbootstrap-4angular-materialgrid

Creating a separation line between divs using HTML and customized Bootstrap styling

I'm currently practicing with bootstrap and HTML, and I would appreciate it if you could take a look at the image I've included. In the image, I have successfully created and displayed a return flight. Moving forward, my goal is to enhance its ap ...

htmlcsstwitter-bootstrap

Can cells be divided in a Material UI table?

Is there a way to split a cell in a Material UI table?I am aware that I can create a component to achieve this, but I'm wondering if there is another approach that I may not be aware of. Splitting a cell means having two values separated by a line wit ...

cssreactjsmaterial-ui

Modifying an image with jQuery

Why won't this image change? Below is the relevant HTML, CSS, and jQuery code. HTML <nav id="desktop-nav"> <div class="logo"> <a href="#"></a> </div> <div> ... </div> ... CSS nav#desktop-nav . ...

javascriptjqueryhtmlcss

I'm currently exploring ways to incorporate text onto thumbnails, as I am new to coding. Below is the code I have been working on

I'm new to coding, only been at it for about a week and a half, and still struggling. My issue is setting up text underneath my thumbnails as shown below. While the code alone won't make it look right, I know this should be an easy fix. I need to ...

javascriptcss

Issue encountered while trying to access PHP script within table data utilizing Ajax

I have a small project that involves displaying different news articles. I need to incorporate the news_all.php file into the table data in dashboard.php without using the include('news.php) function. Instead, I am utilizing Ajax methods to achieve th ...

javascriptphphtmlajax

Tips for aligning the loginStatus login screen in the center

Having an issue centering the login control that appears after selecting login using the loginstatus control. <div id="linkContent"> <asp:LoginStatus ID="LoginStatus2" runat="server" LogoutAction="RedirectToLoginPage" /> </div& ...

asp.netcssauthenticationloginstatus

Is it possible to reset a form without using JavaScript? (The input type=reset function is not functioning correctly

So, basically I need a quick way to clear all the fields in my form. I've experimented with a couple of options: <input type="reset" value="Clear all fields"> And <button type="reset">Clear all fields</button> Unfortunately, none ...

htmlformsbuttonreset