Creating a list of items using HTML tags should be coded in a way that fits neatly within the main container element

UPDATE: I've come across this code that seems to be functioning somewhat as desired. You can view it live at UPDATE - It's still not aligning properly within the #main div! I've experimented with both 100% and 990px for width in #menu span, but neither seem to solve the issue.

<div id="menu">
  <ul>
    <li><a href="#">Menu item 1</a></li>
    <li><a href="#">Menu item 3</a></li>
    <li><a href="#">Menu item 2</a></li>
  </ul>

  <span></span>
</div>

#menu {
  text-align: justify;
}

#menu * {
  display: inline;
}

#menu span {
  display: inline-block;
  position: relative;
  width: 100%;
  height: 0;
}

END UPDATE

I'm encountering some horizontal alignment issues with a menu I'm working on :)

When viewing the website in Chrome, the menu is centered perfectly.

In FireFox, however, there is a slight 5-10px gap on the right side of the menu.

And when checking it out in Internet Explorer, the menu isn't aligned to the left and spills over the right edge of the page.

See the issue firsthand here: UPDATE (Note: index2.php not the original index)

My query is:

How can I style/code this menu appropriately to fit within its parent container?

I've gone through existing threads with similar questions, but couldn't implement any solutions successfully. Thank you in advance :)

HTML:

<!DOCTYPE html>
<html>
<head>
<title>UPDATE </title>
<link rel="stylesheet" href="style.css" type="text/css">
<style>

#sliderwrapper {width:635px;}

#control  {
  text-align:right;
  margin-top:5px;
}

#control a  {
  background:#87e7fa;
  padding:0 5px;
  color:#FFFFFF;
  text-transform:uppercase;
  text-decoration:none;
  margin-left:5px;
}

#control a.active {background:#265db9;}
#control a span {visibility:hidden;}

.sexyslider-control span {display:none;}

.sexyslider-title {
 font-weight:bold;
 color: #FFFFFF;
}



</style>

</head>

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.sexyslider.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
      $("#slider").SexySlider({
        width      : 981,
        height     : 500,
        delay      : 3000,
        strips     : 18,
        autopause  : false,
        <!--navigation : '#navigation',--!>
        control    : '#control',
    direction    : 'left',
        effect     : 'fade'
      });
    });
</script>

<body>
<div id="wrapper">
  <div id="header"><img src="images/header.gif" alt="" /></div>


<div id="main">

    <ul>
    <h2><li><a href="index.php">Home</a></li>
    <li><a href="team.php">Meet Our Team</a>
    <li><a href="office.php">Office Information</a></li>
    <li><a href="first.php">First Visit</a></li>
    <li><a href="dental.php">Dental Topics</a></li>
    <li><a href="tour.php">Office Tour</a></li>
    <li><a href="contact.php">Contact Us</a></li></h2>
    </ul>
    <div id="sliderwrapper" class="clearfloat">
        <div id="slider" style="width:100%">
                    <img src="images/slide1.jpg" alt="" "/>
                                    <img src="images/slide4.jpg" alt=""  "/>
                    <img src="images/slide2.jpg" alt="" " />
                                    <img src="images/slide3.jpg" alt=""  "/>
                    <img src="images/slide4.jpg" alt=""  "/>
                                    <img src="images/slide5.jpg" alt=""  "/>
                    <img src="images/slide6.jpg" alt=""  "/>
                </div>

<div id="control" style="margin-top:10px; margin-right:-347px;"></div>
</div>  
</div>      



    <div id="footer"><img src="images/footer.gif" alt=""/></div>
</body>
</html>

CSS:

body {
    margin:0;
padding:0;
background-color: #87e7fa;
font-size:100%;
text-align:center;
}
#wrapper {
margin:0 auto;
padding:0;
    text-align:center;
    background:url('images/bg.gif') repeat-y;
width:1200px;
}
#header {
    width:1200px;
height:358px;
}
#main {
    width:990px;
height:100%;
    margin:0 auto;
text-align:left;

    }

#footer {
clear:both;
width:1200px;
height:354px;
}

h2 {
    font-family:soos_font;
    text-decoration:none;   
    text-shadow:1px 1px 0 rgba(0,0,0, 0.4); 
    }

ul
{
list-style-type:none;
margin:10 0;
padding:0;

}



li
{
display:inline;
width:100%;
margin:0 auto;
}


a:link,a:visited
{
font-weight:bold;
color:#FFFFFF;
background-color:#87e7fa;
text-align:center;
padding:7px;
text-decoration:none;
text-transform:uppercase;
border-radius:5px;
margin:0 auto;

}

a:hover,a:active
{
background-color:#3650a2;
}

Answer №1

I have made updates to your CSS styling.

CSS

#main {
    width:990px;
    height:100%;
    margin:0 auto;
    text-align:center;
}
#main ul{
    list-style-type:none;
    margin:0;
    padding:0;
}
#main li{
    display:inline-block;
    /*width:100%;*/
    margin:0 3px;
}

HTML

<div id="main">
    <ul>
    <li><a href="index.php">Home</a></li>
    <li><a href="team.php">Meet Our Team</a>
    <li><a href="office.php">Office Information</a></li>
    <li><a href="first.php">First Visit</a></li>
    <li><a href="dental.php">Dental Topics</a></li>
    <li><a href="tour.php">Office Tour</a></li>
    <li><a href="contact.php">Contact Us</a></li>
    </ul>
    <br style="clear:both;"/>
