Having trouble getting the full width of a hidden div to work properly?

I am facing an issue with a two-part menu design: the left side consists of a traditional UL, while the right side contains a link within a div element. The fixed-width of the right div is causing complications as the left div needs to occupy all remaining space.

After attempting the overflow:hidden technique without success, I came across this helpful resource:

You can view my current code on JSFiddle here: https://jsfiddle.net/3gfqyux4/

.container {
    width:800px;
    height:50px;
}

.left-menu {
    background-color:red;
    width:auto;
    height:50px;
    overflow:hidden;
}
.left-menu ul li {
    display:inline;
}
.right-menu {
    background-color:blue;
    float:right;
    width:100px;
    height:50px;
}

Answer №1

Utilize the calc function

.container {
   width:800px;
   height:50px;
}

.left-menu {
    background-color:red;
    width:150px;
    height:50px;
    float:left;
}

.left-menu ul li {
    display:inline;
 }

.right-menu {
     background-color:blue;
     width:calc(100% - 150px);
     height:50px;
 }

View the updated fiddle here: https://jsfiddle.net/3gfqyux4/3/

Answer №2

It appears that you are looking to set a fixed width for your "right" div, while allowing the left div to expand to fill the remaining space.

Flexbox is a great solution for achieving this layout.

.container {
  width: 80%;
  height: 50px;
  display: flex;
}
.left-menu {
  background-color: red;
  flex: 1 0 auto;
}
.left-menu ul li {
  display: inline;
}
.right-menu {
  background: green;
  flex: 0 1 100px;
}
<div class="container">
  <div class="left-menu">
    <ul>
      <li>menu</li>
      <li>menu</li>
      <li>menu</li>
    </ul>
  </div>
  <div class="right-menu">
    <a href="xyz.com">
            xyz.com
        </a>
  </div>
</div>

Check out JSfiddle Demo

Explore CSS-Tricks: Complete Guide

Answer №3

If you want to keep the order unchanged, make sure to include display:inline-block; in your styling.

.box {
    width:500px;
    height:200px;
}

.left-side {
    background-color:green;
    width:calc(100% - 50px);
    height:200px;
    display:inline-block;

}
.left-side ul li {
    display:inline;
}
.right-side {
    background-color:orange;
    float:right;
    width:50px;
    height:200px;
    display:inline-block;
}

Answer №4

Reorganize the placement of these two lists ;)

<div class="container">
<div class="left-menu">
    <ul>
        <li>menu</li>
         <li>menu</li>
         <li>menu</li>
    </ul>
</div>
<div class="right-menu">
    <a href="xyz.com">
        xyz.com
    </a>
</div>

https://jsfiddle.net/3gfqyux4/2/

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

Node.js suffering from 'empty post method' issue

I am encountering an issue while retrieving values from certain fields in an index HTML. The post method is returning empty values, with { } being returned instead of the expected email, nick, name, and pass values. Here is my server.js code: var mongoos ...

Boosting Your SCSS (SASS) Productivity

I'm curious if there are any ways to make the code below more efficient or dynamic. I've already achieved the desired result, but I'm interested in optimizing it further. The Script Any suggestions would be highly appreciated, Cheers, ...

Prevent jQuery from overriding CSS styling

Having an issue with adding a <p> tag before each jQuery accordion on my MVC page. No matter what I try, the jQuery styling keeps interfering with the classes and styles of my <p> tag. Is there a way to make it look like the other non-jQuery & ...

Eliminating null values from arrays

Hello there! I'm currently working on inserting a list of locations into my database. $locations = array(); $locations = $_POST['loc']; $loc = implode(", ", $locations); However, when I insert the array into my database, the empt ...

Is there a way to modify the color of a specific section of a font icon?

Currently, I am in the process of implementing an upvote button using fa fa signs. However, I have encountered an issue where the background color of the up vote button is bleeding outside of the sign (possibly due to padding on the icon), and I am strivin ...

Choosing the relevant kendo row on two different pages

