Here is the current layout structure I am working with:
div {
border: 1px solid
}<div id="col_1" style="float:left;width:150px;">1</div>
<div id="col_2" style="float:left;width:100px;">2</div>
<div id="col_3" style="float:left;width:<REMAINING_WIDTH>;">3</div>The first two columns, col_1 and col_2, have fixed widths. I am looking for the best approach to make the third column fill up the remaining space. Any suggestions on how to achieve this?
If you're feeling adventurous, ditch the javascript and CSS3 features that are still a work in progress, and opt for absolute positioning instead.
Take a look at this jsfiddle. Extra credit for maintaining responsiveness during browser resizing.
#col_1 {
position: absolute;
top: 0px;
bottom: 0px;
width: 100px;
background-color: #eee;
}
#col_2 {
position: absolute;
top: 0px;
bottom: 0px;
width: 150px;
left: 100px;
background-color: #ccd;
}
#col_3 {
position: absolute;
top: 0px;
bottom: 0px;
left: 250px;
right: 0px;
background-color: #cdc;
}<div id='col_1'>Column 1</div>
<div id='col_2'>Column 2</div>
<div id='col_3'>
Column 3
</div>To achieve the desired effect of having all 3 divs fill up the entire window space (100%), Javascript is required. By using javascript to calculate the remaining space and assigning the appropriate height to col_3, this effect can be achieved. With the help of jQuery, the following code snippet can be used:
var one = $('#col_1').height(),
two = $('#col_2').height(),
remaining_height = parseInt($(window).height() - one - two);
$('#col_3').height(remaining_height);
Even though you've already accepted a solution, consider exploring CSS Flexbox as an alternative. This method is specifically designed to tackle this issue without resorting to "float:left" workarounds. It is supported on Chrome, Safari, and Firefox (with -webkit and -moz prefixes), but not yet on Internet Explorer.
Here are some helpful resources to get you started:
In order for this to function properly, a block formatting context is required:
#box1,#box2 {
background-color: blue;
float: right;
width: 250px;
}
#box2 {
background-color: orange;
}
#box3 {
background-color: purple;
height: 50px;
overflow: auto;
}
The key element here is the overflow property. For more details, refer to: http://www.example.com/block-formatting-context
After some experimentation, I developed a CSS-only solution that works across multiple browsers including FF12, GC18, SAF5.1, and IE 7,8,9,9CV.
.Clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
.Clearfix {
display: inline-block;
}
html[xmlns] .Clearfix {
display: block;
}
* html .Clearfix {
height: 1%;
}
#Wrapper {
background-color: #FC20C9;
}
#col_1 {
float: left;
width: 150px;
background-color: #FF0000;
}
#col_2 {
float: left;
width: 100px;
background-color: #00CC00;
}
#col_3 {
width: auto;
float: none;
background-color: #0066FF;
overflow: hidden;
}<div id="Wrapper" class="Clearfix">
<div id="col_1">Lorem ipsum</div>
<div id="col_2">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
<div id="col_3">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</div>
enter code hereTo calculate the available space, one can either utilize jQuery or leverage the flexibility of CSS3's flexible box properties:
For more information, visit: http://www.html5rocks.com/tutorials/flexbox/quick/
Refer to 'diagram2' for the scenario where the last box with the highest 'box-flex' value will occupy the remaining space (default box-flex is 0).
If your goal is to optimize for newer browsers, consider utilizing the HTML5 calc function for flexible layouts.
#col_3 {
width: calc(100%-(100px+150px));
}
#red {
border: 1px solid goldenrod;
}
div {
border: 1px solid;
}<div id="red">
<div id="col_1" style="width:150px; float:left;">1</div>
<div id="col_2" style="width:100px; float:left;">2</div>
<div id="col_3">3</div>
</div>To make it expand to fill everything, remove the width attribute. Alternatively, you can set width:100%. I recommend checking out the Firebug plugin for Firefox.
Enclose the three div elements within a single container, assign specific widths to the first and second columns, and let the third column expand automatically.
The code snippet below is a segment of the code generated by the FullCalendar jQuery plugin version 2. It has undergone some changes from version 1.x in terms of the classes it utilizes. <div class="fc-slats"> <table> <tbody> ...
I developed a personalized video player using JavaScript. However, I encountered an issue where clicking the Space bar to stop the video causes the page to jump down. I am currently looking for a solution to prevent this from happening. Here is a snippet ...
Is there a way to activate the onClick and onHover CSS animations for the ReactJS button component below? I attempted to use ref = {input => (this.inputElement = input)}, but I only see the animation when clicking the button. <td> ...
Is there a proper way to control gravity on individual objects without compromising collision events or rotation velocity? I came across this issue but seeking a more comprehensive solution. In my situation, I need player physics to function normally, wh ...
Currently, I am facing a situation where I need to retrieve activities with corresponding version numbers. The challenge lies in the fact that some activities have only one version, while others have multiple versions. These activities are obtained through ...
I am having issues with using ng-selected to retrieve the selected value from a dropdown. Instead of displaying the selected value, it appears blank. Here is the code snippet I have tried: <div> <select id="user_org" ng-model="selectedorg.all ...
As a newcomer to AJAX and Javascript, I am attempting to integrate them with an API following this structure: http://localhost:8088/JobPositionForDd: { "data": [{ "_id": "529dc2dfd0bf07a41b000048", "name": "Junior Android" }, { ...
When I apply the CSS rule letter-spacing: 16px;, I observe that the characters are aligned to the left within their designated space, causing the cursor to jump towards the right as if an additional space was added after each character. I am wondering if ...
Have you ever noticed that in the Android Gmail app, there can be a mysterious 1px gap between inline images? This little pixel problem can sometimes push the rightmost image outside the comfy frame of your email. It seems this glitch prefers images of cer ...
Greetings, I am currently facing an issue while using the combination of cometd, jquery, and Java for testing purposes in broadcasting a message. Below is my web.xml configuration where I have utilized the Annotations implementation of cometd: <!-- Co ...
Currently, I am delving into learning backbone.js and have decided to create my own Todo application using backbone.js along with a local storage plugin. At this point, I have successfully developed the Todo app where you can add and remove tasks. However, ...
After stumbling upon this specific piece discussing the creation of a singleton in Node.js, it got me thinking. The require functionality according to the official documentation states that: Modules are cached after the first time they are loaded. Multi ...
My attempt at creating a toggle button for tablets and phones seems to be failing. Despite the javascript class being triggered when I click the toggle button, it is not functioning as expected... https://i.stack.imgur.com/j5BN8.png https://i.stack.imgur. ...
I'm attempting to add an event to FullCalendar.io using a JavaScript function. I've tried two methods. Triggering the function at the end of the page or by clicking. No error is displayed, but the event isn't showing up on my calendar. & ...
Here is the snippet of HTML code I am currently working with: <h1><span>Main Menu</span></h1> <div> <button tabindex="0">New Customer</button><br> <button tabindex="0">Existi ...
I'm having trouble with my outlet not working in react-router-dom. Everything was fine with my components until I added the Outlet, and now my navigation component isn't showing even though other components are rendering. import Home from ". ...
While exploring the coding style guidelines by npm, I stumbled upon a rather enigmatic suggestion: Be very careful never to ever ever throw anything. It’s worse than useless. Just send the error message back as the first argument to the callback. Thi ...
As a newcomer to web development, I am currently working on a Bootstrap website. Everything seemed to be working fine in desktop mode, but I encountered an issue in the mobile view where some Bootstrap columns were overflowing, causing a vertical white spa ...
Is it possible to integrate an asp.net web service written in C# into an HTML5/JavaScript website? The challenge is that the web service and client are located on different domains, requiring a cross-domain request. ...
Assistance is required for the query below: Is there a way to display the input field value from one step to the next in multistep forms? Similar to how Microsoft login shows the email in the next step as depicted in the image below: https://i.sstatic.ne ...