Aligning a tri-column design

I'm encountering an issue with this code that's preventing it from running properly on Google Chrome (I haven't tried other browsers). When the content displays, the regular paragraphs appear aligned to the far left instead of being centered, and there are gaps in the background around the links, making it look like I highlighted the letters in MS Word. Despite setting the padding to 0 as an attempt to fix this, nothing seems to work. What am I missing?

<html>

<head>
<link rel="stylesheet" type="text/css" href="My Chars.css">
<title>My Chars</title>
</head>

<body>
    <!--Defines the general styles for the page-->
    <span class = "default" style = "float:left; background-image:url('Paper Mache.jpg'); width:100%; height:100%">

        <!--Empty header-->
        <div id = "header" style = "height:50px; width:100%; align:top">

        </div>
        <br />
        <!--Left links panel-->
        <span class = "default" style = "width:50px; padding:0px;">
            <a href = "original.html">Original Chars</a>
            <br />
            <a href = "updated.html">Updated Chars</a>
            <br />
            <a href = "blended.html">Blended Chars</a>
        </span>
        <br />
        <!--Main body text-->
        <span class = "default">

            <div class = "section_head">
                My character site
            </div>

            <span class = "default">
                This site is dedicated to the various ideas I've had regarding various characters over the years. The site is divided into three main sections, based on where my input starts and stops. These divisions are:
            </span>
            <ul class = "default">
                <li>
                    <div style = "font-weight:bold">
                        Original Characters
                    </div>
                    These are characters created "from scartch". I designed almost everything, from the name to the costume to the character's background, powers, skills, weapons, etc.
                </li>
                <li>
                    <div style = "font-weight:bold;">
                        Updated Characters
                    </div>

                    These are existing charactes whose backstories, skills, and/or powers have been altered to reflect the times, make a more logical or cohesive origin --especially with respect to an archenemy or to merge several versions of that character together.
                </li>
                <li>
                    <div style = "font-weight:bold;">
                        Blended Characters
                    </div>

                    These are two or more different characters that have similar or shared elements in terms of backstory, character themes/arcs, powers/skills/abilities, etc. that have been mixed together so that the best elements of the individual characters produce a new, better "combination character."
                </li>
            </ul>           
            <span class = "default">
                In addition to these three main sections, there are subsections for heroes and villains and supporting cast. There are also divisions between "universes," e.g. DC comics universe vs a movie's universe.
            </span>
        <!--Closing th main body-->
        </span>
    <!--Closing the main page details-->
    </span>

</body>
</html>

Styling in an external style sheet:

body
{
    margin: 0;
}
.default
{
    width: 800px;
    height: 100%;
    background-color: white;
    margin-left: auto;
    margin-right: auto;
}

.section_head
{
    background-color: white;
    font-size: large;
    font-weight: bold;
    text-align: center;
    width: 800px;
    margin-left:auto;
    margin-right: auto;
}

a:link
{
    color: red;
    font-weight: bold;
    padding: 0;
    margin: 0;
}

View JSFiddle example - http://jsfiddle.net/L9LvS/

Answer №1

It seems like there are some areas for improvement in your code.

For example, span tags are inline elements, so it is recommended to use div or p tags instead of block elements. Another alternative is the new CSS display property called inline-block, which can be a cleaner option compared to using float and causes fewer issues on the website later on. You can find more information about inline-block here.

Based on what I understand about your goal, switching to block elements may help to resolve many of the problems you're facing. If you prefer not to rewrite your HTML right away, you can try testing the changes with display:block first.

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

Developing a perpetually scrolling container within a webpage

I am attempting to implement a scrollable div on my webpage that can continuously load content. I am currently using the following code snippet for this --> http://jsfiddle.net/cyrus2013/Qq85d/ $(document).ready(function(){ function loadMoreContent() ...

Challenges arise when using Bootstrap 4 for country selection

There have been reports that bootstrap 4 country select is not functioning properly. In an effort to troubleshoot, I delved into the documentation to find a solution. To make bootstrap-select compatible with bootstrap 4, refer to: Bootstrap 4 beta-2 ...

Tips on connecting a font directory from FontAwesome

I am currently attempting to incorporate the fonts provided by FontAwesome for their icons, and they specify that a root folder named Fonts is needed. My attempt to link it was using: <link type="text/css" href="/myPath/font" /> ...

Exploring the world of using Bootstrap containers, rows, and columns

I have a good grasp on containers and columns, but I am a bit confused about rows. The example below shows a 50/50 split. <div class="container"> <div class="row"> <div class="col-md-6"> 50 / 50 Content </ ...

What is the method to ensure an element is displayed in Selenium WebDriver?

Looking for assistance on how to choose options from a dropdown when the element is not visible and has a boolean attribute? Here's the HTML code snippet: <select id="visualizationId" style="width: 120px; display: none;" name="visualization"> & ...

Switch between light and dark mode on a webpage using HTML

I am looking to create a script using JavaScript, HTML, and CSS that can toggle between dark mode and night mode. Unfortunately, I am unsure of how to proceed with this task. https://i.sstatic.net/xA3Gq.png https://i.sstatic.net/v5vq5.png My goal is to ...

Creating three boxes within a single div using standard HTML and CSS

I created this design using Microsoft Paint and now I want to bring it to life using HTML and CSS. https://i.stack.imgur.com/dwNZi.png The numbers represent the box numbers in the design. Here is my attempt at coding this: HTML file <!DOCTYPE html& ...

Achieving full screen height at 100% with the CSS property of display: table along with table-cell tag

I'm facing an issue with the layout of my page. In this example (http://jsfiddle.net/RR2Xc/2/), the footer is not positioned at the bottom as desired. If I force the footer to be at the bottom, it creates a gap between the sidebar and footer where the ...

Comparing jQuery's min-width and width properties: A guide on eliminating pixels

Exploring some basic jQuery and JavaScript here. When I use the .width() method, I get an integer value. However, when I use .css('min-width'), it returns a value in pixels which makes it challenging to perform calculations. What would be the be ...

retrieving the webpage's HTML content from the specified URL using AngularJS

Utilizing the $http.get('url') method to fetch the content located at the specified 'url'. Below is the HTML code present in the 'url': <html> <head></head> <body> <pre style = "word-wrap: break ...

Is there a way to adjust the position of the scrolling bar to be closer to the post area?

I was exploring this page (http://noahsdad.com/state-fair-texas-2011/) and noticed a scrolling sidebar to the left of the content area. I'm looking to adjust it so that it is closer to the content area. Any suggestions on how to achieve this? Thank y ...

Trouble with Hero Unit Styles not being implemented

Looking to convert a PSD design to HTML using Bootstrap, but the hero unit is not displaying its default style as expected. <html lang="en"> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> ...

Secure Social Security Number (SSN) Input Field showing only the final four digits | includes option to show/hide

I need to show only the last four digits of the SSN and mask the rest with asterisks, like: ****-**-7654 Additionally, I want to implement a toggle functionality where users can reveal or hide the masked characters behind the asterisks. <in ...

Javascript window.scroll function malfunctioning in some browsers while running in localhost

Check out this codepen link where everything is working, but unfortunately not locally: https://codepen.io/LoudDesignStudios/pen/RwxPJKY <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> < ...

PHP, HTML, Email - Special characters in emails are being altered into other symbols

Here's the Situation... I am currently utilizing PHP to send out emails in a conventional manner... Snippet 0 mail('', $subject, $message, $headers); ... with the following content setup: Snippet 1 $boundary = uniqid('np&a ...

What could be causing the malfunction of my button's event handlers?

Users can fill out a form in which they provide information about a grocery item they want to add to their cart. After completing the form, they can click on the "Add Item" button. Here's the form in my app.component.html: <form (ngSubmit)="a ...

Comparing the use of visibility: hidden with -webkit-transform: translate3d() within a PhoneGap application

Currently, I am creating a hybrid application using PhoneGap. As part of the design, I have several divs (each representing a page) that I toggle between by changing their visibility in CSS using "visibility: hidden" and "visible". However, I recently ca ...

Using Angular 2 to toggle visibility based on a select box's value

<div class="form-group"> <label class="col-md-4 control-label" for="is_present">Is Present?</label> <div class="col-md-4"> <select id="is_present" name="is_present" class="form-control" *ngIf="candidates.is_present === tr ...

The navigation bar on the website highlights vibrant green arrows next to the

I'm having trouble implementing a bootstrap menu on my website using the code provided by Bootstrap. The menu is not displaying correctly and instead showing small green UL arrows. I have JavaScript and Bootstrap scripts in my project. Is there a way ...

Is there a way to determine the app bar height within a React Material UI application?

I'm trying to create a full-screen image for the opening of my website using React and Material UI. Here's a snippet of my JSX code with the default Material UI theme: <AppBar> //code in between </AppBar> <Container sx={{margin: ...