What is preventing the two divs from having a combined width of 100%?

Check out the jsfiddle link for live preview: http://jsfiddle.net/dazakip/u7d59901/

.nav {
    float: left;
    width: calc(100% - 75px);
    height: 10px;
    padding-left: 5px;
    padding-bottom: 10px;
    background-color: green;
}

.checkout{
    float: right;
    width: 75px;
    height: 10px;
    padding-bottom: 10px;
    background-color: red;
}

I am specifically looking for help with this code. I want the two divs to sit next to each other and remain fixed regardless of resizing. Please see the preview in the link provided.

Appreciate your assistance!

htmlcss

Answer №1

Adjust the padding-left value to 5px in your code snippet. By either removing or recalculating this value, you will achieve the desired outcome!

.nav {
float: left;
width: calc(100% - 80px); /* adjust by 5px */
height: 10px;
padding-left: 5px; /* consider altering or deleting padding */
padding-bottom: 10px;
background-color: green;
}

.checkout{
float: right;
width: 75px;
height: 10px;
padding-bottom: 10px;
background-color: red;
}


.lol {

height:111110px;
background-color:grey;
}
<body>

<div class="nav">HOME | MENS | WOMENS</div>
<div class="checkout">Checkout</div>

<div class="lol"></div>
</body>

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 display of Bootstrap Cards may become distorted when incorporating J Query

I am attempting to design a dynamic HTML page that pulls data from a JSON response using an AJAX request. My goal is to display three columns in a row, but currently I am only seeing one column per row. I would greatly appreciate any guidance on what migh ...

javascripthtmljqueryjsonbootstrap-4

Changing the color of options in a list when clicked: a step-by-step guide

Here is the HTML code I have: <li onclick="switchColors()"> <a class="x" href="Faculty.php">Faculty</a> </li> <li onclick="switchColors()"> <a class="x" href="Contact.php">Contact</a> </li> And here ...

javascriptphpjqueryhtmlcss

Incorporating external libraries is seamless when used in a .html document, however, they may encounter limitations when integrated

I am facing an issue while migrating my code from an .html file to a Quasar project. The code runs perfectly fine in the .html file, but I encounter errors when implementing it in Quasar. Here is the original code from the index.html file: <!DOCTYPE ht ...

htmlvue.jsleafletreact-leafletquasar-framework

I'm having trouble getting things to line up properly in Bootstrap5. Can anyone help me figure out why?

When observing this layout, there seems to be a vertical misalignment. The button slightly overflows, while the input field does not. https://i.sstatic.net/pEw2U.png What could be causing this issue? I am currently utilizing Bootstrap 5.2.3 and have incl ...

cssbootstrap-5

Restrict the HTML date input to only allow selection of the current date

In my form, I have set an input type date that is restricted to today's date by using the min and max attributes with JavaScript. The issue is that users are still able to manually input a different date instead of selecting it from the calendar popup ...

javascripthtml

Steps to resolve header positioning within a flex element nested inside another flex element

I have been struggling to find a solution to fix the header in a flex div and allow the rest of the content to scroll if needed. This issue has come up multiple times, especially when working with tables that have a fixed header and scrollable content. I h ...

htmlcssflexbox

Is it acceptable to employ numerous classes simultaneously?

Instead of applying individual styling attributes like background-color and border to each element, I chose to create a set of classes such as red-background, blue-text, and border-1px... Do you think this approach is acceptable or should I try something d ...

css

Is there a way to transfer the value of a selected option from an HTML dropdown box within a form to a TypeScript file in Angular without needing to submit the form?

Just starting out with Angular and I have a dropdown box within a form that I'm trying to work with. Specifically, I want to pass the value of 'serial' from my HTML file to my ts file without having to submit the form. So far, I haven't ...

htmlangular

Determine whether the element is visible in at least half of the viewport

I am working on a project that involves 4 cards with images. I want the image to animate in from the left when it comes into viewport. I have finalized the CSS for this effect, but the JavaScript code always returns false even when the element is visible o ...

javascripthtmlcss

What causes the NavBar to show and hide within a specific range?

Recently, I encountered a perplexing issue with my navbar. It functions correctly except for one strange behavior that has left me baffled. Why does the menu appear when I adjust the width to 631px, but disappear at 600px? And vice versa – why does it wo ...

htmlcssangulartypescript

Tips for monitoring password and password confirmation fields in DevTools when using AngularJS forms

Within the ng-model, I have identified two variables: vm.user.password and vm.confirmpassword. The input fields are equipped with attributes such as id, name, and class. I am interested in monitoring both the password and confirmpassword values within Dev ...

javascripthtmlangularjs

What is the best method for locating the innermost element of an HTML tree that has a specific class assigned

I am working on a project that involves a menu system. One of the features I am implementing is that when a tree within the menu is opened, it receives the "active" class. My goal now is to dynamically retrieve the deepest sub-menu within this structure ...

javascriptjqueryhtml

Tips for ensuring your background image is fully displayed and covers the entire size

My dilemma lies within the header div. My intention is to have it fully covered with a background image without any cropping. However, the current setup seems to be stretching and cutting off parts of the image. Here is my CSS code: .header { bor ...

htmlcssbackground-imagecontaincover

What is the best way to completely eliminate a div from a webpage

I've created a new div element using jQuery: $(document.body).append('<div id="test"></div>'); Then, I display a success message and remove the div after 10 seconds: $('test').html('SUCCESS!'); setT ...

javascripthtmljquerycssecmascript-6

What's the best way to toggle the visibility of an input-group in Bootstrap?

Is there a way to properly hide and show a Bootstrap 5 input-group? You can see an example here: https://jsfiddle.net/o08r3p9u I'm facing an issue where once the input group is hidden, it doesn't show correctly when displayed again. How can I e ...

javascripthtmlcssbootstrap-5

Is there a way to access a comprehensive list of all the font names stored on my personal computer?

I'm currently working on a project that requires using local fonts only. Since I am using a Mac, I have located the fonts in /Library/Fonts. However, I have encountered an issue when trying to use a font named 华文黑体 directly in my CSS property: ...

cssfonts

Building a table with the appendChild() method

I'm a beginner in the world of programming and I've been given a task to create a table of objects. I managed to do it using a certain method, but now I'd like to try creating it using the appendChild method. function addObject() { var ...

javascripthtmlhtml-tableappendchild

The clash between CSS's 'snap-scroll' and jQuery's '.animate scrollLeft' functionality

My HTML and CSS slider utilizes the scroll-snap feature for manual scrolling along with jQuery buttons for automated scrolling. However, I have encountered an issue where using scroll-snap-type: x mandatory; causes severe lag in the jQuery scrollLeft anima ...

jqueryhtmlcss

.htaccess rule cannot process dots in the file names

I've encountered an issue with my htaccess rules. Here is the rule I have in my htaccess file: RewriteEngine On RewriteRule ^u/([a-z-0-9-_]+)$ user.php?id=$1 Everything works smoothly, except when I include a dot (.) in the username. The browser the ...

phphtmlregex.htaccessmod-rewrite

What is the reason behind the addition of escape characters to the hidden input value?

<body> <div> <?= $_POST['msg'] ?> </div> <form id="frm" method="post"> <input type="hidden" name='msg' value='{"field0": "Im a string", "field1": 84, "field3": "so am I"}' /> < ...

phphtmljson