What is the best way to position a div at the center between two other divs on the left and right?

My goal is to create a layout similar to THIS, with 3 buttons aligned in a row - one on the left, one in the center, and one on the right. I want to achieve this using CSS and divs instead of tables.

I have managed to position the left and right buttons correctly using floats. However, I'm struggling to get the center button to stay inline with the other two without jumping out of the line.

Here's what I've attempted:

html: 

<div class="left" ><input type="button" value="left" /></div>
<!--<div class="center" ><input type="button" value="center" /></div>-->
<div class="right" ><input type="button" value="right" /></div>

<!-- If I uncomment the center div, the right one appears in another block, below the others-->

css: 

.left {
    float:left;
}
.right {
    float:right;
}
.center{
    /*what do i put here??*/
}

I've created a fiddle here to demonstrate the issue.

Any suggestions on how I can achieve this layout and get as close as possible to the example with table layout?

Note: I've searched for similar questions but couldn't find any that address this exact problem.

htmlcss

Answer №1

Consider this alternative:

.left {
    float:left;
    width: 33.3%
}
.right {
    float:right;
    width: 33.3%;
    text-align: right;
}
.center{
    float: left;
    width: 33.3%;
    text-align: center;
}

SEE IT IN ACTION

Updated based on feedback received

If you wish to add borders, it is necessary to adjust the widths accordingly. CSS follows a box model where total width includes margin + border + padding + content (determined by width property). You can explore a demonstration showcasing how to incorporate 1px borders in each div while adapting the width proportionately.

Answer №2

Here's a neat little trick (revised for the 2nd time).

To achieve the desired layout, simply move the .center div after the two floated elements:

<div class="left">
    <input type="button" value="left" />
</div>
<div class="right">
    <input type="button" value="right" />
</div>
<div class="center">
    <input type="button" value="center" />
</div>

In your CSS, use text-align: center to easily center the input button as it is an inline element.

.left {
    float:left;
}
.right {
    float:right;
}
.center {
    text-align: center;
    outline: 1px dotted blue; /* this shows the content box limits */
    margin: 0 150px;
}

How It Works

Floated elements are positioned either to left or right edge of the parent container with their top edge being adjacent to the top of the parent container OR the bottom edge of the closest block element before the floated element.

If you want the left and right floated elements to be on the same horizontal line, they need to be next to each other, which is why the .center element comes after them.

The content from the .center element (in this case, the input button) wraps around the left and right floated elements, causing the length of the inline box (a box holding the content) to shorten. This allows room for the floated elements and leads the content line extending between them. The text-align: center centers the input button within this shortened inline box, resulting in off-center appearance if left and right buttons have unequal lengths.

To overcome this, provide some space for the floats. One way is setting equal left and right margins like margin: 0 150px.

If the labels are known beforehand, figuring out the margin value is simple enough.

However, all three label lengths must be shorter than the line's length for this to work effectively.

Please refer to the updated demo.

View Demo on Fiddle

Answer №3

Check out the grids documentation at

This tool is my go-to for all projects. It's simple to use and can be customized easily.

Quick solution:

.unit {
    float: left;
}
.last-unit {
    float: none;
    display: table-cell;
    width: auto;
}
.size1of3 {
    width: 33.33333%;
}
.pull-content-right {
    text-align: right;
}
.pull-content-left {
    text-align: left;
}
.center-content {
    text-align: center;
}

<div class=”line”>
    <div class=”unit size1of3 pull-content-left”>
    </div>
    <div class=”unit size1of3 center-content”>
    </div>
    <div class=”unit size1of3 last-unit pull-content-right”>
    </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

What is the best way to create divs that can close and hide themselves when clicked from inside the div itself?

I have a situation in my code where clicking a link reveals a div, and then the same link must be clicked again to hide it. However, I want to modify this so that any link within the div can also hide it when clicked. I currently have eight divs set up lik ...

javascriptjquerycsshtmlshow-hide

Is it possible to modify the appearance of the element that was just clicked on?

Hello everyone, I'm currently working on a form with different inputs, all with the same class: <input type="text" name="username" class="field" /> <input type="text" name="email" class="field" /> I'm trying to figure out how to ch ...

javascriptjqueryhtml

Having trouble implementing a Font Awesome icon into a submit button programmatically

One way to use a font-awesome icon as button text in HTML is shown below: <button tabindex="4" type="submit" id="submit" class="btn btn-primary btn-lg disabled" onclick="sendemail(); return false;"><i class="fa fa-paper-plane" aria-hidden="true"& ...

javascriptjqueryhtmlfont-awesome

Ionic version 4 ion-img eagerly preloads images instead of implementing lazy-loading

I recently created a horizontal scroller using FlexLayoutModule. It allows me to display a horizontally scrollable list where each item consists of an image and text column. Here's the relevant snippet from my scroller.component.html: <div class=" ...

cssionic-frameworkionic4

Tips for calculating the canvas-relative mouse position on a CSS 3D transformed canvas

