Arrange a trio of divs in a horizontal row using CSS styling

I recently encountered an issue with aligning three divs inside a main div identified as main_div. The main div already had the following CSS properties applied:

<div id="main_div" style="height:10px; line-height:50px; margin-top:1px; position:relative;">
</div>

The objective was to insert three additional divs within the main div in the following layout:

<div id="main_div" style="height:10px; line-height:50px; margin-top:1px; position:relative;">
   <div>
       Div One aligned left (breadcrumb_text)
   </div>
   <div>
       Div Two centered (dropdownlist)
   </div>
   <div>
        Div Three aligned right (Pagination)
   </div>
</div>

This structure aims to display the content like so:

breadcrumb_text             dropdownlist                   Pagination

Despite trying out different CSS approaches utilizing the position attribute and other options, I struggled to successfully align them horizontally with one div on the left, another in the center, and the last on the right. I'm seeking guidance on the appropriate CSS rules to achieve this alignment.

htmlcss

Answer №1

Perhaps this could be of assistance to you: Fiddle

#main_div > div {
    width: 33%;
    float: left;
}

Answer №2

Your code has been slightly adjusted to ensure equal spacing for each div and the removal of Position in the Main div.

It's important to note that using position can sometimes cause overlap with other divs based on z-index values, so it should only be used when necessary.

#main_div{
  height:10px; line-height:50px; margin-top:1px;
  box-sizing:border-box;
}


#main_div > div{
width:31.1%;
  float:left;
  box-sizing:border-box;
  border:1px solid grey;
    margin-right: 10px;
  display:inline-block;
}

#main_div > div:first-child{
margin-left:10px;}
<div id="main_div">
   <div>
       Div One should be Left(breadcrumb_text)
   </div>
   <div>
       Div Two should be Center(dropdownlist)
   </div>
   <div>
       Div Three should be Right(Pagination)
   </div>
</div>

Answer №3

Here is the solution to your query

JSFiddle Link

Cascading Style Sheets (CSS)

body
{
  margin:0%;    
}

.main_div
{
  display:block;
  margin:0% 5%;
  width:90%;/*This value can be adjusted*/
  height:300px;  /*This value can be adjusted*/
  background:#eee;
  position:relative;
}

.left-div, .center-div, .right-div
{
   display:inline-block;
   height:100%;
   position:relative;
   float:left; 
   width:33%; 
   border:1px solid #000;   
   text-align:center;
   padding-top:5px;
}

HyperText Markup Language (HTML)

<div class="main_div">
   <div class="left-div">
       Left Div Content (breadcrumb_text)
   </div>
   <div class="center-div">
       Center Div Content (dropdownlist)
   </div>
   <div class="right-div">
       Right Div Content (Pagination)
   </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

Using jquery to rotate images

I have a collection of images that I would like to display one by one with a 3D and 2D rotation effect. The HTML structure is as follows: <div><img src="1.jpg"></div> <div><img src="2.jpg"></div> <div><img src ...

javascriptjquerycss

What are some methods for utilizing the "name" attribute within React components?

About My Coding Environment Utilizing TypeScript and ReactJS The Issue with Using name as an Attribute Encountering the following error: Type '{ name: string; "data-id": string; "data-type": string; }' is not assignable to ...

htmlcssreactjstypescript

Use the double data type in MySQL to handle null values when blank form fields are submitted

Currently, I am facing an issue with a form that I have created to update a mysql database using PHP and HTML. In my MySQL database, I have set the data type as double (3,1). The problem arises when I submit data to the database and leave some form input f ...

htmlmysqlformsnulldouble

Deselect all checkboxes other than the daily selection

I recently designed an E-commerce website that includes a package customization feature where users can modify their packages. The initial question presents three radio button options: 1. Daily 2. Weekly 3. Monthly If the user selects 'daily&apos ...

javascriptjqueryhtmljquery-ui

Using a JavaScript function to swap out the contents of a div and encountering some unexpected behavior

I am encountering an issue while running a code that generates content using a function. The problem arises when I try to change the content onclick, as none of the CSS is applied again after the change. It's quite perplexing. Below is a generalized ...

javascriptcss

When I use .fadeToggle, my div transitions smoothly between visible and hidden states

