Is it possible to scroll within a DIV that is not set to position:absolute?

My website has 5 horizontal divs that are all set to float left and have a percentage width. I want the left div to contain text and have a scrollbar. However, I am facing an issue where the scrollbar only appears when I give the div a position of absolute. When I do this, the other 4 divs get misaligned. How can I resolve this problem?

You can view the jsfiddle example here: http://jsfiddle.net/QN8RS/ Simply add position:absolute; to the CSS of the following div. This will make the scrollbar appear but also cause alignment issues with the other divs.

#left{
    float:left;
    background-color:#C00;
    width:15%;
    height:100%;
    overflow:auto;
    top: 0px; 
    bottom: 0px;
}
csshtmlscrollcss-float

Answer №1

The height of the <body> element has not been specified, so it is calculated as auto.

You have set the height of the .main element to 100%. Since this is a percentage and the height of its parent (the body) is calculated as auto, the computed height is also auto.

The height of the #left element has also been defined as 100%. Similarly, because the height of its parent (.main) is calculated as auto, the resulting height is also auto.

When the height is auto, it adjusts dynamically to accommodate all content within.

By setting overflow: auto, scrollbars will only appear if the content exceeds the dimensions of the element (which is not the case here).

To ensure that the computed height of #left is the same as the viewport height and not auto, consider applying height: 100% to the html and body elements.

Answer №2

It appears that the solution you seek is : overflow-y: scroll

Small Experiment

Answer №3

The issue here is that you've set height:100% for your div with the class .main. But 100% of what exactly? Which parent element is being referenced?

If you set the height of both the html and body elements to 100%, it should resolve the problem.

html, body { height: 100%; }

Please review the updated fiddle here: http://jsfiddle.net/QN8RS/2/

Answer №4