</div> 

You can view the updated code in this jsFiddle File.

Please note that it is not valid to wrap li elements into h2 tags.

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

What is the best way to align the images on the right side of this Bootstrap Footer design?

Is there a way to reduce the gap between the "linkedin" images in my Bootstrap footer template? I've tried replacing the default images on the right side with linkedin icons, but I can't seem to adjust the padding/margin properly. Here's the ...

Using radio buttons to toggle the visibility of a div element within a WordPress website

I am currently working on creating a WordPress page using the custom page tool in the admin interface. My goal is to have 3 radio buttons, with 2 visible and 1 hidden. The hidden button should be automatically checked to display the correct div (although ...

Having difficulty adjusting certain internal styles within Material UI's <Dialog> component

I want to customize the styling of my <Dialog> component by adding rounded corners using a border radius. Here is the inline style I am trying to apply to override the default styles of the <Dialog>: let overrideStyles = { padding: 0, marg ...

Encountering an Uncaught TypeError that is hindering an alert for the score, but I am uncertain about the solution despite the game functioning properly

My Yahtzee code is functioning normally during gameplay, but I'm facing issues with getting alerts for the total score and bonus points. I have identified where the problem lies but I am unsure how to resolve it. I attempted debugging through alerts, ...

Does vuetify offer a card footer or card deck feature in its designs?

I'm trying to achieve a layout similar to this: https://getbootstrap.com/docs/4.0/components/card/#card-groups https://i.sstatic.net/HxKEh.png The goal is to keep the height of the box consistent even when the description varies Here's my code ...

Introducing Row Offset Enhancement

I am working on a code to create a custom "table" because I require some more intricate features that a regular table cannot provide. <div class="container"> <cfloop index="x" from="1" to="5"> ...

How to implement CSS styling for a disabled component

In my application, I have a FormControlLabel and Switch component. When the Switch is disabled, the label in FormControlLabel and the button in Switch turn gray. However, I want to maintain the color of both the label (black) and the button (red). To test ...

Adding an id to a ul tag using JavaScript

I am trying to dynamically add an ID called "myMenu" using JavaScript to a ul element for a search filter. Unfortunately, I am unable to directly access the ul tag to change it, so I need to do it via JavaScript. As I am new to JavaScript, I am looking t ...

Converting HTML table data into a JavaScript array

On my website, I have an HTML table that displays images in a carousel with their respective positions. The table utilizes the jQuery .sortable() function to allow users to rearrange the images by dragging and dropping. When an image is moved to the top of ...

What is the best way to switch between two icons using boot-strap and jQuery without the use of buttons?

Is there a way to make it so that clicking on the heart icon hides it and shows the filled heart icon instead using jQuery? I am struggling to figure out how to reference the other icon in my function. This is just a rough idea of what I want to achieve. ...

How can I change the cursor of a button to a pointer in Bootstrap 4 when the button is not disabled?

I'm working with a bootstrap button <button class="btn btn-primary">Login</button> My goal is to change the cursor to a pointer (hand) on this button when it's not disabled, instead of the default arrow. The disabled property of th ...

What is the best way to retrieve an image URL from a CSS file located in a public folder within a

Trying to set a background image in a css file located inside the public/ folder of Rails, but want the image to be sourced from the app/assets/images/ directory. Currently using the code below: background: url("bg-noise.png"); This method typically work ...

How do I go about configuring the uploaded image?

Here is a sample of my HTML code: <div class="images"> <figure> <button id="upload-add-product" class="icon-plus"></button> <input id="upload-file" type="file" style="display: none;" multiple/> </fi ...

What is the best way to determine which button was clicked in Django?

My HTML has two buttons - one for accepting and the other for rejecting requests. I am trying to figure out how to determine which button was pressed along with the email of the applicant (tutor_application.tutor.chalkslateuser.email). Despite multiple a ...

Why Isn't the Element Replicating?

I've been working on a simple comment script that allows users to input their name and message, click submit, and have their comment displayed on the page like YouTube. My plan was to use a prebuilt HTML div and clone it for each new comment, adjustin ...

`Count the number of rows needed to accommodate text line breaks within a div element`

Is there a method to determine the number of lines that text breaks into using the CSS property word-break: break-all? For example, if I have a div like this: <div>Sample text to check how many lines the text is broken into</div> And the corr ...

Text alignment and block dimensions

I attempted to organize three buttons within a block. <link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.0.3/tailwind.min.css" rel="stylesheet"/> <div class="grid grid-cols-1 md:grid-cols-3 text-center place-content-center"> ...

Is it important that the end date does not exceed the start date?

In my request, the end date cannot be later than the start date. For example, if the start date is 24/4/2017 and the end date is 23/4/2017, the search function should be disabled for the calendar date 23/4/2017. Only dates from 24/4/2017 onwards should be ...

Mobile browsers are displaying fonts unevenly within tables

Currently in the process of developing a desktop site () that should function optimally on mobile browsers without the need for a separate mobile version. While mobile Safari scales up fonts in large text blocks, tables used for content are causing some is ...

Adding a unique component to a Spring Boot application with Thymeleaf integration

My navigation bar includes a list with a dropdown feature. When the user clicks on the dropdown entry, I want to display a snippet of another HTML page within the project. The navigation bar HTML code is as follows: <div th:fragment="navbar"& ...