What could be causing the divs to not display as inline-block elements in the HTML section?

Currently, I am utilizing an Html5 template. The template is a onepager and there is a specific section that I would like to include for displaying 'business hours'. Ideally, this section should list three days with their corresponding times on each line. The layout I have in mind involves having one line of divs for Monday, Tuesday, and Wednesday; followed by another line with divs for Thursday, Friday, and Saturday; finally concluding with a line for Sunday.

An example of the div structure I have in place:

<div>
<strong> Monday </strong><br>
09:15 - 10:00 .. <br>
11:15 - 12:00 ..<br>    
17:30 - 18:15 .. <br>
19:15- 20:00 ..
</div>
<br>

All these divs are children elements within:

<section id="schedule" class="times">

Despite trying to style it using the following CSS selector:

        section.times> div {
            background-color: #e8edec;
            display: inline-block;

        }

I am puzzled as to why the contents still appear stacked vertically instead of side by side?

csshtml

Answer №1

I hope this solution is helpful to you. You can remove the <bar> element from your code... I have created a CSS code for you.

<div class="c1">
<strong>Monday </strong><br>
09.15 - 10.00 .. <br>
11.15 - 12:00 ..<br>    
17:30 - 18:15 .. <br>
19:15- 20:00 ..
</div>

<div class="c2">
<strong> Monday </strong><br>
09.15 - 10.00 .. <br>
11.15 - 12:00 ..<br>    
17:30 - 18:15 .. <br>
19:15- 20:00 ..
</div>
<br>
</section>

Here is the CSS code:

.times> .c1 {
float: left;
width: 33.33333%;}
.times> .c2{
float: left;
width: 33.33333%;}

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

Tips for adjusting the placement of an object within a table

Below is an example of a basic table: table, th, td { border: 1px black solid; border-collapse: collapse; } <table> <tr> <th>number</th> <th>name</th> <th>id</th> </tr> <tr&g ...

javascripthtmlcsshtml-table

Maintaining divs in a row with Bootstrap 4

I need help with a list item containing two divs. I want the div with the checkmark to always stay on the left side even when the screen is resized. Currently, on smaller screens, the divs stack on top of each other. <ul> <li class="comment"& ...

twitter-bootstrapcssbootstrap-4

What could be the reason for the lower section of my website not being displayed?

I'm having an issue with a new div I added to the bottom half of my website - it's not showing up. Oddly enough, when I test the same code on a separate web page, it works fine. Can someone please take a look at the code and help me out? Thank yo ...

pythonhtmlcssdjango

Utilizing the text field feature within Twitter Bootstrap 3.0 in-line styling

I am attempting to create a horizontal form with an inline text field split into two sections: one on the left and one on the right. The left side will contain horizontal text fields, some of which are inline, while the right side will have a mix of inline ...

htmlcsstwitter-bootstraptwitter-bootstrap-3

What could be causing the absence of HTML attribute suggestions in my Visual Studio Code?

I'm experiencing an issue in my VS Code where the suggestion feature is not working properly. When I try to type "onClick, href, src, etc", the suggestions do not show up as they should. Interestingly, this problem doesn't occur in my older code ...

htmlvisual-studio-codejsxemmet

The height of the Material UI dropdown is displaying in an improper manner

I'm currently experimenting with the Material UI dropdown on my website, utilizing the react-select library. However, I've encountered an issue where the UI gets compromised when using an option that exceeds the width of the dropdown. If anybody ...

cssreactjsuser-interfacematerial-uireact-select

Steps for creating checkboxes for individual table rows in HTML using embedded PHP and updating their values in a PostgreSQL database:1. Begin by iterating through each

I have already retrieved the data from the database. It is displayed on the HTML table, but it is currently in non-editable mode. I need to ensure that the data shown is accurate and update its Boolean value in the database. Otherwise, incorrect records sh ...

javascriptphphtmlcodeignitermodel-view-controller

