Inline-block display causing divs to act unpredictably

I am working with a main div that contains three smaller divs inside. Each of these divs has been assigned a width of 30%, and they are all perfectly centered within the main div.

To ensure that the three divs appear side by side, I used the display: inline-block; property. However, I encountered an issue where when I set a height for the divs, the two left-most divs shift downwards while the right one remains in place. These divs only contain simple inputs and there is nothing causing them to dynamically increase in size.

Can anyone suggest a solution to fix this problem?

csshtml

Answer №1

Solving the issue may be challenging without access to live code, but here are a few suggestions to try. First, for the DIVs within the main DIV, consider assigning the class vertical-align:top.

Another tactic is to adjust the line-height property to achieve the desired height instead of using the height property.

If these approaches do not help, it might be beneficial to share your HTML and CSS on jsfiddle for further assistance.

Answer №2

Absolutely! It is crucial that the three inner divs are floated to the left in order to ensure they align perfectly. Not floating them can lead to compatibility issues across different browsers.

Here is the CSS code:

#wrapper { width: 100%; height: auto; margin: 0; padding: 0;}
.inner { width: 30%; float:left; min-height:50px; margin:0 5px 0 0;}

And here is the HTML code:

<div id="wrapper">
   <div class="inner"></div>
   <div class="inner"></div>
   <div class="inner" style=" margin:0;"></div>
</div>

Answer №3

Check out this solution that's ready to use: http://jsfiddle.net/j3zjg/

<style>
#wrapper{
    width:700px;
    height:400px;
    border:1px solid blue;
}

#wrapper section{
    width:25%;
    float:left;
    height:60px;
    background:blue;
    margin-right:10px;
}
</style>

<div id="wrapper">
    <section></section>
    <section></section>
    <section></section>
</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

I created a design for a subscription form that appears aesthetically pleasing in Firefox, however, it does not maintain the same appearance in Opera. Any suggestions on how I can resolve this issue?

Why does my code display differently in Firefox compared to Opera? In Firefox, the height of input/text and input/submit elements are similar. However, in Opera, the height of the input/submit is reduced. This is the HTML code: < ...

htmlcssfirefoxopera

Using Vanilla JavaScript to Disable a Specific Key Combination on a Web Page

On a completely random English-Wikipedia editing page, there exists a way to add content (for example, "test") and save it using the existing key combination of Alt+Shift+S. My goal is to specifically prevent this action without removing the save button b ...

javascriptjqueryhtmlreturnkeyboard-shortcuts

Matching Figures to their Descriptions

I am currently working on a website and looking to include images with captions that display the price of each item underneath. The issue I'm facing is that the captions are aligning horizontally instead of vertically. Can anyone provide assistance wi ...

htmlcssalignmentfigurecaption

Discovering the flaw in my programming that pertains to JSON parsing

After countless hours of searching and reviewing documentation, I am still unable to identify the issue with my jQuery code. My goal is to practice reading a local JSON file and displaying its contents in the body of my HTML document. $(document).ready(fu ...

javascriptjqueryhtmljson

The controller is referencing $rootScope which has not been properly defined

Here is my understanding of the controller concept. Whenever I launch the application, an error message appears saying "$rootScope is not defined." Can someone provide assistance in identifying the issue? var webadmin = angular.module('PcPortal' ...

javascripthtmlangularjs

Ways to incorporate a dynamic value into a chart created with chart.js?

I want to create a doughnut chart representing the number of individuals who have tested positive for Coronavirus and the number of deaths related to it. How can I transfer the same data from the top container into the chart? The confirmedCases and deaths ...

javascripthtmljsonanimationchart.js

Using single-line ellipsis with the Material-UI select and option components

I have a TableHead Component with multiple columns. Among them is a <Select> element that allows users to filter the table content based on one of four statuses. I am trying to implement an ellipsis at the end of the option string if it exceeds its c ...

cssreactjsmaterial-ui

What is the best way to center align the div container horizontally?

Trying to center the #container but all methods have failed. How can I achieve centering using only CSS? body { text-align:center; } <div id="app"> <div id="container"><div id="container_red" style="position:absolute;left:0"> ...

css

I am encountering issues with setting a background image in Bootstrap 3.1.1 while trying to achieve a par

I'm struggling to add a background image to my bootstrap site. I'm attempting to create a parallax site using stellar.js, and while the site is functional with text on each slide and correct scrolling links, the images just won't load. Despi ...

cssimagetwitter-bootstraptwitter-bootstrap-3parallax

Difficulty transferring form information to PHP utilizing Ajax

Originally, I had a traditional HTML form that submitted data through a button, redirecting the user to the page where the PHP code ran successfully. Now that everything is functioning as expected, I aim to pass the form variables to PHP using Ajax in ord ...

javascriptjqueryhtmlajax

Transmitting the identification number of a post with the help of J

I am currently working on a while loop in PHP that fetches associated results from a query and displays them within a class identified by the user who created the post. My goal is to send the id of the class to PHP, similar to how I am sending the num vari ...

phpjqueryhtmlajaxvariables

A CSS rule to display a nested list on the left-hand side

I created a menu that you can view here. When hovering over "tanfa demo example," the sublist appears on the right side. The issue I'm facing is that my menu is positioned all the way to the right, which means the sublist also appears on the extreme ...

javascriptjquerycssdrop-down-menu

Show various forms that gather information

Upon selecting an option from the drop-down menu, a certain number of forms will be displayed with captured data. For example: Imagine owning a form with fields such as No. of Applicants, Applicant Name, Telephone, E-mail, etc... If the user selects 2 fo ...

phpjavascripthtmlmysql

What are some effective ways to stretch specific muscles?

I am facing an issue with my select element. The default value is "please choose," but there are options like "Accommodation & Hotels" that are longer and not clearly visible on IE browsers, though they work fine in Firefox. How can I resolve this issue? S ...

javascripthtmlcss

Guide to making a JavaScript button that triggers an iframe to open upon user clicking the button

I'm currently enhancing the comment section for posts on my website. I am looking to implement a button in javascript that, when clicked, will open an iframe window displaying comments similar to how Facebook does on their post. If there are other lan ...

phpjavascripthtmliframe

Button Click Not Allowing Webpage Scroll

I am currently in the process of developing a website that aims to incorporate a significant amount of motion and interactivity. The concept I have devised involves a scenario where clicking on a button from the "main menu" will trigger a horizontal and ve ...

javascriptjqueryhtmlcss

Is it possible to employ the columns tag within an HTML email design?

I am attempting to design an HTML newsletter that features three columns. In my initial attempts, I utilized the columns tag: <span style="-webkit-column-count: 3; -moz-column-count:3; column-count:3; -webkit-column-width: 160px; -moz-column-width:160 ...

htmlcssgmailhtml-email

JavaScript Issue Causing Jquery Carousel Dysfunction

I am having trouble with the slider I created using JS Fiddle. The link to the slider is not working and I need some assistance. Click here for the slider <div class="row"> <div id="myCarousel" class="carousel slide vertical"> &l ...

javascriptjqueryhtmlcss

Can you display the menu and then conceal it by clicking elsewhere?

I am facing a unique situation where the body tag does not visually wrap all content. In this scenario, I have 3 TR's that each contain 2 TD's - one for information and one for a yellow div. By clicking on the Info TD, a div opens (positioned a ...

jqueryhtml

Unable to set the width for a div element within the bootstrap grid layout

When trying to set the width of a div tag to 100% within a bootstrap grid system (col-lg-3), I noticed that the div ends up taking the full width of the browser instead of just 100% of its parent(col-lg-3). .sidebar { color: #fff; f ...

htmlcss