Is there a way to create two proportional columns using HTML/CSS, with the left column sticking to the user's view as they scroll?

I am in need of a two-column layout where the columns are proportional in size and do not overlap. The left column should have minimal content at the top and scroll along with the page as the user scrolls down. On the other hand, the right column will contain extensive data without a scrollbar, allowing the browser to handle scrolling down the page.

My goal is to merge two examples - one maintaining proportionality like Example 2 while ensuring that the left side content follows the user down the screen to view all of column 2, similar to how it works in Example 1.

To better understand what I mean, please check out the example links below:

I have made an update to the example by including a JQuery UI calendar in the left div to demonstrate issues of resizing the right column correctly when using position: fixed layouts (specifically, the JQuery calendar overflowing its div.)


I am seeking a fluid yet functional two-column layout where the columns maintain proportionality and scroll behavior as described above.

htmlcsslayout

Answer №1

Utilizing DIV tags to segment the webpage allows for the creation of this specific effect, demonstrated below:

<div style='position: fixed;width: 25%;'>
  Text designated for the left side.
  Expected to scroll downwards on the page.
</div>

<div style='float: right; width: 75%;'>
  *insert extensive content here. This can also include table data if desired.*
</div>

Answer №2

When an element has the property position:fixed, it essentially becomes an absolutely positioned element that is placed relative to the browser window.

This results in the element being taken out of the document's flow, meaning it won't impact the positioning or size of elements before or after it. This explains why your left column doesn't adjust its width when the fixed position element is too wide.

It's worth noting that IE6 does not support position:fixed and reverts to position:static by default. Additionally, IE7 only supports position:fixed if a strict doctype is used.

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

What is the most efficient method for embedding a YouTube video into a <video> tag using React?

I tried embedding a YouTube video using an HTML5 tag, but encountered an error <div className={classes.VideoContainer}> <video className={classes.movieInfo__trailer} src="https://www.youtube.com/watch?v=V3hy2aLQFrI" ...

htmlreactjs

Getting an 'undefined function' error while calling PHP in two separate includes?

My website template consists of four PHP files: - functions.php (contains main functions for the website) - index.php (main template file to bring other documents together) - header.php (website header) - footer.php (website footer - this is where ...

phphtml

Include a floating element within a modal box

I am trying to display some cards within a Bootstrap modal form. Inside the modal, I want the cards to appear in two columns by using the "col-md-5" class. .mycard.col-md-5 card contents However, when I use the "col-md-5" class, it adds a property o ...

htmlcsstwitter-bootstrap-3frontend

I'm interested in clicking on an image within a div to trigger a page refresh and then automatically hide the div once the page has refreshed

UPDATE 2 SITUATION To prevent access to quiz content until the page is refreshed, I am employing a semi-transparent image with a top-margin off-set. The following code functions flawlessly on one specific page and only once: JavaScript window.addEventL ...

javascripthtmlcss

Styling a Razor view using inline CSS and responsive media queries

I need to add some simple inline styling for print purposes to an .cshtml page I'm working on. I initially tried using the @media print media query, but it is causing issues with my cshtml page. Is there a workaround for this problem? The culprit see ...

asp.netasp.net-mvccssasp.net-mvc-4razor

Interested in implementing Bind and Unbind functionality to enable hovering over a different row after selecting a radio button

Can someone assist me in incorporating the Bind and Unbind functions? I have a table with multiple rows, each containing radio buttons. Currently, when I hover over a row it changes to light blue. However, once I select a radio button, I can no longer hove ...

jqueryasp.nethtmlcssradio-button

Python Script for Scanning a Website for a Specific Tag

Currently, I am exploring the process of creating a website monitoring script (which will eventually be set up as a cron job) that can access a specified URL, verify the presence of a specific tag. If the tag is not found or does not contain the expected i ...

pythonhtmllinuxscriptingcron

Make the div block fill the entire body by setting its width to 100%

I am attempting to make the center block (which has a grey background) expand to the edges of the browser. By utilizing the code below, I have been successful in achieving this: #aboutBlock { background: #f2f2f1; position:absolute; left:0; ...

htmlcss

X/Y Client accessing via Chrome on Android device

I am looking to accurately capture the X and Y coordinates where the user taps on the screen, regardless of zoom or scroll levels. Currently, I am utilizing event.clientX and event.clientY to achieve this, which is working as intended. The code snippet loo ...

javascriptandroidjqueryhtml

Having trouble with image hover functionality on pure CSS?

<div id="headermenu"> <ul > <li id="menu1"><a href="#"><img src="images/menu1.png"/></a></li> <li id="menu2"><a href="#"><img src="images/menu2.png"/></a> < ...

htmlcss

Utilize Javascript/jQuery to play individual HTML audio files sequentially

On my website, each keyboard key is associated with an audio file. When a letter key from A to Z is pressed, the corresponding audio file is played. For all other keys (excluding ESC), a random audio file out of the 26 available is played. However, if mult ...

javascriptjqueryhtmlaudio

Tweenmax opacity will hold at 1 for a short period of time after the page has been reloaded

After implementing TweenMax from Gsap, I created a landing page intro with a loading container containing three divs, each with a h5 element positioned in the center using absolute positioning. Initially, I used StaggerFrom {opacity 0} to staggerTo {opacit ...

javascripthtmlcssgsap

What is the best way to utilize Rselenium's findElement() function in order to target an xpath based on its text content

Despite researching similar questions on stack overflow, I have not been able to make my code work. Here is the initial code I am working with: library(RSelenium) library(rvest) remote_driver <- RSelenium::remoteDriver( remoteServerAddr = "local ...

htmlrseleniumxpathrselenium

Validating (Update database with correct email and token)

Authentication (Update database if email and token are accurate) Even when the code is incorrect, it displays "Great Success", but the status does not update in my database. However, if I input the correct code, it shows "Great Success" and updates the s ...

phphtmlcssdatabase

Display or conceal rendering in Rails upon clicking a button

I'm attempting to accomplish a seemingly simple task that is proving quite challenging. My goal is to conceal a render or partial in a specific view within my Rails application. Despite my efforts to find a solution, I have not come across any working ...

javascriptjqueryhtmlcssruby-on-rails

additional dark border streak

When you resize the browser window, you will notice a different layout for iPhone. I am seeing an additional black line below the slider and I'm unsure how to remove it. I have already tried removing the border property but the black line remains. Bel ...

htmlcssmedia-queries

What is the best way to populate a select input field with options using JavaScript?

When I am loading an HTML table, there is a select input field that needs to display some options. Immediately after constructing the HTML table row, I invoke a function to populate this input field using its class. Below is the relevant HTML snippet and ...

javascripthtml

Controlling the scroll behavior of div elements with the CSS overflow-y property

This is the current setup I have: <div> <div> </div> <div> </div> <div> </div> </div> The inner divs are styled with this CSS: float: left; margin-right: 40px; width: 100px; While ...

htmlcssoverflow

What is the best way to add spacing between the fields within a Bootstrap 4 form row that spans across 2 rows when viewed on small displays?

Trying to create a bootstrap 4 form with fields in one row for larger screens and two rows for smaller screens. The attempt was made using the following code: <div class="form-group row"> <label class="col-sm-2 col-form-label">File:</lab ...

htmlcsstwitter-bootstrapcss-selectorsbootstrap-4

"Position centrally on the inside, using flexbox to fill the entire

Seeking assistance with aligning the text in the center of the flexboxes so that the h4 and p elements in the large box are centered within their respective boxes, as well as ensuring the text in the two smaller boxes is also centered. Any help would be gr ...

htmlcssflexboxfullscreencenter