creating a div element with a height that matches its content dimensions

I'm having trouble creating a navigation bar because the outer div isn't matching the height of the unordered list inside it.

I attempted using display:inline-block as well, but it didn't solve the issue.

Here is the HTML:

http://jsfiddle.net/jairajdesai/7Lyss/

HTML :

<div id="top_navigation_menu">
    <ul id="top_navigation_list">
        <li class="top_navigation_options">Home</li>
        <li class="top_navigation_options">Places</li>
        <li class="top_navigation_options">Travel</li>
        <li class="top_navigation_options">Stay</li>
        <li class="top_navigation_options">FAQs</li>
    </ul>
</div>

CSS :

#top_navigation_menu{
position:absolute;
top:14%;
min-width: 50%;
background-color:#eee;
color:white;
}
#top_navigation_list{
list-style-type: none;
}
.top_navigation_options{
display:inline;
}

Answer №1

To style the navigation bar, use display:inline for the Ul element and display:inline-block for the li elements in the CSS class. Here's an example:

#top_navigation_list{
list-style-type: none;
background-color:#000;
display:inline;
}
.top_navigation_options{
   display:inline-block;
}

Check out this JS Fiddle Demo for a visual representation.

Answer №2

To eliminate the default margin of an unordered list, simply include margin: 0 within the #top_navigation_list CSS rule.

Check out the revised version on JsFiddle

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 steps can I take to ensure that a user only clicks on my voting link once for a specific post?

I am managing a MySQL database with two tables. One table is named 'users' with the column 'uname' as the primary key, which stores usernames as strings. The second table is named 'posts' with the column 'id' as the ...

The textbox is not able to process the complete input string provided

I am having trouble with entering an email address into a textbox, for example [email protected], as it only accepts dd@g. Here is the HTML code: <input type="email" class="form-control ng-pristine ng-valid-email ng-invalid ng-invalid-required ng ...

Establish a connection to a regular socket by utilizing WebSocket technology

I am attempting to connect a client interface to a hardware device using WebSocket in a browser like Chrome. The code snippet I have been using for connection is as follows: var ws = new WebSocket("ws://127.0.0.1:13854"); ws.onopen = function() ... Howev ...

The canvas surpasses the boundaries of the grid layout

Trying to design a grid layout with 3 columns of content, alongside an .overlay div featuring a particles.js canvas. Having trouble? See my Codepen here: https://codepen.io/radzak/pen/MVQVPQ The goal is for the grid to always occupy 100% of the screen, t ...

What are the steps to create a responsive form using CSS?

I have a screenshot below that needs to be recreated using HTML/CSS. This design should be consistent in both desktop and mobile views. https://i.stack.imgur.com/cnfHt.png Currently, I have managed to replicate this in a JSFiddle which looks good on desk ...

Adding Jquery content to HTML templates using Jinja2: A Simple Guide

Looking at my HTML code Base.html <title> {% block title %}{% endblock %} </title> </head> <body> <nav class="navbar navbar-expand-lg navbar-light bg-light"> <div class="collapse na ...

Using jQuery to upload an image onto a canvas

When dealing with certain dependencies, I found myself needing to upload images of size 670 X 525 px to the server (regardless of the original size uploaded by users). To achieve this, I decided to draw the image onto a canvas canvasContext.drawImage(0, 0 ...

Utilizing Jquery tabs for consistent height display

Currently, I am utilizing jquery tabs for showcasing various content. This is what my functions look like: $(function() { $( "#tabs" ).tabs(); }); I attempted to ensure all tabs have the same height by using this approach: var heightStyle = ...

Move the scroll bar away from the scrollable div and reposition it on a different part of the page using CSS

Is it possible to use CSS to position the scrollbar of a div that takes up the left half of my page with overflow-y: scroll to be where the page scrollbar would normally be (far right side of the page)? I've experimented with the ::-webkit-scrollbar ...

The jQuery .html() function seems to only be functioning properly on the initial element

I'm currently collaborating with a partner on a project using WordPress and PHP for an assignment. We've made progress, but I’m encountering a particular issue. My problem arises when utilizing the .html() function in Ajax—only the first tab ...

Creating a seamless vertical navigation that connects the top banner with the bottom footer section

Having some difficulties with my current assignment. Any assistance would be greatly appreciated, whether it's a minor error I've overlooked or if I'm completely off-base with my code. The main challenges I'm facing involve getting my ...

The for loop does not cycle through every element

I'm working on a class project that involves creating custom HTML tags with JavaScript. I have a for loop set up to iterate over each use of the tag, but for some reason, it only seems to loop over every other tag. I'm specifically trying to crea ...

Issue with the dimensions and proportions of the canvas

After creating a canvas with HTML and setting the ratio to 16/9 in the CSS, I specified a width of 100vw and added a border. However, I noticed that the canvas appeared larger than expected on the screen. #canvas{ width: 100vw; aspect-ratio: 16/9; border: ...

Switching the way hyperlinks behave when clicked, from requiring a double-click to a single

My code is working properly, but I need my links to open with just a single click. The issue is that the delete, approve, and not approve links require a double click for their function to run. I'm hoping someone can help me with this. index.php < ...

Angular 8 carousel featuring a dynamic bootstrap 4 design with multiple images and cards displayed on a single slide

I am currently working on a dynamic carousel that should display multiple cards or images in one row. Initially, I faced an issue with the next and previous buttons not functioning properly when trying to display multiple cards in one row. After some onlin ...

Grab images from clipboard, encountering blob Error

I'm having issues with copying and pasting images from the clipboard in Chrome. Can someone help me troubleshoot this error? Check out this js fiddle for reference Error Uncaught TypeError: Failed to execute 'readAsDataURL' on 'FileR ...

What is the best way to create a full bleed background image that adjusts to different screen resolutions using CSS and JavaScript?

Similar Question: Full Screen Background Image in Firefox Check out: Is there a way to achieve a similar effect on a website where the content adjusts to different monitor resolutions? On the Ingress site, it seems like everything scales proportional ...

How can you determine the specific type of "display" utilized by CSS Bootstrap for a particular element?

When manipulating the "display" property of a bootstrap element like "row" or "col-md-3" using JavaScript, how can I determine the default value set by Bootstrap CSS? For instance, the Bootstrap source code likely sets the "display" value for the "row" cl ...

Unique arrangement of hexagons in a honeycomb layout with precise centering

Currently, I am having trouble creating hexagonal blocks with content in a specific layout. My goal is to have four blocks starting with one at the top, followed by a row of two, and finishing with a row of one as shown in the image below. Unfortunately, a ...

What is the best way to center a Checkbox in HTML5 and CSS?

I've been struggling to center my Checkbox with label on my current website project. Despite searching online for solutions, I'm still unable to find the right method! If you're curious, you can check out the source code of my webpage at ( ...