The grid is out of alignment, causing elements to jump to the next row

After taking an online course at TreeHouse, I used the provided HTML & CSS code and made some adjustments to create a layout with 10 columns instead of the original 12 within a 1000px container. The columns were converted to percentages to fit my needs.

Initially, the layout was working fine with 12 columns, so the issue may be due to errors in my calculations. However, I have double-checked the numbers and am confident they are correct.

If you'd like to take a look, you can visit or

I would appreciate it if someone could review my work with fresh eyes. Thanks! :D

Answer №1

To achieve the desired layout, you need to include the following CSS rule: display: inline-block in both your .grid_2 and .grid_8 classes.

By default, elements with display set to block will each occupy a new line on the webpage.

Take a look at this illustration

The divs #2, #3, and #4 are styled as display: block, while the inline blocks are positioned next to each other in the same line

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

Why does box-shadow only display on the bottom border and not the right and bottom border?

I want to add a shadow effect on the bottom and right sides of a specific div. #navigation-and-slideshow { overflow: hidden; background-color: #fff; padding: 10px 1%; box-shadow: 2px 2px 5px #222; } However, I am only seeing the shadow ef ...

How can I resolve the issue of React not identifying the prop on a DOM element?

Currently, I am learning React and facing an issue with a warning message: "react-dom.development.js:86 Warning: React does not recognize the isSelected prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell i ...

Discover a foolproof method for effortlessly examining an flv or mp4 file embedded within a webpage simply by

I've encountered a challenge with JavaScript. I can successfully check a flash object in a webpage when hovering over it, but I'm unsure how to achieve the same for flv or mp4 objects when either hovering over or moving away from them. Currently ...

What is the established procedure for resetting all elements within an (X)HTML document?

Is there a way to reset elements without using a form like how it can be done with JavaScript? document.forms[0].reset(); I am utilizing AJAX, so do I need to loop through all the elements using JavaScript? ...

Using JQuery to specify an attribute as "required" along with a value does not function as expected

Something seems off with this: $("#elementId").attr("required", "true"); In Chrome and Firefox, the DOM either displays required as the attribute (with no value) or required="" (empty value). Interestingly, it doesn't make a difference what value w ...

Struggling to make images wrap properly using flexbox

I've been struggling to get these images to wrap properly within my container. They keep overflowing beyond the designated width and I'm not sure if it's because I have paragraphs placed under each image. Any ideas on how to make 3 images ap ...

Tips for positioning the Google Custom Search bar

I am looking to position the Google custom search box on the left side of my website. Currently, I am using a website builder called imxprs and have implemented this code for my custom search box. <script> (function() { var cx = '013012 ...

What are the ways to ensure my query columns fill the entire page space?

Currently, when I execute a query, it retrieves the correct information. However, I want to make my columns span across the entire page instead of being centered in the middle with empty space on the sides. Is there a way to expand the columns? Below is t ...

What is the process to modify the color of text that has been _selected_ within a `St.Entry` component in a Cinnamon Applet for the Gnome

I am facing an issue with a St.Entry widget in my Cinnamon applet where the text color is set to black using CSS. However, the selection color of this widget is also black, causing selected text to be unreadable in the theme I am using:https://i.stack.imgu ...

I am looking to switch the content between two divs. Specifically, I want to take the content from div 1 and move it to div 2, while moving the

I am facing a challenge involving three divs. One of them is the main div, while the other two are positioned below it and contain different content. I am trying to find a way to swap the content between div one and div two in such a way that the original ...

Converting Rich Text Format (RTF) Data to HTML: A Step-by

I have information stored in RTF Format within an MS Access Database. The format is as follows: {\rtf1\ansi\deff0\deftab720{\fonttbl{\f0\fswiss MS Sans Serif;}{\f1\froman\fcharset2 Symbol;}{\f2\f ...

"Master the art of creating a curved circular arrow using a combination of HTML, SVG, D3.js

I am looking to design an SVG circle with a fading stroke that blends into the background and features an arrow at one end. The goal is for the ring to fade out completely right above the arrow, similar to the visual reference provided in the image.view ex ...

Optimal approach for customizing the appearance of child components based on the parent component

I'm curious about the optimal method for styling child components based on their parent component. For instance, I want to design a list component that can be utilized in both a dropdown popup and a toolbar, each with its own unique style. There are ...

What is the best way to implement CSS Float in typescript programming?

For a specific purpose, I am passing CSS Float as props. To achieve this, I have to define it in the following way: type Props = { float: ???? } const Component = ({ float }: Props) => {......} What is the most effective approach to accomplish this? ...

Comparing Embedded and Linked JS/CSS

In my experience, I understand the advantages of using linked CSS over embedded and inline styles for better maintainability and modularity. However, I have come across information suggesting that in certain mobile web development applications, it may be m ...

The template in AngularJS route fails to display

I am currently facing an issue with loading multiple pages using AngularJS $routeProvider and two controllers. Whenever I click on a link from the first partial to go to the second one, the second partial fails to render properly, displaying only template ...

Parsing CSV files using AngularJS

I am currently developing a CSV file parser using node and Angular. When a user uploads a CSV file, it is processed on the server side with node and the csv-parse library. This results in an array of objects based on the input CSV file. On the Angular si ...

Ensuring Angular2 Javascript is validating only numerical input and not accepting characters

Access the full project here (excluding nodes_modules): Note: After running the project, all actions related to this issue can be found in the "Edit All" section of the website. Click on that to view the table. The main objective of this website section ...

Outlook for Windows automatically sets the default font for HTML emails to Times New Roman

My email design looks great in Mac Outlook, but Windows Outlook is changing the font to Times New Roman. Below is the code for the email template. Can someone help me figure out what I'm missing? <style style="-ms-text-size-adjust: 100%;&q ...

Contact on the go with our handy mobile contact form

Having some difficulties with the contact form on my website. The link to the form is: here. I am currently working on making the form mobile-friendly (the rest of the site scales down using @mobile screen tags in the CSS). The form is stacked, so there ...