Hey there, I am attempting to align 2 divs on the left side with one div on the right.
#div1 #div2
#div1 #div2
#div3 #div2
#div3
#div3
The challenge is to have #div2 positioned between #div1 and #div3 when the browser window is resized smaller.
Currently, #div3 only starts after #div2, but it correctly falls into place when the window size is reduced.
#div1 #div2
#div1 #div2
#div2
#div3
#div3
#div3
One solution to your issue would be to ensure that all Divs have the same number of elements, allowing for uniform height with the help of the "Override: ellipsis" function.
In cases where Div 2 appears alone on the right side, you can position it fixed from the left for better presentation.
I recently experimented with this concept in a fiddle, despite my reservations. Check it out here for a practical example: http://jsfiddle.net/nugPA/
If you remove the specified line, the layout reverts to a basic column structure:
div#two {position: fixed; left: 150px;}
This type of query has surfaced numerous times in the past, indicating common challenges faced by many.
Do you visualize it this way? (Try adjusting the viewport size to test the media query feature.)
HTML
<div id="section1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
<div id="section2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
<div id="section3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>CSS
#section1, #section2, #section3 {
width: 300px;
}
#section1 {
border: 1px solid blue;
}
#section2 {
border: 1px solid green;
position: absolute;
top: 0px;
right: 0px;
}
#section3 {
border: 1px solid yellow;
}
@media screen and (max-width: 600px) {
#section2 {
position: fixed;
}
}
DEMO
My website focuses on online magazines. I'm looking for a way to selectively display specific parts of articles that are in regular HTML format with a global CSS stylesheet applied. There are no images, only text. How can I extract certain segments of ...
I would like the checkbox to be checked by default. HTML : <div class="form-group col-sm-6" ng-class="{ 'has-error': pForm.caddress.$dirty && pForm.caddress.$error.required }"> <label class="contro ...
Hello, I am curious about dynamically loading modals on different images within my current webpage. For example, when the life of Pi image is clicked, a modal pops up displaying relevant information. I would like this functionality to extend to other ima ...
I am facing an issue with a select element wherein a basic (change) handler is attached along with an ngmodel. Whenever an <option> with a ng value is set, the change handler triggers before the [(ngModel)] reflects the new values. <div> ...
I'm struggling with a piece of code that showcases a tooltip when the user hovers over the question circle icon. The tooltip's content can't exceed 1000 characters, but I need to figure out how to make the overflow scroll by adjusting the to ...
I am currently working with a Smarty template that contains the following code output: Check out my other question on Stackoverflow My problem lies in the fact that the provided code does not repeat the inserted HTML after every 5 elements... Could some ...
Description While navigating on mobile browsers, I'm facing a challenge with keeping an element centered as I scroll due to the browser window minimizing. I've experimented with different solutions such as utilizing the react-scroll library and ...
I'm trying to add a link in my main template.index file that will redirect to one of my pages when clicked on the JavaScript button at the top in Pluto theme. Currently, the text is there but clicking on it opens something I don't want. Here&apo ...
Struggling to navigate to the bottom of the webpage, it seems to only scroll once before stopping, leaving a large portion of the page unseen. I'm currently using this code snippet: _inst.driver.execute_script("window.scrollTo(0, document.body.scroll ...
{ // Let's figure out how to launch my HTML file as a webpage in Chrome. "version": "0.2.0", "configurations": [ { "type": "pwa-chrome", &q ...
I've been experimenting with creating a "css3 on hover flip" effect for bootstrap thumbnails. It works perfectly fine on simple divs (check it out here) Here's the main CSS3 code I'm using: .front{ position:absolute; transform:pers ...
When I leave the keyword new on line: var myGamePiece = new makeComponent(myContext, 30, 30, "red", 10, 120); The red square continues to move even when I release the arrow key. However, if I remove the new element from that line, the square stops moving ...
I've been coding for a number of years now, but I've recently started learning CSS. I'm currently facing an issue and need some help. I want to place two divs next to each other and center them. Here's the code I'm using: HTML: & ...
I am working on designing a navigation bar with dropdown functionality. Is there a way to hide the dropdown menu when the mouse pointer leaves both the navbar menu and the dropdown itself? I have tried using hover, mouseenter, and mouseleave but due to my ...
Introduction - I've implemented a feature where multiple modal windows can be opened on top of each other and closed sequentially. Recently, I added a blur effect that makes the background go blurry when a modal window is open. Subsequently opening an ...
I'm trying to format my text into two columns while maintaining control over where the column breaks occur. Here is the CSS code I am using: body { } #content { column-count: 2; } #left_col { break-inside:avoid-column; } #ri ...
I need assistance with a jquery function that retrieves data from a JSON PHP MySQL setup. The retrieved results are currently displayed in textboxes. function showData(wine) { $('#Id').val(wine.id); $('#question').val(wine.question ...
I have a challenge where I am attempting to showcase a variable using the code provided below: HTML: <div id="MyEdit">Money</div> JS: var price1 = 0; var current_value=document.getElementById("MyEdit").innerHTML; if (current_value == "msc" ...
I keep encountering a load timeout error with my run-time configuration, specifically with common.js. Although I have set the waitseconds value to 0 for files loaded from common.js, the loadTimeout issue persists for common.js itself. index.html <scr ...
Is it possible to create a color picker that allows the user to select a hex value and then automatically apply it as an attribute in an HTML tag, like shown below? <p style="background-color: #FCF8C0;">TEXT GOES HERE</p> In the code example ...