I have a container with 100% width. I am trying to position three divs inside it next to each other, all with the same height as the parent.
Unfortunately, despite setting the display property to inline-block, they are not aligning properly and appear stacked on top of each other.
I expected them to flow horizontally, but they seem to be behaving as if the display is set to block instead of inline-block.
What could be causing this issue?
The content is still displaying as block even though I have set it to display as inline-block.
There are a few options you can try. You can either float each element you want on the same line to the left, or you can add display:inline-block; to them.
I just noticed that you applied display:inline-block; to the parent element instead of the child elements, which is why it didn't work as expected.
To float left: https://jsfiddle.net/25brcg9x/1/
To use display: inline-block: https://jsfiddle.net/beekvang/25brcg9x/2/
To achieve equal spacing between all children of div.col-12 or #aboutUsForm, you can utilize the display:flex property and set a uniform margin for all elements. Below is a functional example:
#aboutUsForm {
background-color: yellow;
height: 50px;
display: flex;
}
.col-12 div {
margin:0 10%;
width:15%
}
#col1 {
background-color: black;
}
#col2 {
background-color: green;
}
#col3 {
background-color: blue;
}<body>
<div class="container-fluid">
<div class="row">
<div class="col-12 " id="aboutUsForm">
<div id="col1"></div>
<div id="col2"></div>
<div id="col3"></div>
</div>
</div>
</div>
</body>To implement this specific selector in CSS, you can use the following code:
.parent > * {
display: inline-block;
}
The symbol '*' signifies all elements in the parent container.
If you want the child divs to appear inline, consider adding the CSS property display:inline-block or floating them. As they are currently block level elements, they will naturally stack on the next line.
It is important for the elements within your #aboutUsForm to have a display property of inline-block as well. There seems to be a misconception that these children will automatically inherit this style from their parent, but in reality, this is not how CSS works.
Furthermore, it is unnecessary for your #aboutUsForm itself to be an inline-block unless it functions as a main column with sub columns as its children.
I am attempting to automate the calculation of a table by inputting values from another table. There are two tables involved; the first one has an input field named profit_rate, and the second one is supposed to calculate cost * currency_rate * profit_rate ...
Inquiring on how to achieve vertical center alignment of text and images for a website section similar to the one shown in this image: https://i.sstatic.net/s8gNh.jpg. The intention is to align the logos and the corresponding text of company names situated ...
Is there a way to smoothly slide a div left and right using jQuery animation? I have been trying to achieve this by implementing the code below, which can be found in this fiddle. The issue I am facing is that every time I click on the left or right butto ...
Check out this HTML snippet: <div class="last-minute"> <span>Modulo:</span>4-3-3<p>Mandorlini is hopeful to have Juanito Gomez and Cirigliano back in action after the break. There's no need to worry about Hallfredsson who was ...
I have limited knowledge of javascript, but I stumbled upon this amazing fiddle that I would like to incorporate into my project: http://jsfiddle.net/5w5ku/1/ The issue I am facing is that I want it to persist for a duration of ten minutes. Despite atte ...
I am in search of a way to automatically print multiple HTML files or URLs with just one click from my custom android app. Previously, I utilized the Google Cloud API for this purpose, which involved adding the files to Google Cloud and having them printed ...
HTML: <!--gallery--> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script> <script> !window.jQuery && document.write('<script src="jquery-1.4.3. ...
Is it possible to create a new CSS class using browser inspection that contains new hover/focus styles? For example: .CanIDo { /*some css rules (ex.)*/ width: 100; } /*my question (USING BROWSER INSPECTOR, not directly typing in the CSS file)*/ .CanI ...
How can I add margin-top based on the tab that is clicked? Specifically, when TAB 4 is selected, I want the content to remain in the same position from the top. https://i.sstatic.net/ObDUg.jpg ...
Hey everyone, I've been attempting to sanitize a string with HTML entities using PHP, but I'm running into some issues. Below is a snippet of my code: $body = "Mal ein neuer &lt;b&gt;Test&lt;/b&gt;&lt;br& ...
Does the behavior of element.innerHTML = '<script>alert()</script>'; differ across browsers? Can I consistently expect innerHTML to not parse scripts? ...
<input type="checkbox" disabled="disabled" checked="checked" name="is_ok" id="id_is_ok"/> Is there a way to set a default value for this disabled input? I've noticed that if this field is disabled and I make edits to my data, the changes are n ...
Click here for the interactive demo. I'm trying to create a draggable effect for the cover element within the pic-area, but I only want it to be draggable until it completely fills the space without any white gaps. Please have a look at the example b ...
I've created a user greeting message that changes based on the time of day - saying Good Morning, Good Afternoon, or Good Evening. It's working well, but I'm wondering how I can make the message hide after it shows once until the next part o ...
I am seeking a method to adjust the background color of a specific element based on the background itself. While CSS offers the mix-blend-mode property, I am looking to specify the color manually. Ideally, I would like to achieve the same effect using an ...
I'm facing a challenge while trying to incorporate rich snippets on my website, particularly in the AggregateRating section where the ratingValue is only displayed as an image. This is how my markup currently looks: <tr itemprop="reviews" itemsco ...
During my studies on w3school, I came across a page that mentioned only the following values are valid: application-name author description generator keywords http://www.w3schools.com/tags/tag_meta.asp However, upon further exploration of webs ...
I'm currently working on a WordPress mega menu with four columns, each with a heading or top menu item. The headings should have a gradient border at the bottom and differ in length. However, I'm facing an issue where some headings span two lines ...
My select element has over 50 options, but the options popup and go off the page without a scroll bar. As a result, I can only see and select up to 20 options. Is there a way to make the select element display a vertical scroll bar when there are more tha ...
Everything looks great on Firefox and IE8, but on IE 7 the middle "search input text field" is not aligned properly with the other two fields. It seems to be dropping down slightly. Here is the code - thank you for your help: <!DOCTYPE html PUBLIC "-/ ...