In this scenario, there is a div with the class of some-class that can have either one or two child div elements. When there is only one child div, I want it to have a width of 100%. However, if there are two child div elements present, I want them to have widths of 60% and 40% respectively. Unfortunately, I am unable to modify the HTML as it is generated by a content management system.
Is there a CSS workaround that can achieve this desired layout?
Yes, you can achieve this by using the CSS property display: table along with the adjacent sibling selector.
body > div {
display: table;
width: 600px;
}
div > div {
background: blue;
height: 100px;
display: table-cell;
}
div > div + div {
background: red;
width: 40%;
}<div>
<div></div>
</div>
<hr>
<div>
<div></div>
<div></div>
</div>I'm in the process of designing a website with a side bar that features a form on every page. I'm looking for a way to have the form information submitted to an email address without using the action: MAILTO:? Would it be possible to create a sep ...
Is there a way to change the opacity of only the background of a paragraph without affecting the text? When I try to adjust the opacity, it changes both the text and the background. How can I resolve this issue? HTML <div id="opener"> <p id="in ...
I am seeking to create a dynamic search input based on the class names within the span tags. However, I am struggling with displaying the class name that I have identified. My goal is to show the class names that match the entered value in the input on the ...
I've been working with Bootstrap and I'm facing an issue with the orientation of a div on small screens. On medium screens, I have two columns set to 6, 6 which should stack on top of each other on smaller screens. Here's how I want it to lo ...
An error occurred while processing the PHP code Severity: Compile Error Message: Unable to use function return value in write context line number:116 floor($BudgetPerPerson) = $TotalBudget / $NumberOfPeople; label class="heading">What ...
<!DOCTYPE html> <html> <head> <title>Data</title> </head> <body> /* Enter your data here */ <form action="this.php" method="post"> <input type='text&a ...
I'm facing an issue with adding a background image to my project Even after trying to add it globally, the background image is not showing up on the Next.js index page. import { Inter } from 'next/font/google' const inter = Inter({ subsets: ...
I'm trying to align 3 figures with captions horizontally in the middle of the page, side by side, but so far I've only been able to do it vertically. How can I achieve this using just HTML5 and CSS? This is my current HTML: <div class="r ...
Building on the previous discussion about optimizing a horizontal sliding layout (Most efficient way to do a horizontal sliding layout), I'm curious if it's feasible to enable the back and forward buttons in the browser when implementing a single ...
I found a codepen example by Chris Coyer and decided to fork it. My goal is to make the label move to the top instead of staying at the bottom, as in his original design. However, I am facing an issue with getting the cursor to move to the bottom when typ ...
I am finding the terminology used in material ui confusing and would appreciate if someone could clarify it for me. For example, let's consider this information from https://material-ui.com/guides/api/: Spread Undocumented properties supplied ar ...
It's a bit complex and I can't figure out why it's not working. My goal is to create a page with textboxes, dropdown lists, and a datagrid using easyui. The issue arises when I select something from the dropdown list - I want two actions to ...
I have a piece of code that works, but not exactly as I want it to. What I would like is to create a menu bar where, upon hovering over an item, the options slide out from underneath, without pushing the other menu items down. If this description isn&apos ...
After clicking the button and closing my box with jQuery (Toggle), I want the state of the box to be remembered after refreshing the page. If the box was closed, it should remain closed upon refresh, and if it was open, it should stay open. I am looking ...
I am facing a strange issue where the button and input have the same CSS (except for the background), but Firefox is displaying them differently. This problem does not occur in IE or Chrome. #searchInput { width: 80%; margin: 0 auto; display: ...
I am currently facing an issue with updating 10 apexcharts bar charts simultaneously in a Vue app. When this process occurs, it takes approximately one second to load completely, and during that time, I would like to display an svg spinner. However, the co ...
Is it possible to utilize a JavaScript Image object? If yes, could you provide an illustrative example? And is it feasible to achieve this with jQuery? ...
Can anyone help me with the access variable issue I am facing? I have two files, index.js and page.ejs. These files require me to create a timer linked with datetimes stored on my local server. //index.js.. router.get('/mieiNoleggi', functio ...
I am in the process of setting up a database for an upload system, specifically using a select box to restrict the number of categories added to the database. <select name="category"> <?php $conn = mysqli_connect("localhost", "blah", "blah") or d ...
Hello all, I am currently facing an issue with my code where I need to call a text box (or a set of divs with input fields) multiple times by clicking a button (with the id 'add_row'). The current code works fine for the first time, but not for ...