Adjust the width of the floating division

I'm facing an issue with a div structure that contains two other divs displayed like this:

----------------------------
|            |             |   
|            |             |
| div 1      |    div 2    |
|            |             |
|            |             |
|            |             |
----------------------------

div 1 has a fixed width and sometimes needs to be removed. div 2 is always visible. The container of these two divs has a fixed width. My dilemma lies in how to determine the width of div2. When div1 is present, div2's width should be x, but when div1 is hidden, div2's width should match that of the container. The CSS for div1 and div2 is as follows:

#div1{
    width: 146px;
    height: 118px;
    float: left;
}

#div2{
    height: 104px;
    padding: 12px 5px 2px 11px;
    float: left;
}

Any suggestions on how to achieve this?

csshtmlwidthcss-float

Answer №1

Here is an example of how to write your CSS:

CSS

#box1{
    width: 146px;
    height: 118px;
    float: left;
    background:red;
}

#box2{
    height: 104px;
    padding: 12px 5px 2px 11px;
    overflow:hidden;
    background:green;
}

You can view the live example here

Answer №2

Adjust the width of div2 to "auto" and set the min-width to "containerWidth-Div1Width".

Answer №3

No JavaScript necessary for this task.

Simply utilize CSS for the desired effect.

Check out this new code snippet I just created: http://jsfiddle.net/eUYyQ

By utilizing the + selector, you can target the 2nd div and adjust its float property based on the presence of the 1st div. If the 1st div is absent, the 2nd div will maintain its default block display.

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

IE8 is giving me a tough time with CSS3 + HTML5SHIV + CSS3PIE Border-radius; it works fine on IE7, 9, and

Working on a site at , which is constructed using: Twitter Bootstrap HTML5 + CSS3 HTML5SHIV CSS3PIE Problem: Border-radius styling for the navbar link when active is not functioning in IE8 despite using CSS3PIE. However, it works fine in IE7,9,10 (confi ...

csstwitter-bootstrapcss3piehtml5shiv

Modify the design of the button in the CSS code

I am facing an issue with the layout of the Visible Columns button and unable to standardize it like the buttons above using CSS enter image description here The code snippet for the Visible Columns button is as follows: import React, { useState, useEffe ...

javascripthtmlcssreactjs

How to upload a file with JavaScript without using Ajax technology

Is it possible to upload a file using the input tag with type='file' and save it in my project folder without using ajax? Can JavaScript help me achieve this task? Below is the code snippet I am currently working on: function func3() { var ...

javascripthtml

Wordpress team exhibition

Does anyone know how to create a Team showcase slider in Wordpress? I have been using slick slider, but I'm looking for a way to add team members easily through a plugin rather than manually. I found an image of what I want it to look like. Can any ...

javascriptjqueryhtmlwordpress

I am dealing with a set of divs wrapped in a flex container that tend to overlap each other. Their heights vary and sometimes they wrap multiple times. Any suggestions on how to prevent this

I am encountering an issue where the width of the div remains the same after it has wrapped, causing overlapping. I want the first div to push the second to the right and so on. When I add a 100% width, it makes the width for the smallest div the same as ...

cssreactjsflexbox

Hover effect on two divs changing states

I was so close to solving this issue, but I'm stuck on the final part. Here's the code snippet I've been working on: /* valuecanvas */ #wrappercs { margin-top: 3px; width: auto; height: auto; display: block; float: right; bac ...

htmlcss

Tips for identifying when a change has been made to a SCSS file or any of its partial files

Looking to incorporate sass into a Ruby script but want to compile only when necessary. The typical method for compiling involves using the following code: require "sass" Sass::Engine.new(File.read(scss), options).render By utilizing appropriate hash val ...

cssrubysassfileupdate

Leveraging an AngularJS variable within an iframe

Is it possible to use a variable inside an iframe src or ng-src attribute? I've tried different variables but none seem to be recognized. For example: <iframe ng-src="http://www.example.com/?name={{test}}"> </iframe> The variable test ju ...

htmlangularjsiframe

How to target the following sibling element (not a child) with CSS

I am working with the following HTML structure: <div class="col-sm-12"> <input id="my_id"> <div class="col-sm-1 col-3-box" style="position:absolute; margin-left:340px;"> </div> </div> How can I target and change ...

htmlcss

Is the parallax effect achieved by stacking one div on top of another div?

Here is a sample of my HTML code: <div id="a" class="panels">FIXED PANEL</div> <div id="b" class="panels">Scrolling-Panel 1</div> <div id="c" class="panels">Scrolling ...

htmlcssparallax

Uncertainties surrounding the use of JSON data versus a JavaScript object

As a newcomer to programming, I have ventured into Stack Overflow and W3schools to enhance my skills. Recently, I created a small project for educational purposes. One dilemma is bothering me - is the JSON file I generated actually in proper JSON format o ...

javascriptjsonajaxhtml

Can CSS modules be used in conjunction with outside libraries?

I've incorporated a Slider library () into my React project. While regular CSS allows me to style the slider properly, I am facing issues when using css modules. The tsx file looks like this: import styles from './styles.module.css'; . . . ...

cssreactjscss-modules

In what way does Angular incorporate _page-theme.scss assets?

The Angular Material Documentation homepage includes a specific scss file: https://github.com/angular/material.angular.io/blob/master/src/app/pages/homepage/_homepage-theme.scss Although this scss file is not directly imported into the component's ...

javascriptcssangulartypescriptsass

The <br/> tag is not functioning properly when retrieving text from a MySQL query

Currently, I am involved in a project that involves an A.I pushing text onto a MySQL database. Our goal is to display the ongoing writing process on a webpage. We are still actively working on this. We are retrieving the data and regularly checking the da ...

javascripthtmlmysqljson

Utilizing jQuery to Maintain State Across Page Refreshes with Cookies

Currently, I am attempting to create a script that can retain its state even after the page is refreshed. Here is my progress so far: Utilizing jQuery: $(window).ready(function() { var voteId = $('.gallery-item a'); $(voteId).click(function() ...

javascriptjqueryhtmlperformancecookies

Display the text area when the "Yes" radio button is clicked, while it remains hidden either by default or when the "No" radio button is selected

I am currently working on an html code and I am looking for a way to use java script in order to create a text area box only when the "Yes" radio button is selected. This text area should be hidden by default or when selecting "NO". <table class="tab ...

javascripthtmljquery

What is the best way to showcase MySQL outputs in a Flask application?

Good evening everyone, I'm Eric, currently learning how to create web applications using Flask and Python. I've made some progress connecting to the database and performing searches without any problems. However, I am encountering two issues that ...

pythonhtmlflask

View a pink map on Openlayers 2 using an iPhone

I am currently working on a project where I am trying to track my location using my smartphone and display it on a map. To achieve this, I am utilizing openlayers 2. However, I am encountering an issue. When I implement the code below in a Chrome Browser ...

javascripthtmlopenlayers

Troublesome alignment with bootstrap grid system

I require some assistance with the following: https://i.sstatic.net/vK9zmm.png Specifically, I need help regarding the structure shown below: <div class="row"><div class="col-md-4"> <a class="individ" href="index.p ...

phphtmlcsstwitter-bootstrap

Having trouble with Angular's ng-class performance when dealing with a large number of elements in the

I've encountered a performance issue while working on a complex angular page. To demonstrate the problem, I've created a fiddle that can be viewed here. The main cause of the performance problem lies in the ng-class statement which includes a fu ...

javascripthtmlangularjs