The Bootstrap navbar collapse fails to expand in the appropriate location

Whenever I try to expand the navigation on mobile mode by clicking the button, it doesn't push the content downwards. Instead, it just opens a small menu next to the button. Did I make a mistake in my code? <div class = "container"> ...

htmlcsstwitter-bootstrap

Conceal a column within a nested HTML table

I am facing a challenge with a nested table column structure: My goal is to hide specific columns based on their index within the table. Can someone explain the concept behind achieving this? I am unsure of how to get started on this task. <table clas ...

javascriptjqueryhtml

Illuminate specific areas of a mapped image upon hovering over text on a webpage

Scenario: There is an image on the page with various mapped areas. A list of text elements is also present on the page. Desired functionality: Hovering over different text items in the list should result in highlighting corresponding areas on the mappe ...

javascriptjqueryhtmlimagehighlighting

A web address shared in a post appears within the nested frame of an iframe

I'm encountering a somewhat confusing issue. I am attempting to submit a URL to an iframe located on the same page. Upon clicking submit, the iframe replicates the current page, but with the correct URL displayed in the duplicated iframe. It's ma ...

phphtmlformsiframe

Executing the command in the Windows Command Prompt by utilizing an HTML button

When a button on my HTML page is clicked, I want to execute the command python abc.py in the Windows command prompt. The python file is stored at C:/abc.py. I'm looking for guidance on how to code the HTML page to achieve this functionality. Any assis ...

htmlwindowspython-2.7commandcommand-prompt

What is the best way to create an impact?

Need help fixing the parallax effect on this page. I attempted to implement a parallax effect but encountered some issues. Here is the JavaScript code: $objWindow = $(window); $('section[data-type="background"]').each(function(){ var $bgOb ...

javascriptjquerycss

Tips for concealing items on a website within a WebView

Is it possible to hide the header element with the search bar and logo when loading this page on a Webview? I'm not familiar with JavaScript, so is there a way to achieve this? The section I am looking to conceal ...

javascriptandroidhtmlandroid-webview

The functionality of Angular animate becomes compromised when there is a conflict between predefined CSS states and transition states

Explore this example CSS code: /* animations at the start */ .error-animation.ng-enter { -webkit-transition: 0.5s linear all; transition: 0.5s linear all; opacity: 0; } ...

javascriptcssangularjsanimationng-animate

Is it possible to create a dynamic input form that appears within a textarea using jquery?

I've designed a unique form using a textarea to display messages from users, rather than the traditional ul list. Additionally, I have included an input form where users can type their messages. My goal is to make this input form visible on the textar ...

javascriptjqueryhtmlcssforms

Angular 4 Form remains valid even when an incorrect value is entered

Within my Angular 4 project, I encounter the issue of controlling input fields in multiple forms. Specifically, I need a mechanism to disable the save button if the input value is incorrect. For example, when I require an input field to only accept positi ...

htmlangularuser-input

Converting HTML to PDF: Transform your web content into

I have a couple of tasks that need to be completed: Firstly, I need to create a functionality where clicking a button will convert an HTML5 page into a .PDF file. Secondly, I am looking to generate another page with a table (Grid) containing data. The gr ...

javascriptcsshtmlpdf

Can you remind me of the specific CSS class used for Internet Explorer in Twitter Bootstrap?

Currently utilizing Twitter Bootstrap and curious if there is a specific CSS class to designate IE browsers within the BODY or HTML tags. Interested in writing CSS specifically for all IE browsers. Aware that Bootstrap offers some CSS classes for IE brows ...

htmlcssinternet-explorertwitter-bootstrap

When running the `npm run dev` command, Tailwind does not seem to function

I have been given a task to create forms using tailwindcss, but when I try to run `npm run build`, it doesn't work. Can anyone assist me with this? npm ERR! code ELIFECYCLE npm ERR! errno 9 npm ERR! <a href="/cdn-cgi/l/email-protection" class="__cf ...

javascripthtmlcssdom