Switching the margin unit from pixels to percentage causes the float left element to become misaligned

Here is an example of HTML code I am working with:

  <div class="container clearfix">
  <div class="grid_8 omega">
     <ul class="nav">
        <li><a href="#">About</a></li>
        <li><a href="#">Cupcakes &amp; Prices</a></li>
        <li><a href="#">Locations</a></li>
        <li class="last"><a href="#">Contact Us</a></li>
    </ul>
 </div>

This code is styled as follows:

ul.nav {
  margin-top: 18.18%;
  list-style: none;
  float: right;
}

ul.nav li {
  float: left;
  margin-right: 40px;
}

When I attempted to convert the fixed pixel value to a percentage for a more fluid design, I followed the formula target / context = result. In this case, it was calculated as 40px / 660px = 0.06 or roughly 6%. After making this adjustment, my layout changed and did not respond as expected when resizing the browser window.

I am struggling to understand why using percentages for margin-right is not giving me the desired outcome. It seems that no matter what percentage value I input, the styling does not behave correctly. Could it be that I am misunderstanding how to use percentages in this context? Why isn't my approach yielding the intended results?

htmlcssfluid-layout

Answer №1

After taking advice from @AliBassam, I have finally solved the issue at hand.

According to Ali's explanation, the margin-right percentage is actually tied to the parent element ul, not the div. The width of the ul block is affected by the margin of the li element. However, if this margin is a percentage of the ul width, both elements end up relying on each other in a nonsensical way.

To rectify this situation, it is necessary to assign a specific width to ul.nav:

ul.nav {
  width: 83%;
  margin-top: 18.18%;
  list-style: none;
  float: right;
}

This width represents 83% of the 600px within the div containing the ul.nav, roughly equal to 500px.

Answer №2

I am unsure of the height measurement, therefore I do not know what 18.8% represents. Prior to determining all elements within, you must establish the html and body as having 100% height. This can be quite tricky, as mentioned by @Mr_Green, who finds it puzzling that the calculation is based on width. Additionally, 18.8 seems like an odd number. Similarly, considering the ul element, 6.3498% doesn't make much sense without knowing the reference point.

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

The video launch function does not work in Firefox, but it works perfectly fine in Chrome when clicked on

Hello, I am encountering an issue on my website where a video should launch when an element with ".onclick" is assigned. Strangely, this functionality only seems to work properly in Chrome. There was one instance where the video worked on all browsers, but ...

javascripthtmlvideo-player

What is the process for submitting a form to a PHP page?

Could you assist me in posting a form with two fields on a php page using $_POST['json']; where the object will be of json type? <div id="result"></div> <form name="form" id="form" method="post" > Name: <input type="text ...

phpjqueryjsonposthtml

Having trouble with implementing a lightbox form data onto an HTML page using the load() function? Let me help

In my project, I have set up a lightbox containing a form where user inputs are used to populate an HTML file loaded and appended to the main HTML page with the load() function. While I can successfully load the data onto the page, I am facing challenges i ...

jqueryhtmlcssajax

Adding animation to the triangular icon at the bottom

I am trying to animate a triangle at the bottom of the screen into view from the bottom when a specific class is applied to it. css .fade-in { bottom: -30px; } .btn-visible.fade-in #top-btn-BG { bottom: 0; } #top-btn a { position: fixed; z-index: 999; ...

jqueryhtmlcss

Refreshing ng-model within a radio input

Currently, I am utilizing a jQuery library for radio/checkbox components. Although I am aware that combining jQuery with Angular is not ideal, the decision to use this particular library was out of my control and cannot be altered. One issue I have encount ...

javascriptjqueryhtmlangularjs

The p-datatable component from primeng is experiencing issues and is not displaying as expected

Having trouble using the primeng datatable, I've imported the component but it's not displaying and there are no error messages showing up. In the HTML: <p-dataTable [value]="pessoas" scrollable="true" scrollHeight="200px" [rows]="20" virtua ...

htmlangulartypescriptprimengprimeng-datatable

Update the content inside the extension by modifying its innerHTML

