Arranging two tables, one slightly misplaced from the other

I have been searching through various websites, but I cannot find a solution to the specific issue I am facing. I am attempting to create a web page with a table aligned to the left side while keeping the rest centered. However, when I align items in the center, they are being pushed over to the right by the left-aligned table. How can I ensure that content aligned in the center remains unaffected by elements on the left side of the page? Below is my code.

`<!doctype html>
<title> Webpage.</title>
<body>
<body background="Data/Back.jpg">
    <table style="float: left" bgcolor="#9999FF" border="solid">
    <tr>
    <th><ul><h1>Directory.</h1></ul></th></tr>
    <br>
    <tr><td><li><a href="subpages/skills.html">Skills.</li></td></tr>
    <tr><td><li><a href="subpages/experience.html">Experience.</li></td>
    </tr>
    <tr><td><li><a href="subpages/References">References.</li></td></tr>
    <tr><td><li><a href="subpages/ContactInfo.html">Contact Info.</li>
    </td></tr>
    <tr><td><li><a href="subpages/Resume.html">Resume.</li></td></tr>
    </table>
<center>
    <table bgcolor="CCCCCC" border="3px solid black">
    <tr>
    <th><h1><b><u>Name/Header.</u></b></h1></th>
    </tr>
    </table>
    <img src="Data/Me.jpg" width="25%">
    <table bgcolor="#819FF7" width="50%" border="solid">
        <tr>
        <th>About me.</th>
        </tr>
        <tr>
        <td>Subject
        </td>
        </tr>
    </center>
<style type="text/css">
    h1{
        color: #0404B4
    }
    th{
        color: #61380B
}
td{
        color: #8A0829
    }
</style>
</body>`

Answer №1

To resolve the issue, you can take out the float: left property from the first table. When an element is floated, it causes other elements to fill up any remaining space next to it if it's less than 100% of the parent width. Alternatively, after floating elements, you can use clear: both.

Here's a nicely formatted example without using float: left:

h1 {
  color: #0404B4;
}

th {
  color: #61380B;
}

td {
  color: #8A0829;
}
<body>
  <table bgcolor="#9999FF" border="solid">
    <tr>
      <th>
        <div style="margin-left: 2em">
          <h1>Directory.</h1>
        </div>
      </th>
    </tr>
    <tr>
      <td>
        <ul>
          <li>
            <a href="subpages/skills.html">Skills.</a>
          </li>
        </ul>
      </td>
    </tr>
    <tr>
      <td>
        <ul>
          <li>
            <a href="subpages/experience.html">Experience.</a>
          </li>
        </ul>
      </td>
    </tr>
    <tr>
      <td>
        <ul>
          <li>
            <a href="subpages/References">References.</a>
          </li>
        </ul>
      </td>
    </tr>
    <tr>
      <td>
        <ul>
          <li>
            <a href="subpages/ContactInfo.html">Contact Info.</a>
          </li>
        </ul>
      </td>
    </tr>
    <tr>
      <td>
        <ul>
          <li>
            <a href="subpages/Resume.html">Resume.</a>
          </li>
        </ul>
      </td>
    </tr>
  </table>
  <center>
    <table bgcolor="#CCCCCC" border="3px solid black">
      <tr>
        <th>
          <h1><b><u>Name/Header.</u></b></h1>
        </th>
      </tr>
    </table><img src="Data/Me.jpg" width="25%">
    <table bgcolor="#819FF7" border="solid" width="50%">
      <tr>
        <th>About me.</th>
      </tr>
      <tr>
        <td>Subject</td>
      </tr>
    </table>
  </center>
</body>

I hope this explanation is useful for you! :)

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

PHP jQuery buttons for popovers

With a simple click of a button, I can generate 8 presentations and then edit each one individually by clicking on its respective name. Within this editing process, there is another form where I would like to include additional buttons that allow me to cus ...

Surge the PrimeNG DialogModule by integrating the CalendarModule to enhance its functionality

Looking for a way to create an Edit popup dialog that includes an input form in Angular2 using the PrimeNG widgets. I have encountered issues with the dynamic content of the dialog box as shown in the screenshot. I attempted to contain the CalendarModule ...

Ways to stop VoiceOver from selecting the background content when a modal is open

Is there a way to prevent VoiceOver from reading the content behind a modal? I tried using aria-modal=true, but it seems VoiceOver does not support this feature by default like NVDA and JAWS do. I found more information about this on . According to the in ...

Is it a mistake in the Jquery logic or a syntax error?

