Is there a way to position two divs on a page without hard coding margins or padding? One div has fixed positioning at the top of the page with style="position:fixed; left:0; top:0;right:0;", and the other has fixed positioning to the left of the page with style="position:fixed; left:0; top:0;bottom:0;". Can the left div be positioned so its top edge lines up with the bottom edge of the top positioned div without overlaps?
To resolve your problem, you can place both the div elements inside another container div and apply the style position:fixed to this parent container.
<div style="position:fixed;top:0;left:0;right:0;">
<div>Content in div 1</div>
<div>Content in div 2</div>
</div>
Give this a try:
.container{
position: relative;
width: 600px;
height: 400px;
background: blue;
perspective: 100px;
}
.box1{
position: fixed; left: 0; top: 0; right: 0;
width: 200px;
height: 200px;
background-color: red;
}
.box2{
position: fixed; left: 200px; bottom: 0;
width: 200px;
height: 200px;
background-color: green;
}<div class="container">
<div class="box1">Box 1</div>
<div class="box2">Box 2</div>
</div>Give this a shot, it seems like you're aiming for something similar.
.container{
position: relative;
background-color: #000;
width: 600px;
height: 400px;
}
.box1,.box2{
position: absolute;
left: 0;
background-color: #f00;
height: 190px;
}
.box1{
top: 0;
right: 0;
}
.box2{
bottom: 0;
width: 200px;
}<div class="container">
<div class="box1"></div>
<div class="box2"></div>
</div>To set the top position of the left DIV based on the height of the top div, you can simply use the same value:
.top,
.left {
position: fixed;
}
.top {
top: 0;
left: 0;
right: 0;
height: 100px;
background: red;
}
.left {
top: 100px; /* This is where we set it based on the height of the top div */
bottom: 0;
left: 0;
width: 150px;
background: green;
}<div class="top"></div>
<div class="left"></div>One issue I'm facing with jquery.mobile is that there seems to be a gap between photo1 and photo2 when displayed on my mobile device. Any suggestions on how to eliminate this space and have the images appear seamlessly next to each other? Thank you in ...
I need to develop a table where some of its columns are generated dynamically based on database values. So far, everything seems to be going smoothly. However, I am facing an issue with the dynamic table headers. I want to create two sub-headers for each ...
My dilemma is with the width of my body and background image. I set the body width to 1920px to match the background-image for the header. However, since I have a narrower wrapper inside the body, the header background's width gets cut off by the wrap ...
I noticed something strange happening when I open a modal after clicking on an image on my website. The background image seems to zoom in along with the modal, thanks to a new class called .modal-open added to the body element. This class includes addition ...
In my Angular application, I have set up a scenario where users are presented with multiple choices through buttons. When a user clicks on a button, a specific component is displayed based on their choice. I am currently working on enhancing the styling of ...
I am puzzled by the json output and its relation with jquery. Below is the json data, but the syntax seems quite peculiar: {"ResC": { "@attributes": { "ver": "1.1", "prod": "HAFAS 5.31.VBB.4.8.9", "lang": "DE" }, "STBRes": { "@attributes": {"plan_ ...
Currently utilizing Bootstrap 3.0 distribution and following a tutorial to understand its functionality. Despite following the instructions precisely (adapting from v2 to v3 classes as needed) without any additional custom CSS, I am encountering an issue ...
The dropdown menu will only appear when you hover the mouse over it. I have tried numerous solutions online, but none of them seem to work: Selenium can't locate option form element by xpath Choosing a value from a dropdown using selenium python ...
One issue I'm facing involves my navbar and how it interacts with links to content containers. Whenever I click on a link that scrolls the website to a container, the text ends up disappearing under the navbar. View the demo screenshots below for clar ...
When creating a navigation bar with li elements floated left, the text also floats left. How can I center the text in the navigation bar? I have tried using text-align:center;, but it doesn't center the text on the y-axis. Some suggest using padding t ...
I'm having trouble figuring out how to display a total price after a selection is made. My goal is to take the selected value, multiply it by 100, and then use the updateTotal function to show the total. // Gather Data & Prices for Updating Dynamic P ...
I'm a beginner in html5 and I've recently been experimenting with the canvas element. Can anyone provide insight on when the canvas would be most beneficial or practical to use? Essentially, what are some scenarios where it is recommended to util ...
Is there a way to implement this design using HTML and CSS? https://i.sstatic.net/RjD6l.jpg Keep in mind that the first row and columns in the first row should be transparent. ...
Looking for some help with flexbox! I have a container with 2 blocks inside. My goal is to change the flex-direction to "column" when the screen width is less than 700px, but I'm having trouble getting it to work. Currently, when the screen width is l ...
I'm facing a simple task. I have a String with an href value, and my goal is to locate the web element on the webpage that includes that specific href. Here's what I'm trying: String href = "http://www.bing.com/images?FORM=Z9LH"; driver.fin ...
Currently, I am in the process of creating a table with cells that are editable. However, I am facing a challenge in updating the visual and typescript code simultaneously. I have explored various alternatives but unfortunately, none of them seem to work. ...
I'm working on setting up a navbar with three elements. I want to have a left-aligned brand, a group of right-aligned links that will collapse on smaller screens, and an additional button that stays visible at all times. To achieve the alignment of t ...
I'm experiencing an issue with my navbar text becoming translucent when scrolling. How can I fix this problem? Check out the picture below for more details. ...
I'm attempting to create a layout using Bootstrap 3.2.0 with tiled divs in a single row for screens wider than 768px. The divs have heights of either 50px or 100px, controlled by the classes "home-height-single" and "home-height-double," and widths ad ...
Is there a way to make the height of the textarea in my demo always be 50% of the frame's height, even when resizing the frame? Currently, the textarea's height does not adjust dynamically. How can I achieve this? html, body { line-heigh ...