Securing containers with CSS styling

I'm currently working on a website and I've encountered an issue with positioning. Within the content section, I have two main text boxes - one in the top left corner and one in the bottom right corner. However, when the browser window is resized, the boxes shift, with the bottom box moving to the left and the top box moving to the right due to their position:absolute settings. Is there a way to lock them in place or perhaps create a 'wall' in the middle to prevent this movement?


#contentleft {
    font: normal 14px verdana, sans-serif;
    width: 450px;
    height:275px;
    overflow-wrap:normal;
    word-wrap:break-word;
    position:absolute;
    left:550px;
    top:175px;
}
#contentright {
    font: normal 14px verdana, sans-serif;
    margin:0 auto;
    width: 500px;
    height:275px;
    overflow-wrap:normal;
    word-wrap:break-word;
    position:absolute;
    right:550px;
    bottom:100px;
}

Answer №1

When your two textboxes are contained within a parent div, it's important not to rely too heavily on CSS positioning. Try using #contentleft {float: left} to manage the layout instead. Avoid using position: absolute since this can cause issues when the browser window is resized. Opt for position: relative instead to keep the positioning confined to the boundaries of the parent div.

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

Using Javascript to change CSS in a Polymer application

Coming from a background in angular and react, I am now delving into the world of polymer. I have a polymer class called myClass with the following template. <div id="[[x]]"> Here, 'x' is a property defined in a property getter. stat ...

Troubleshooting the Gutter Problem in jQuery Isotope and Masonry

Currently, I am utilizing the Isotope jQuery plugin. While it is a fantastic tool, I am encountering a minor issue with aligning items in masonry mode. The width of my container is 960px, and I aim to have 4 items perfectly aligned as if they were adhering ...

How to style multiple tags using CSS

Is there a way to style specific tags in CSS? <style type="text/css"> [attribute*="test"] { background-color: red; } </style> However, this method does not seem to work for the following tags: <test-1> </test-1> <t ...

Utilize a dynamic approach to add the active class to navigation list items

My files all have a header that includes a navigation bar. I am trying to use jQuery to add the 'active' class to the relevant list items (li). The method I initially thought of involved setting a variable on each page, assigning an ID equal to ...

Exploring jQuery's ability to retrieve CSS values

Is there a way to use jQuery to read a specific CSS value from a class? The situation is as follows: HTML: <div class="box"></div> CSS: .box { margin-top: 100px; } I want to determine if the .box class has a margin-top of 100px in order t ...

Using pre-existing CSS state background colors in GTK3

I am currently in the process of adapting a PyGTK2 application. This particular application performs tasks such as: self.normal_color = editor.style.base [Gtk.STATE_NORMAL] self.insensitive_color = editor.style.base [Gtk.STATE_INSENSITIVE ...

Retrieve the content of the 'div' element, but exclude certain text

I have a task to copy the content from a div into a textarea, allow for editing within the textarea, and ensure that any changes made are saved back to the original div. I also need to filter out an attribute, such as data-bind: "some stuff;", set for the ...

Scroll to make the div slide in from the bottom

I'm trying to achieve a similar effect like the one shown in this website (you need to scroll down a bit to see the divs sliding in). Although I'm not very proficient in JS, I was able to create a code that makes the divs fade in from 0 opacity ...

Unable to eliminate italicized text within collapsible content

Despite having no programming experience, I am attempting to create a FAQ section for our help site using collapsible sections for the Q&A. While I've managed to achieve most of what I wanted, there is one element that stubbornly refuses to change. De ...

iPhone-compatible iFrame with adaptable webpage dimensions

While attempting to embed our page on a client's site, everything looks great in a browser and our media queries are functioning properly. However, we encountered an issue when viewing the embedded page inside an iframe on an iDevice. It seems that th ...

Easily convert 100% of the height to pixels

Is there a way in HTML to convert a div's height from 100% to pixels without specifying a particular pixel value? ...

Challenges associated with Bootstrap toggle switch

I am having some difficulties with using bootstrap switch. I have tried the examples provided on , but regardless of the classes I apply, the buttons remain the same small size and the text for ON and OFF is barely visible. I can't seem to figure out ...

using css to pass arguments

I need help with a code that I have, here's the structure: <div className="site-col-1"> content 1 </div> <div className="site-col-2"> content 2 </div> Here is how the corresponding CSS file looks... .s ...

JavaScript does not function properly with dynamically loaded content

Trying to load the page content using the JQuery load() method. See below for the code snippet: $(window).ready(function() { $('#content').load('views/login.html'); }); .mdl-layout { align-items: center; justify-content: center ...

Vertical alignment of text within a center位置

My current project involves creating a website layout similar to this: I am facing difficulty in centering the text within the box like this: This is my progress so far: @font-face { font-family: 'Trend Sans 004'; /*a name to be used lat ...

Excessive content spilling over into the footer area due to an integrated forum feature within

We have integrated a Muut forum into our website, and it is working well when embedded in a coding block within the page's body. However, there is an issue where the sidebar of the forum gains extra features when logged in as an admin. This causes the ...

Steps to dynamically reveal a table row within another row when clicked:

I have a table and I want to show the contents of another row inside the current row when the plus icon is clicked. I'm not sure which HTML element to use for this. Please help me figure it out. Thank you in advance. <div class="pro ...

Tips for formatting angular text sections

Within the scope of a controller, I have a status variable. After a successful rest PUT request, I add a message to this JavaScript variable. This message is displayed in my template using the {{status}} Is there a way to customize the styling of this mes ...

What is causing my table to refuse to center?

I'm having trouble keeping my table of images contained within the content area of my page. Additionally, I can't seem to get my footer to stay at the bottom of the page. Take a look at this image for reference: body { margin: 0px; padding ...

Can someone assist me in figuring out how to solve selecting multiple radio buttons at once

<script type="text/javascript"> let x = "1.html"; let y = "2.html"; function redirectPage(form){ for(let i=0; i<form.length; i++) { if(form.answerq[i].checked && form.answerw[i].checked && f ...