Is there a logic or syntax error causing one of the options when clicking the radio to not display the corresponding tables with the same number of option dates? <style> #ch2 ,#ch3 ,#ch4 ,#ch5 ,#ch6 ,#ch7 ,#ch8 ,#ch9 ,#ch10 ,#c ...

Is there a way to dynamically assign the background color of a webpage based on the exact width and height of the user's screen?

I have customized the CSS of my website by setting the height to 800px and width to 1050px. Additionally, I have chosen a blue background-color for the body tag. It is important that the entire application adheres to these dimensions. However, when viewe ...

Troubleshooting a Cache Issue in Your Next.js Application

Whenever I attempt to run 'npm run build', an error crops up that seems to be linked to the css and fonts. Unfortunately, I am unsure of how to tackle this problem. It's perplexing as the app functions perfectly fine in development mode. Th ...

Difficulty in preventing the website from reloading when accessing tabs

I am working on a function that allows users to access the content of a tab without causing the page to reload. Initially, I tried using something like $( "#tab1" ).click(function() { $("#content").load("tab1.html #content > *"); }); but unfortun ...

How to eliminate the checkbox attribute when using jQuery's clone function

When I try to add a new row using my script code and HTML, the property of the last checkbox is automatically selected if it is checked. In the new row, a checkbox with a check is added, but I want to remove the checkbox when it's checked in the new r ...

Adjust the x-scroll to continue infinitely while deactivating the y-scroll

https://i.sstatic.net/KmDTe.png Is there a method in CSS to prevent vertical scrolling and have all the contents of a div positioned next to each other so that they extend beyond the visible browser window? I would like to enable horizontal scrolling to b ...

Manipulate DIVs by sliding them and resizing their contents with JQuery

Can someone help me with sliding the top div up and down, and the left div left and right? I wrote some code for this but seem to be facing some issues. When I slide the left div, the center content falls down momentarily. Additionally, the code doesn&apos ...

What is the best way to design a form with two dropdown menus, where the options in the second dropdown menu are determined by the selection made in the first dropdown menu

Is it possible to create two select menus using one dictionary in Django, where the values in the second menu are dependent on the key selected in the first menu? In my Django views.py file, I've constructed a dictionary with Projects as keys and cor ...

Tips for implementing jQuery on a CSS selector's :before pseudo-element

My dilemma involves creating a div using CSS with an added X at the top-right corner using the before pseudo-class. How can I implement a function to close this div by clicking on the X with the assistance of javascript? https://i.sstatic.net/Z5uSq.png C ...

What is the method to switch between radio buttons on a webpage?

Here is an example of HTML code: <input type="radio" name="rad" id="Radio0" checked="checked" /> <input type="radio" name="rad" id="Radio1" /> <input type="radio" name="rad" id="Radio2" /> <input type="radio" name="rad" id="Radio4" /& ...

The correct way to modify the VB property name for display in Razor

My property goes by the name "UglyPropertyName" but in my view I wish to change its Display Name to "New Role" using @Html.DisplayNameFor(Function(model) model.UglyPropertyName) In C#, you can update the display name of a property by adding [Display(Nam ...

Is it possible to change the background color using jQuery?

Can you assist me with this: I have a website and I am looking to modify the bg-coler when hovering over the menu (similar to how it works on the rhcp-website). I attempted using jquery for this, but unfortunately, it did not yield the desired result.. ( ...

Failure to highlight items when using the multiple select function

After adding a select all button to a multiple select, I encountered an issue. Although all the items are being selected, they are not highlighted when clicking on the select all button. Below is the code snippet: <div class="label_hd">Profiles* {{ ...

Using jQuery to retrieve the content of a span element by its class name

Is there a way to retrieve the value of a span using just the class name? There is only one matching span in the document. My attempt with $('span.foo').text(); did not work. Any suggestions on how to accomplish this? ...

Unable to set the width for a div element within the bootstrap grid layout

When trying to set the width of a div tag to 100% within a bootstrap grid system (col-lg-3), I noticed that the div ends up taking the full width of the browser instead of just 100% of its parent(col-lg-3). .sidebar { color: #fff; f ...

Tips for switching out images depending on the time of day

Currently, I have a script that dynamically changes the background color of my webpage based on the time of day. However, I am facing issues trying to implement a similar functionality for replacing an image source. The current code is also time zone-based ...

What is causing the CSS3 tabbed area to be restricted?

Experimenting with CSS tabs found at http://css-tricks.com/examples/CSSTabs/: Sample six .w3c { min-height: 250px; position: relative; width: 100%; } .w3c > div { display: inline; } .w3c > div > a { margin-left: -1px; position: relative; left: 1 ...