If you want to avoid using floats, consider utilizing position: absolute; along with left: number%; (you'll need to determine the percentage value for each element).

Take a look at this Fiddle: http://jsfiddle.net/QN8RS/3/

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 best way to ensure that the text input spans the entire width of the div in Bootstrap 4?

I am currently exploring the implementation of Bootstrap 4. I have a basic div that includes a text box, and my goal is for the text box to occupy the full width of the div. Initially, I assumed that in Bootstrap, input elements automatically inherit the f ...

csshtmlinputbootstrap-4

Emails in Dark Mode: Enhancing the User Experience

I am currently working on a project involving emails and I need to implement a dark mode for the email body. The email body is comprised of HTML with specific color styles defined. My objective is to change the text and background colors to create a dark m ...

htmlcssfrontenddarkmode

Validation of form fields appears to be disregarded

I seem to have overlooked a simple issue with this form field validation method. It has worked effectively for me in the past, but now, despite checking all file paths, every time I submit the form, it sends an email regardless of the field content. You c ...

javascripthtmlforms

What is the process for establishing the admin's username and password using a database table?

I recently developed a website that includes a login form for the administrator. I have set up an admin table in my database and filled it with values. However, when I attempt to log in, the password is not being recognized. Here is a snapshot of my curren ...

phphtmlmysqlsqllaravel

Showcasing the information stored within my li element, I am able to access and view the data through my console

I want to showcase the data in the browser Upon hitting the api call, I retrieve the data in my console. The challenge lies in displaying the data within my li tag. Below are snippets of my relevant code and the entire code can be found in the gist links p ...

javascripthtmlangularangular2-templateangular6

Verifying StartDate and EndDate using AngularJS and Bootstrap Datepicker

My HTML Coding <form name="myForm"> <div class="row"> <div class="col-md-2"> <input data-ng-model="Data.StartDate" type="text" id="startDate" name="startDate" class="form-control" data-da ...

javascriptangularjshtmlangular-ui-bootstrapbootstrap-datepicker

Tips for showcasing information from an external model on your webpage without the need to reload the entire page

My goal is to dynamically show a User's name above a form field where they input their Employee # without requiring a page refresh. For instance, when they enter their # and move to the next field, I want their name to appear above based on the datab ...

pythonjqueryhtmldjangoajax

`Generating an ever-changing masonry layout on a website using live data`

I'm currently working on a new web project and I want to incorporate a masonry view for the images on the homepage. The plan is to host this project on Azure, using blob storage for all the images. My idea is to organize the images for the masonry vi ...

javascripthtmlcss

Is it possible to merge two classes in CSS together?

Struggling to merge two CSS classes, I attempted with the following code: .container{ .ningbar } Hoping to unite the elements of both the ningbar and container layers. Any advice would be greatly appreciated. Thank you, Phineas. ...

cssclass

Is it possible to detect inline elements that have been wrapped?

I am facing a challenge with displaying an indefinite amount of in-line elements. Depending on the width of the browser, some elements may shift to a new line. I am curious to know if it is possible to identify and isolate these rows of elements, or if the ...

javascriptjqueryhtmldom

Locate the present position of the slider element

I am currently in the process of creating a website that features pages displayed in a slider format. Each page has its own unique ID, but all share a common class called 'section'. However, I am encountering difficulty in identifying the ID of t ...

javascriptjqueryhtmlslider

Responsive layout optimization using Bootstrap

I'm struggling with bootstrap responsiveness. I have four items aligned to the right of an image (a title section and 3 items). Currently, it works fine on large screens but on small screens, all the items and the title go down. However, I want to kee ...

htmlcssbootstrap-4responsive-design

"Enhancing user interaction with Vue.js through the stunning ripple effect on

Is there a way to customize the ripple effect from this source so that it doesn't always have to be a DIV? Here's an example: Currently, when I implement it like this: <ripple class="btn">send</ripple> It works as expected, but as ...

javascripthtmlvue.js

Placing an icon directly beside two paragraphs, ensuring it is vertically centered and positioned to the right of the text

I am looking to add an icon next to two paragraphs that will be positioned exactly in the center (vertically) on the left side of the paragraphs. Here is the desired outcome: https://i.sstatic.net/RmjOR.png Currently, here is what I have: https://i.ssta ...

htmlcssbootstrap-4iconsrow

Replacing HTML elements with PHP's str_replace function

Looking for help with code: $newphrase = str_replace('href="/Css/IE6.css"', 'href="http://www.company.com/pgrddedirect/iefix.css"', 'href="/Css/IE6.css"'); I am trying to use PHP's DOM to search an HTML file and modify ...

phphtml

The capacity to rotate div containers, adjust their dimensions, and engage with the content within

I'm attempting to design small clickable div boxes that flip 180° when clicked to reveal interactive content. This includes the ability to click links, copy text, or manipulate the content with additional buttons. Although I've successfully ach ...

javascripthtmlcss

Creating an Unordered List in GWT that Includes List Items

I've hit a roadblock while trying to create a css-driven menu in GWT. The menu should be rendered exactly like this: <div class="topbar"> <div class="container fixed"> <h3> <a href="" class="logo">test& ...

htmlcssgwttwitter-bootstrap

What's the best way to fix a div to the bottom left corner of the screen?

I have explored various solutions regarding this issue, but none of them seem to meet my specific requirements. What I am trying to achieve is the correct positioning of a div as depicted in the green area in the image. https://i.sstatic.net/O9OMi.png Th ...

htmlcssangularbootstrap-4bootstrap-5

Is there a way to send decimal values from a view to a controller using Vue.js?

I am encountering an issue when trying to pass decimal values from the view to the controller using Vue.js. Only decimal values seem to be arriving as NULL, while integer or string values work fine. Below is the code snippet: salvarProdutos: function ( ...

htmlasp.net-mvcvue.js

Navigating horizontally with buttons in VueJS

I am searching for a way to implement horizontal scrolling using buttons in VueJS. The idea is to have a container with multiple divs arranged horizontally, and I wish to navigate through them using the buttons. If you want to see a similar solution using ...

javascripthtmlcssvue.jsscroll