Utilize the full width available to create a flexible div element without any fixed sizes

I have come across similar questions, but none of them quite addressed my specific situation. My dilemma involves a tabbed navigation that can vary in size depending on the number of tabs added to it. Adjacent to the navigation, there is a second area housing a phone number display that I want to expand and fill the remaining space from right to left.

The width of both objects is unknown. My attempts to solve this issue included floating the navigation to the left, but it resulted in the blue background expanding behind the navigation, obscuring the view of background between the tabs. Using tables also proved unsuccessful as they either allocated width only to the blue area or collapsed the table's size to fit both elements without utilizing the full 960px width.

My preference would be to find a CSS solution for this layout challenge, although I am open to exploring JavaScript or jQuery alternatives if necessary.

jquerycss

Answer №1

If your navigation tabs are floated, simply include overflow: hidden; in the styling of the navy blue div (the one intended to occupy the remaining width).

Check out this brief demonstration: demo link here.

Answer №2

Wouldn't using width: 100% solve the problem?

Answer №3

Check out the working code on jsfiddle here

<div class="base">
    <div class="menu">
        <ul>
            <li>Hello</li>
            <li>Hello</li>
        </ul>
    </div>
    <div class="extra">
        Hello represents nothing but a greeting
    </div>
    <br clear="all"/>
</div>

CSS:

.base{
   width:100%;
   background:#c00;
   color:#fff;
   padding-top:15px;    
}
.menu{
    float:left;
}
.menu ul li{
    float:left;
    margin-left:5px;
    margin-right:5px;
    background:#000;
    padding:3px;
    border-radius:8px 8px 0px 0px;

}
.extra{
   float:right;
}

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

Is there a callback or event that can be used to ensure that getComputedStyle() returns the actual width and height values?

Currently, I find myself in a situation where I need to wait for an image to load before obtaining its computed height. This information is crucial as it allows me to adjust the yellow color selector accordingly. Question: The process of setting the yello ...

javascripthtmlcss

Having trouble with Jquery's Scroll to Div feature?

When I click on the image (class = 'scrollTo'), I want the page to scroll down to the next div (second-container). I've tried searching for a solution but nothing seems to work. Whenever I click, the page just refreshes. Any help would be gr ...

javascriptjqueryhtmlcss

Verifying form submission in Java: A guide

My JSP form code: <form id="emailForm" data-role="form"> <input type="text" class="form-control" id="name" name="name" placeholder="Enter full name.."> <input type="submit" id="emailSubmit" name="emailSubmit" class="btn btn-default ...

javajqueryajaxformssubmit

What can be done to prevent an ajax call on keyup when there are no search results?

I have implemented an autofill search feature using .ajax call on keyup event. Currently, it triggers a new call when the user inputs more than 3 characters. However, I want to prevent additional ajax calls once there are no more results, allowing the user ...

javascriptphpjqueryajax

Tips for initiating a function at a designated scroll point on a webpage

Currently, I am testing out a code snippet that allows images to flip through in a canvas element. I'm curious if it's possible to delay the image flipping effect until the viewer scrolls down to a specific section of the page where the canvas i ...

javascripthtmljquerycanvashtml5-canvas

A distinctive web page featuring an engaging image backdrop: captivating content effortlessly scrolling beneath

On my website, I have implemented a background image with a fixed transparent header. When scrolling down, I want the main content to be hidden beneath the header. To achieve this effect, I used the -webkit-mask-image property. However, this approach affec ...

htmlcssimagescrolltransparency

Redirecting to new page after submitting form using Ajax

I'm having some trouble with my HTML form submission using JQuery and AJAX. After successfully submitting the form, I want to display a modal and then redirect to another page based on certain conditions. I've written the logic in my JS file wh ...

javascriptphpjqueryajaxforms

Challenges with navbars and Bootstrap

Just started using twitter-bootstrap and I'm trying to customize the navbar by removing borders and padding, adding a hover effect for links with a different background color, and setting margins of about 10px on the left and right. However, I'm ...

csstwitter-bootstrapnavbar

Retrieve the past week's data based on names using JavaScript

Is there a way to dynamically fetch the past seven day names, starting from today, in JavaScript? I am looking to format the result as follows: (Wednesday, Tuesday, Monday, Sunday, Saturday, Friday, Thursday, Wednesday). ...

javascriptjquerydatenamesdays

Is there a glitch in Safari's CSS involving max-height?

Currently, I am in the process of developing a popup for a registration form. The CSS rules have been configured accordingly and after testing on various browsers, it has come to my attention that Safari is displaying an additional white space between elem ...

csssafari

Calculating the dimensions of a CSS element based on its content

Is there a way to achieve this using only CSS, without needing JavaScript? I am working on a project with a lot of relative and absolute positions, where elements must be centered dynamically without specifying static widths. While I have managed to minimi ...

css

Tips on how to submit the ID of a span element with ajax

Can anyone help me retrieve the post ID of a span using Ajax? I have tried using alert($(this).attr("id")) and it works, but when I try to use Ajax it doesn't work. Any ideas why? $(".nav-item").click(function() { $.ajax({ ...

jqueryajaxthisattr

What is the best way to customize the look of the v-calendar component in Vue.js?

I've recently started a project that involves Vue.js, and I needed to create a datepicker for it. After some research, I opted to utilize the v-calendar package. The implementation of the component went smoothly and functioned as expected right out o ...

cssvue.jsdatepickervcalendar

Align the text to the center within the Paper component using React and Material-ui

I've been struggling to center text inside a paper component in Material UI, and nothing seems to be working. I attempted using display:flex in the parent component with align-items:center in the child component. I also tried adding padding:5px for eq ...

cssreactjsmaterial-ui

Say goodbye to my HTML5 creations

I am currently working on an HTML5 grid project that involves implementing a rectangle select tool for use within the grid. Everything is going smoothly, except for the fact that when I attempt to use the rectangular select tool, the grid disappears from t ...

javascriptcsshtml

How can I properly parse a JSON file in Node.js?

Utilizing node.js, I have created a webpage (index.html) for visualizing a network graph using the vis.js library. To draw a network graph with this library, it is necessary to provide json arrays for both nodes and edges (see example). // array of nodes ...

javascriptjqueryjsonnode.jsvis.js

Retrieve data from a single PHP page and display it on another page

In my project, I am working with three PHP pages: index.php, fetch_data.php, and product_detail.php. The layout of my index.php consists of three columns: filter options, products panel, and detailed description. Whenever a user clicks on a product in th ...

javascriptphpjquerymysqlajax

Retrieve the source code of a webpage by accessing its URL with JavaScript through the use of JSONP

To extract the source code from a URL web page using JSONP, you can use the following code snippet: <script type="text/javascript"> var your_url = ''; $(document).ready(function(){ jQuery.ajax = (function(_ajax){ var protocol = location. ...

javascriptjqueryajaxdomjsonp

Experiencing difficulty aligning the Material UI grid to float on the right side

I'm currently in the learning phase of material-ui and encountering an issue with floating the grid content to the right side. Despite trying alignItems="flex-start" justify="flex-end" direction="row" in the container grid, as well as using the css p ...

cssreactjsmaterial-ui

Set the class of an element dynamically using ng-class and detect changes with ng-change

I want the input field to initially have the class .form-control-error. When the user clicks on the field and starts typing, I would like it to change to .form-control-success. I attempted the following code but couldn't get it to update. The ng-chan ...

javascriptcssangularjs