Just starting out with JavaScript, I'm attempting to create a basic extension that can generate a random number. document.getElementById("submit").onclick = function() { a = document.getElementById("in1").value; b = document.getElementById("in2 ...

javascripthtmljsongoogle-chrome-extensioninnerhtml

The functionality to rename a label by clicking on an image button is currently malfunctioning

There seems to be an issue with this code where the label name is not changing as expected when clicking the image button. I have noticed that upon closer inspection, the label does change momentarily but then reverts back to its original value immediatel ...

javascripthtml

Switch up the button hue as you scroll for a fresh look

Attempting to achieve: CSS change color on scroll / cut text - overflow z-index This code snippet uses the clip property to change the color of a button when scrolling. The goal is to make it change color as you move from the header to the body, but it&apo ...

htmlcssscrollclip

Shift designated list item to the right with overflow handling

A current project involves working on a sidebar created in bootstrap, and I've encountered an issue. I can't seem to move a selected item to the right and have it flow over the nav div. I attempted to increase the z-index with no success. One su ...

htmlcssbootstrap-4

What is the best way to arrange these badges in a row?

I'm struggling to horizontally align these badges next to each other, as inline-block isn't working and they keep stacking vertically instead of side by side. How can I achieve the alignment shown in the image below? This is the desired appeara ...

htmlcsstwitter-bootstrapbootstrap-5

Unable to overwrite bootstrap in order to incorporate my custom CSS styles

.lo:link, .lo:visited { color: #0060b6; text-decoration: none; background-color: transparent; } <div class="row"> {% for project in projects %} <div class="col-md-4"> <div class="card ...

cssbootstrap-4

jQuery fade() function failing to fade elements

Check out this jsbin prototype that includes two menu items which display a sub-menu when clicked: The sub-menu visibility is controlled using fadeIn() and fadeOut. However, the opacity transitions do not occur. Instead, the sub-menus either instantly app ...

javascriptjqueryhtmlcss

issue with django: bootstrap menu not collapsing properly on mobile devices

To ensure my project looks visually appealing, I've decided to incorporate Bootstrap. However, I am facing an issue with the default fixed navbar from Bootstrap examples in my base.html file. On mobile devices, tapping the menu does not open it, and e ...

jqueryhtmlcssdjangotwitter-bootstrap

Ensuring the Accuracy of HTML POST Data with Database Validation

Building a site with Django 1.9 and python 2.7, I have a checkout page where users select options from select, radio, and checkbox fields. Each option has a specific dollar amount attached in the value parameter. To ensure the integrity of the information ...

pythonhtmlmysqldjango

Smooth animation is not being achieved with the Jquery dlmenu

I have implemented a multi-level navigation menu using a demo of the jquery dlmenu plugin v1.0.2. Although most of the functions are working smoothly, the CSS3 menu navigation lacks the fluidity of the jQuery left/right sliding effect. Is there a way to ...

javascriptjqueryhtmlcssjquery-animate

Guide to positioning front layer in CSS3

I am currently working on a page and have added an "Under Construction" banner to indicate it is not yet finished. Could someone assist me in bringing the png to the forefront on this link? ...

htmlcss

What is causing the issue where Multiple file selection does not work when using the multiple attribute

I am having issues with uploading multiple files on my website. I have created an input field with the attribute multiple, but for some reason, I am unable to select multiple files at once. app.html <input type="file" (change)="onChange($event)" req ...

htmlangular

The styling of divIcons in React Leaflet Material UI is not applied as expected

When using divIcon in React Leaflet to render a custom Material UI marker with a background color prop, I noticed that the background style is not being applied correctly when the marker is displayed in Leaflet. Below you can find the code for the project ...

javascriptcssreactjsmaterial-uileaflet

Using a parameter as a value within a JavaScript inline function

I am facing a challenge where I want my page slides to scroll when a link is clicked using Javascript/jQuery. However, I am struggling with passing the current increment value of my 'for' loop as a parameter in order to bind click events on the l ...

javascriptjqueryhtml