Fluid and static dimensions in CSS

I am looking to have two divs in the same row in HTML, where one remains a constant width while the other adjusts its size as the end user increases the web page.

My initial attempt was to define a parent div with two child divs like this:

<div>
    <div style="float:left" width="20px">first div</div>
    <div style="float:left" width="100%">second div</div>
</div>

Unfortunately, this setup did not work as intended!

Can anyone advise on how to create two divs within the same row, where one has a fixed size and the other size is relative?

htmlcss

Answer №1

Did I emerge victorious?

Live Presentation

Live Demonstration #2 (employing classes and able to support multiple instances)

HTML Code:

<div id="divHolder">
    <div id="div1">1</div>
    <div id="div2">2</div>
</div>

CSS Style:

#divHolder {
    overflow: auto
}
#div1 {
    float: left;
    width: 20px;
    background: #ccc
}
#div2 {
    margin-left: 20px;
    background: #888
}

Answer №2

Check out this interesting demonstration here: http://jsfiddle.net/Shaz/GaZYt/2/

In this example, the size of the left box adjusts based on the available horizontal space, while the right box maintains a minimum and maximum width of 200px.

Answer №3

To make the div elements appear on the same line, consider setting display:inline. By default, div elements have a display value of block, which causes them to be displayed on separate lines. You can see an example of this in action on this js fiddle link

Answer №4

Perhaps the best solution for this scenario would involve utilizing Javascript. 

$(window).resize(function() {
  var $left = $('#left');
  var $container = $('#container');
  $right.width($container - $left);
});

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 is the best strategy for positioning an anchor element within a list item using JSX or Bootstrap in a way that maximizes efficiency?

I have the following code snippet <li className = "list-group-item list-group-item-success" key ={todo.id}>{todo.text}<a style="float:right;" onClick={() => props.onEdit(todo)} className="edit-todo glyphicon glyphicon-edit" href="#"& ...

cssreactjsbootstrap-4

Ways to examine the origin of an image based on the attributes of a React component that I have passed as a prop?

I'm facing an issue where I can't use the component's prop to set the src of an image that I imported from a file path in my component's JavaScript file. I have tried different syntaxes but none seem to be working. Here are the formats ...

javascripthtmlreactjsjsxcreate-react-app

Executing VueJS keyup handler after the previous onclick handler has been executed

Link to example code demonstrating the issue https://codepen.io/user123/pen/example-demo I am currently facing an issue with a text field named search_val that has a watcher attached to it. The text field includes a v-on keyup attribute to detect when th ...

javascripthtmlvue.js

Creating a Navigation Bar in Outlook Style Using Javascript and CSS

Looking for a navigation sidebar design similar to Outlook for my web application. I have seen options available as Winform controls and through Visual WebGUI, but these are Microsoft-dependent solutions. We need a Javascript & CSS based solution that is s ...

javascriptjqueryhtmlcss

What are the best techniques for using jQuery to manipulate an HTML form that contains nested elements?

I have a scenario where I need to dynamically generate mini-forms within an empty form based on certain conditions. For instance, imagine a form that gathers information about restaurants such as their names and locations. Depending on the number of restau ...

javascriptjqueryhtmlforms

The alignment of Bootstrap's Tabs is not centered as expected

I'm having trouble aligning the tab list to the center. The image below shows that it's currently shifted to the left. I've already included the Bootstrap class center-block, but it doesn't seem to be working. Can anyone help me out wit ...

htmlcsstwitter-bootstrap

Clicking on the modal will trigger its closure

Is there a way to prevent Bootstrap 4 modal from closing when the user tries to leave the page but clicks on it instead? I have attempted various solutions from this platform, but none have worked for me. I am running out of ideas. This snippet shows my ...

jqueryhtmlbootstrap-4

Is it feasible to submit a request without needing to redirect the page or relying on JavaScript?

I am attempting to send a post request to an API. This is what I have so far: <form method="POST" action="/api/updoot/ID:{{ post.ID }}"> <input type="submit" value="updoot"/> </form> Upon clicking submit, it redirects. While I can p ...

htmlhttp

What is the best way to merge two AngularJS form validation directives criteria using CSS?

When both $dirty and $invalid are true, I would like the input fields to have a red background. However, I am only able to do this one by one, which is not ideal. input.ng-dirty && input.ng-invalid { background-color: red; } ...

htmlcssangularjs

Activate Intellisense for PHP in .html documents within Webmatrix

How can I set up WebMatrix to treat .html files like .php files? I have been tasked with editing a website that contains php code within .html files. The site works properly due to handler declarations in the .htaccess file. I want to use WebMatrix for ed ...

phphtml.htaccesswebmatrix

Which CSS 3 transition prefixes are recommended for optimal performance?

I'm curious about the CSS vendor prefixes needed for transitions. One source mentions that "you need to use all the usual prefixes to make this work in all browsers (-o-, -webkit-, -moz-, -ms-)". Another page only displays the -webkit- and -moz- pre ...

csscss-transitionstransition

Animation showing on the progress bar is not correctly halted

I am encountering a problem with handling an animation of a progress bar in my code. The issue arises when I pause the animation, as it seems to slightly backtrack instead of pausing at the correct position upon clicking a button. Can someone help identify ...

javascripthtmlcssreactjscss-animations

JavaScript code using the Jquery library to retrieve the following article from 'cached memory'

I am aware of the easier CSS options for my question, but I am determined to learn JS (Jquery), so please bear with me. My plan: Menu-items are connected to articles within my content division. Initially, only the first article (#intro) is displayed. All ...

javascriptjquerycsshtml

Restrict the number of button clicks to only once every 5 minutes

Similar Question: jquery disable a button for a specific time I am currently developing a PHP-based website. One of the features I want to implement is a button that can only be clicked once every five minutes by the user. After some research, I hav ...

phpjqueryhtml

Creating HTML code for a mobile responsive design

I am facing an issue with my clinic webpage where the images appear differently on PC and mobile devices. I am new to HTML and CSS, so I tried using max-width: 100% but it didn't work. The code was originally created by someone else and I need help fi ...

htmlcssresponsive

Utilize jQuery to convert text to lowercase before adding Capitalize CSS styling

I have encountered a situation where I need to change the HTML link values from UPPERCASE to LOWERCASE and then apply a capitalization style. The problem lies in the fact that the links arrive in uppercase, so I had to come up with a workaround: The given ...

javascriptjqueryhtmlcss

My goal is to create collapsible and expandable rows within this table

Discover the code snippet here, without pasting the entire content... As an illustration, let's utilize this example: <head> </head> <body> <table> <tr> <th></th> < ...

htmlcsshtml-table

Issue with Cascading Dropdowns in jQuery

I am currently experiencing issues with a piece of code on my website (also accessible via this link). The code consists of 2 select fields that should display different data based on the selection made. However, I have identified 2 bugs within the code. ...

javascriptjqueryhtml

Clicking on the parent page prevents the hyperlink inside the iframe from working as expected

I am having an issue with a hyperlink inside an iframe. When I click on it in the parent page, it doesn't work. Here is how it is set up: iframe.html <h1>I'm inner page!</h1> <a id="shared" class="btn" href=&q ...

javascripthtmliframehyperlink

Discovering the block's height with the power of Jquery

I have written a piece of code that sets the height of a block of text and then applies that height to an image within the block. However, the size of the image ends up being smaller than the size of the block. https://i.stack.imgur.com/QUFWy.png <scr ...

jqueryhtmlcsscarousel