I am facing a situation where I have a Kendo grid displayed on a dashboard page. Whenever a user selects a row in this grid, I need to load the same row in another Kendo grid on a separate ticket page to showcase the details of that particular ticket. The ...

Styling with CSS using only numerical values

My website features a section that states "Weekdays 10:00 ~ 18:00 /*linebreak/ Saturdays 10:00 ~ 13:30" I am looking to format only the numerical values in the font "Courier New," specifically the "10:00 ~ 18:00" and "10:00 ~ 13:30" sections. The remainin ...

Information is not appearing in the dropdown menu

As a beginner in JavaScript, this is my first program. I have written HTML and JavaScript code to display data in a dropdown menu from a Python Django database. However, when I run it, the data is not showing up. Here is my code: <!DOCTYPE html> < ...

Chrome runs requestAnimFrame at a smooth 60 frames per second, while Firefox struggles to keep up at

I recently developed a canvas animation using requestAnimFrame and saw great results in Chrome. However, when I viewed it in Firefox, it seemed like a slideshow was running instead of a smooth animation. I'm unsure what could be causing this issue. F ...

Display an error message in the input type file Form Control if the file format is not .doc or .docx

I need a way to display an alert if the user tries to submit a file that is not of type doc or docx. I've implemented a validator for this purpose and would like the alert message (Unacceptable file type) to be shown when the validation fails. Here i ...

Tips for setting height within a flexbox layout?

Is there a way to specify the height of rows in a flex wrap container so that text containers appear square on both smaller and larger screens? I want the sizing to be dynamic, adjusting as the window is resized. Check out this example on CodeSandbox Loo ...

Guide to activating form elements using a JQuery function

I need help setting up a form with 11 rows and 11 columns. By default, the form fields should be disabled, but when I click on an "EDIT" button, they should become enabled. Any assistance would be greatly appreciated. Thank you in advance. Here is my edit ...

Hover your mouse over the menu to activate a timeout feature

Having an issue with my multi-level menu - when I hover over a main menu item, the sub-menu items are supposed to display. However, if I move the mouse too quickly from the main item to the sub-item and it goes off the path, the sub-menu disappears and I h ...

Incorporating HTML 5 data attributes into the DOM using jQuery

I'm attempting to insert an HTML 5 data attribute into the DOM. According to the jQuery site, the format for data attributes is as follows: $('.pane-field-related-pages ul').data("role") === "listview"; However, it doesn't appear to b ...

Problem with layout design (utilizing float properties)

I'm curious why the paragraph content gets sandwiched between two floated divs. I'd like the paragraph content to appear below the header. Also, why aren't the line breaks showing in the paragraph? Check out this JS Fiddle link for referenc ...

How can we apply position: fixed in print media queries using CSS?

In order to display a footer on every printed page, we have implemented the use of position: fixed. However, one issue that has arisen is that content ends up flowing underneath the footer. Is there a solution to prevent this from happening while still k ...

The issue of jQuery pop-up not functioning properly on a web page that has infinite scrolling

Currently, I am working on a website that showcases various products with images. When you hover over these images, a pop-up appears displaying details about the product along with a "buy now" button. Everything was functioning perfectly until the infinit ...

Exploring the process of implementing tab-link ripple effects in Angular Material

Is it possible to apply the ripple effect to tabs in Angular elements using a similar attribute to md-ink-ripple, like we can with grid or title elements? For example, check out https://material.angularjs.org/latest/demo/tabs If there isn't a specif ...

Centered perfectly in a bootstrap card

I'm struggling to create a bootstrap card with a logo perfectly centered, but the logo seems fixed at the top. How can I fix this issue? <div class="col-xl-3 col-md-6"> <div class="card mini-stat"> <div class="card-body tex ...

Automatically scroll the chat box to the bottom

I came across a solution on Stackoverflow, but unfortunately, I am having trouble getting it to work properly. ... <div class="panel-body"> <ul id="mtchat" class="chat"> </ul> </div> ... The issue lies in the JavaScript t ...