Recently decided to challenge myself by experimenting with drawing on 3D transformed canvases. After some trial and error, I managed to get it partially working. const m4 = twgl.m4; [...document.querySelectorAll('canvas')].forEach((canvas) =& ...

javascripthtmlcsscanvascss-transforms

Utilizing Dynamic Dropdown Selected Value in PHP

Help with PHP/HTML: I have added the list of all countries to the add/edit page. However, on the edit page, I need the selected value in the dropdown. Can someone please assist me? <select class="form-control" id="country_list" name="country"> ...

phphtml

Implementing Validation for DropdownChoices and Checkboxes in Wicket Java

There is a checkbox and dropdown menu on an HTML page. Upon clicking submit, if both are selected, there should be an error message stating that at least one of them is mandatory and prompting the user to select at least one value. To address this issue, ...

javahtmlcheckboxwicketdropdownchoice

What is the best way to incorporate two banners on the Magento homepage alongside my flexslider?

I recently made the switch from using a camera.js slider on my website to a Flexslider. The reason for this change was that I couldn't make the camera.js slider clickable, and I wanted to eliminate the 'Click here' button. However, now that ...

cssmagentocontent-management-systemflexsliderbanner

Vertically aligning text in separate div containers

Currently, part of my dashboard page is styled using the Bulma CSS framework. One feature is a 'Widgets' feature with three large containers displaying key facts such as the number of sales, new customers, etc. The issue I'm facing is that ...

htmlcsscenteringbulma

Is there a way to see the HTML version of an invoice instead of the PDF?

Looking to personalize the .pdf invoice for my PrestaShop store, The issue is that the process is quite time-consuming: Modify .tpl file Generate .pdf file Review changes Meanwhile, I'd like to convert the invoice to HTML to inspect the elements u ...

htmlpdfprestashopprestashop-1.6invoice

Send in 3 sets of HTML forms along with a single JavaScript button to save all data in a single row within

I'm facing an issue with submitting multiple forms on a page without submit buttons. I have a script that submits all three forms at the same time, but it's creating separate rows in the database instead of one combined row. Any suggestions on ho ...

htmlforms

AngularJS Toggle Directive tutorial: Building a toggle directive in Angular

I'm attempting to achieve a similar effect as demonstrated in this Stack Overflow post, but within the context of AngularJS. The goal is to trigger a 180-degree rotation animation on a button when it's clicked – counterclockwise if active and c ...

javascriptcssangularjs

Problems arising from the layout of the PrimeNG DataView component when used alongside Prime

I've been working with a PrimeNG DataView component that requires the use of PrimeFlex's flex grid CSS classes to set up the grid structure. One of their examples includes the following instructions: When in grid mode, the ng-template element ...

cssangulartypescriptprimengprimeflex

What is the reason behind the default disabling of bootstrap multiselect options?

Just diving into the world of bootstrap and I'm puzzled as to why my simple multiselect options aren't responding when clicked. UPDATE The first multiselect option on the test-site linked below is the one giving me trouble. I've tried it o ...

javascriptjqueryangularjshtmltwitter-bootstrap

Adding rows dynamically to multiple tables on a single page using a single function

I am facing a situation where I have multiple tables and a function that adds rows to these tables: <table id="table1" style=" border-collapse: collapse;"> <tr id="table1row1">... <tr id="table1row2">... <table id="table2" style=" bor ...

javascriptjqueryhtmlhtml-tableincrement

Is there a way to make this animation activate when the entire area in front of the link is hovered over or tapped?

I am working on an animation that needs to run behind a link. Here is an example: https://codepen.io/ehbehr/pen/KKNbOvN and below is the HTML and CSS: *, *:before, *:after { margin: 0; padding: 0; } .container { position: relative; width: 100%; ...

javascripthtmljquerycss

Create original identifiers for dynamically generated material

I have developed a custom invoice tool that has the capability to dynamically add rows. Here is the code snippet responsible for generating new rows: $("#addrow").click(function(){ $(".item-row:last").after('<tr class="item-row"><td> ...

javascriptphpjqueryhtmlajax

CSS Animation: a single transform property, excluding the other

Currently facing a challenge. I am manipulating an element by dragging it across the screen. When changing directions (left or right), I tilt the element in the direction it is moving, creating a gravity-like effect. To achieve smooth tilting, I have adde ...

htmlcss

Issue encountered when integrating AJAX with PHP and HTML5 form

I've been working on solving a puzzle involving a contact form that uses AJAX and PHP. I decided to try reverse engineering the PHP code from this page (). However, when testing it out, the message gets stuck at "sending message...." after clicking "S ...

phpajaxhtmlcontact-form

Exploring Angular 6: Unveiling the Secrets of Angular Specific Attributes

When working with a component, I have included the angular i18n attribute like so: <app-text i18n="meaning|description"> DeveloperText </app-text> I am trying to retrieve this property. I attempted using ElementRef to access nativeElement, bu ...

javascripthtmlangulartypescript