Just starting out with HTML and CSS - looking to learn about adjusting grid positions

Looking for some assistance with my website layout which consists of 3 columns.

.grid, .col-1-3, .col-2-3 {
 padding-left: 15px;
 padding-right: 15px;
}
 .container,
     .grid {
  margin: 0 auto;
    width: 960px;
 }

I've noticed that the third column is not aligning properly and is overflowing to the next line.

Despite trying different adjustments to padding and other settings, I can't seem to fix the issue - any suggestions or help would be appreciated!

Just started learning HTML a week ago, so I'm still new to this - thanks in advance!

htmlcss

Answer №1

If you're aiming for a row with 3 columns, each column should ideally have a width of 1/3 pixels or less out of the total width. For example, if your container is 960px, then each column should be 320px or less.

Alternatively, consider exploring flex-box and CSS grid as they offer more efficient solutions to your layout needs.

Keep coding happily :)

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

Ensuring various conditions with ngIf

I've created a toggle function that updates the text of a link, but I'm struggling to handle multiple conditions. For example, *ngIf="condition1 or condition2". Below is an excerpt from my code: <a routerLink="/ads" class="tip" (click)="togg ...

htmlangular

By clicking on the image, you can expand it to a specific size, and clicking again will return it to its original size. This feature maintains the exact

There have been numerous inquiries regarding how to make an image larger on click, and then revert back to its original size upon clicking again. I've spent the past 10 hours experimenting with many solutions, but none of them achieve the desired out ...

htmlcssimage

Pattern matching: Identify text elements specifically within an HTML tag

I've been experimenting with a text highlighting script. Check out my initial attempt here. Here's the code snippet: http://jsfiddle.net/TPg9p/3/ However, I encountered a problem – it only works with simple strings and not those containing HT ...

javascriptjqueryhtmlregexdom

Is IntelliJ equipped with CSS autocomplete and Emmet features?

Encountering some challenges with IntelliJ 13 and autocompletion while working on CSS. Previously, to set margin: I would simply type: mar then press Tab. However, in the new version, it now shows max-resolution instead: Initially thought it might be rel ...

cssintellij-idea

Implement varying styles in React components

In my React project, I am attempting to create a unique progress bar with custom styling. Specifically, I have a dynamically calculated percentage that I want to assign as the width of a div element. Initially, I tried achieving this using Tailwind CSS: &l ...

javascriptcssreactjstailwind-css

Displaying text at the 5-second mark and hiding it at the 10-second mark of a video

Is there a way to display text at 5 seconds into a video playing on the website, and then hide it after 10 seconds? $(document).ready(function() { $('video').on('timeupdate', function() { var timeElapsed = Math.round($(this).get( ...

jqueryhtmlcss

The combination of HTML and JavaScript is causing the textbox to display a NaN error

Having a little trouble with my homework assignment. Every time I try to declare a variable as parseFloat in JavaScript, the textbox ends up showing NaN instead of the expected result. Here's the code snippet: <!DOCTYPE html> <html> <h ...

javascripthtml

menu roll-up in an upward direction

Is there a way to implement the CSS effects mentioned in this article to make the menu roll up instead of down? Learn How to Create a Menu that Rolls Up Using CSS! ...

htmlcssdrop-down-menu

Add HTML content dynamically to a layout that is connected to a controller

While I may not have the proper heading for this question, I need to add this piece of HTML dynamically to my layout and attach its click events with a controller. <div id="subscriber1" class="participant-video-list"> <div class="participant- ...

htmlangularjscontrollerbind

What is the best way to create a continuous loop of images on a never-ending

Many discussions cover similar topics, but I have not yet found a solution to my specific question. Currently, I am working on creating a model for a website and I am interested in incorporating an infinite rotating gallery with a limited number of images ...

javascripthtmlreactjssassflexbox

Checking for Files without Compiling: A guide to using Webpack 2

I have a scenario where I am importing several .css files from npm modules in my main.js file, which serves as the entry point for my webpack configuration. Here is an example of how it's set up: "use strict"; const ExtractTextPlugin = require("extra ...

javascriptcssnode.jstwitter-bootstrapwebpack

Struggling to customize the style of bootstrap components

Struggling to get my custom css to take precedence over Bootstrap4 components in my Django project. I'm a beginner in front-end development and I'm hoping to articulate my question clearly. Note: This is an HTML sheet within a Django project. My ...

cssdjangobootstrap-4frontend

ReactJS allows the display of placeholder text for input fields only when they are actively selected

After modifying the BootstrapInput code snippet to the following: <BootstrapInput id="age-customized-input" placeholder="Search Title" /> I noticed that the placeholder text only appears when the input field is activated. Does anyone kno ...

cssreactjsmaterial-ui

Is there a simple method to convert XML to HTML and then store the resulting HTML file?

Looking to utilize an XML file for creating HTML emails? I can create an XSL file to convert it to HTML, but am unsure how to save or copy the resulting HTML. Simply viewing the source of the XML file shows the original XML source, not the transformed HTML ...

htmlxmlxslt

Step-by-step guide: Crafting a webm video for a three.js demonstration using webgl_kinect

As stated in a post on the topic of creating a webm video from kinect data for three.js example webgl_kinect, it is necessary to have both webm and nfo files to run the example. I attempted to modify and recreate the example using my own webm file, but e ...

htmlhtml5-videothree.jswebglwebm

How to customize the hover background color for multicolored series in Highcharts?

Highcharts offers a background color for all columns in a series. The hover color across themes is consistently a light blue (155, 200, 255, .2). To see an example, visit: http://jsfiddle.net/38pvL4cb/ If you look at the source code, Highcharts creates a ...

javascriptcsshighcharts

Having trouble centering text vertically within a TD cell

Need help with vertically centering text in TD elements. Tried various methods but unable to achieve the desired outcome. <table class="student_table"> <tr> <th class="class_box" colspan="4">Batc ...

htmlcss

Nodemailer is failing to send emails on Heroku

Recently, I encountered an issue that has been puzzling me. I use cloud9 for work and nodemailer works perfectly fine, sending all emails from a form I created. However, when I deployed a small server to Heroku with just a change in an environmental vari ...

javascripthtmlnpm

The onClick event cannot be triggered within a div that is generated dynamically

I am having an issue with a jquery code that dynamically generates a div. The problem I'm facing is that the onclick function for the anchor tag is not calling the required function. Below is the code snippet: $("#new").append(' <ul cla ...

javascriptjqueryhtmlajax

JQuery datepicker - showcase selected date from the datepicker on a calendar view

Is it possible to highlight the dates selected by two different associates on associate.html in training.html? The scenario is that two associates choose their training dates and these specific dates should be highlighted on the training calendar. associa ...

javascriptjqueryhtmldatepicker