Looking to create a sleek navigation menu that showcases a colored square when hovered over? I'm currently experiencing an issue where the squares are not aligning correctly with the items being hovered. Switching the position to absolute would likely ...

javascriptjqueryhtmlcsshover

Innovative Features in Google Chrome

There is a nifty effect on Google Chrome that makes tabs light up when new content appears on the page and you are not currently viewing that tab. It can often be seen on sites like grooveshark. If anyone knows how to recreate this effect, I would greatl ...

javascripthtmlgoogle-chrome

What benefits do Adobe Creative Cloud apps offer for developing interactive content in AEM?

My client recently transitioned to AEM for their website, and we are tasked with creating an interactive HTML5 'component' to be embedded on a page. While we have previously used custom HTML5 for components, integrating them into pages on the old ...

javascripthtmljquery-animateadobeaem

Engage in a conversation with a specific individual on the internet using node.js

Looking to implement a chat feature with specific online users similar to Facebook or Gmail using node.js and socket.io. Can anyone assist me with this? Thanks in advance! Client.html <html> <head> <title>My Chat App</title> <d ...

javascriptjqueryhtmlnode.jssocket.io

Utilize CSS to style and highlight Arabic text

I need help with highlighting Arabic text. When I try to mark individual letters, the connected nature of Arabic characters causes the word to break. Does anyone have a solution for this? For example: original word: سلام I only want to highlight the ...

htmlcsshighlight

Tips for retrieving the user-input value from an HTML text field

Exploring the world of JS, I set out to create a basic calculator after just one week of lessons. However, I hit a roadblock when trying to extract user-input values from my HTML text fields. Here's a snippet of my html: <div class="conta ...

javascripthtml

Acquiring inner HTML content with PHP

Looking to optimize meta tags for search and open graph. My goal is to dynamically generate the meta description tag by combining content from two specific elements in the HTML. For instance, let's say we have this snippet of code: <div class="r ...

phphtmlinnerhtml

The initial character of the input must always be a letter

I need assistance with an input element that requires 5 characters, with the first character being a letter: <input mdInput #acronyme placeholder="Company" type="text" maxlength="5" minlength="5" required [value]="acronyme.value.toUpperCase()"> Th ...

htmlangulartypescript

List on the Left Side with Scroll Capability

In my ASP.NET web application that targets .NET 3.5 and utilizes an AJAX asp:UpdatePanel, I have structured the page layout using multiple div elements to divide the vertical space into sections - header, first content, second content, third content, and f ...

htmlcsshtml-table

Issue with a Jquery toggleClass function not working properly on hover

Hello everyone! I am a newbie in the community and relatively new to the world of web programming. I am encountering an issue that is really frustrating me. I attempted to use this code to add a class when hovering over the ul list element so that I can d ...

javascripthtmljquerycssfrontend

Issue: $injector:unpr Unrecognized Provider: itemslistProvider <-

I've spent several days debugging the code, but I can't seem to find a solution. I've gone through the AngularJS documentation and numerous Stack Overflow questions related to the error, yet I'm still unable to identify what's caus ...

javascripthtmlangularjsweb-services

javascript add items to a container

I created a looping animation that features dynamic words, but I'm struggling to append all the spans into the <div id"wordcloud"></div>. Any assistance with this would be greatly appreciated. var interval = 100; var width = 800; var he ...

javascriptjqueryhtml

I continue to encounter a problem where GitHub refuses to navigate links, despite them being properly configured

While working on GitHub, I encountered an issue when trying to set up a website on GitHub domains - the links were not functioning properly. Here is an example of what I was dealing with: <!DOCTYPE html> <form action="homepage.html" meth ...

htmlgithub

Displaying an element to appear over all client applications when hovering

Currently, I have an application that highlights specific areas when hovered over or clicked. While it functions properly, I would like the hover and click effects to be visible on every client, each with an identical overlay setup. I realize my method may ...

htmlcssvue.jsclient

Automatically refreshing the canvas whenever the value of an HTML element is modified in Javascript

Below is the javascript code that is relevant <script> $.fn.ready(function() { var source = $('#source').val(); Meme('url1', 'canvas','',''); $('#top-line, #bottom-li ...

javascriptjqueryhtmlcsscanvas