HTML4 section tag failing to generate columns in proper alignment

Currently, I am organizing a list of movies by decade using the article and section elements. An issue has arisen: the alignment between the second and third rows is perfect while the first row seems slightly off-kilter. Below is the code snippet in question:

<article id="movies">

<section>
<h3>Three Weeks (1924)</h3>
</section>

<section>
<h3>Leatherstocking (1924)</h3>
</section>

<section>
<h3>Wild Horse Mesa (1925)</h3>
</section>  

</article>

The layout appears as follows:

I have enclosed it within a div tag. Upon reviewing the code, everything seems to be in order.

TIA

csshtmlhtml4

Answer №1

Don't forget to hit the Run code snippet button to view the outcome of this demonstration I have prepared.

section { float:left; width:33.33%; background:green }
<article id="movies">

<section>
<h3>Three Weeks (1924)</h3>
</section>

<section>
<h3>Leatherstocking (1924)</h3>
</section>

<section>
<h3>Wild Horse Mesa (1925)</h3>
</section>  

</article>

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

Can we use ToggleClass to animate elements using jQuery?

I have a section on my website where I want to implement an expand feature. I am currently using jQuery's toggleClass function to achieve this effect. jQuery('.menux').click(function() { jQuery(this).toggleClass('is-active&a ...

javascriptjquerycss

Developing an interactive website utilizing AngularJS, WCF Service, and SQL Server

Exploring the possibilities of creating a web application, I stumbled upon AngularJS. With plans to incorporate WCF Service and SQL Server into my project, I am intrigued by what these technologies can offer. I want to ensure that AngularJS aligns with my ...

javascriptjqueryhtmlwcfangularjs

Creating a dynamic drag-and-drop layout in React using react-grid-layout

Utilizing the react-grid-layout package for implementing drag-drop and resize components, I have successfully achieved the functionality outlined in the documentation. Description of My Issue My challenge lies in creating a dynamic UI where the layout is ...

javascripthtmlreactjsgrid-layoutreact-grid-layout

A guide on implementing radio buttons in Angular 2 and sending the selected value via a HTTP post request

As a newcomer to Angular 2, I am struggling with the following code: Here is my HTML <form action="POST" (submit)="register()" class="aa-login-form"> <input type="radio" [(ngModel)]="gender" name="sex" value="MALE"> Male <input ...

htmltypescriptangularradio-button

Creating an element that remains fixed once it reaches a distance of 50px from the top of the screen

Hey there! I'm working with an html div element that currently scrolls along with the page, but I was wondering how I can make it become fixed once it reaches a distance of 50px from the top of the screen. Any ideas on how to achieve this? Just to pro ...

javascriptjqueryhtmlcss

Conceal and reveal elements using a specific identifier with

Web Development Guide <ul id="menüü"> <li id="meist"> <p><a href="meist.html">Meist</a></p> </li> </ul> <div id="submenu"> <ul id="submeist"> ...

jqueryhtmlcssweb

Selecting a specific value in a row from an HTML table - a comprehensive guide

This is a similar structure where, if I check the first button, I can retrieve the January month savings stored in a text field. Hello everyone, I am looking to design a table that includes a checkbox in the first column of each row. Upon selecting this ...

jqueryhtmljinja2

Refreshing Javascript with AngularJS

I'm encountering an issue while starting my angular js application. On a html page, I have divs with icons and I want the background color to change on mouse over. This is working using jquery's $(document).ready(function(){ approach. The conten ...

javascriptjqueryhtmlangularjs

"Unexpected behavior: PHP+JS getElementById() function is returning an integer value instead of a

EDIT: Apologies for the PHP section not displaying correctly. I am attempting to extract a decimal value from PHP/HTML in JavaScript using getElementByID().value. However, despite the PHP value being decimal, it is represented as an integer in JavaScript ...

javascriptphphtmlfloating-pointgetelementbyid

Enhance the worth of text box

Is there a way to adjust the value of a textbox by one on keyup, keydown, or tap events? Check out this example. Here is the HTML structure: <div class="right-content" id="rc-0" style="height: 250px;"> <div class="right-cont-main" id="rcm-0" s ...

javascriptjqueryhtmlcss

Creating dynamic links between two cells of two HTML tables within an HTML email using JavaScript

A recent project requires the creation of HTML-based emails with tables for each automation script within the test automation framework. Additionally, there is a request for an extra HTML table to provide a quick overview. The cells in the first column of ...

javahtmljakarta-mailhtml-table

Angular2's customer filter pipe allows for easy sorting and filtering of

Check out the component view below: <h2>Topic listing</h2> <form id="filter"> <label>Filter topics by name:</label> <input type="text" [(ngModel)]="term"> </form> <ul id="topic-listing"> <li *ngFo ...

htmlformsangularangular-pipe

Hover Effect for Bootstrap Gallery

I've created a hover effect for my gallery that is embedded in a Bootstrap Grid. Although the hover effect itself works fine, on some screen sizes, the overlay ends up covering the gallery images. Does anyone have any ideas, solutions, or hints to so ...

htmlcsstwitter-bootstrap-3image-gallerymousehover

Steps for aligning an image to the right using Bootstrap Vue

I'm currently learning Bootstrap Vue and I'm trying to align an image on the right using a b-card header. The challenge I'm facing is that when I add the image, it disrupts the perfect size of the template header, causing the image to show a ...

cssvue.jsbootstrap-4bootstrap-vue

The issue with Jquery .html() function causing spaces to disappear between words

When utilizing jQuery's .html() property to populate a select box, I encountered an issue where the spaces between words were being trimmed down to just one space. Despite including multiple spaces in the option, it would always resolve to a single sp ...

javascripthtmljquery

The XML layout to facilitate the PHP Ajax Dynamic Search

Hello everyone, I recently came across a PHP Ajax Live Search example at this link and attempted to implement it. However, I encountered difficulties with the XML structure. Can anyone provide assistance in creating the optimal XML structure for this code? ...

phphtmlajaxxmllivesearch

Issue with JavaScript causing circles to form around a parent div

I am struggling to position a set of circles around a parent div in my code. I want 6 circles to form a circle around the parent div, but they are not lining up correctly. Can someone help me identify what I'm doing wrong? var div = 360 / 6; var ra ...

javascripthtmlarrayscss

Enhancing nouislider jQuery slider with tick marks

I have integrated the noUIslider plugin () into one of my projects. I am seeking guidance on how to display tick marks below each value on the slider. This is the current initialization code for the slider: $slider.noUiSlider({ 'start': sta ...

javascriptjquerycssjquery-uinouislider

Positioning a span to be below an input field

Below is the code for a Blazor component that includes a textbox which can be edited with the click of a button. @if (_editing) { <div class="floatingbox position-relative"> ...

cssbootstrap-4blazor-server-side

Creating responsive CSS layouts for various device sizes

My webpage features a form with a prompt for the input box, followed by the input box itself. I want to implement two different layouts based on the device accessing the page. For cell phones, I want everything stacked vertically. However, for computers, ...

htmlcssmedia-queries