Set the height of the main div container to a fixed size

I am facing an issue with my div container (mapInfo-Container) which contains multiple div blocks. I want the container to have a fixed height of 250px, and be scrollable for any content exceeding this height.

Here is the code snippet: http://jsfiddle.net/dtjmsy/mxt32057/11/

.mapInfo-Container {
     height: 250px;
     //overflow-y: scroll;
}

I have tried using overflow-y: scroll; but it does not seem to work as expected. I believe I might be missing something. Can you please assist me with this?

Thank you in advance.

css

Answer №1

The reason is that the .mapInfo-Container holds elements floated to one side. To fix this issue, add the clearfix property:

<div class="mapInfo-Container clearfix">

Additionally, change overflow-y: scroll; to overflow-y: auto.

You can view an example in this demo.

Answer №2

Yes, it is functioning correctly. The issue in your fiddle lies with the css for .mapInfo-Block. Simply remove the width and float properties to resolve it:

.mapInfo-Block {
  background-color: yellow;
  height: 100px;
  border: solid px;
}

Additionally, you can eliminate the div #map-info and uncomment your other css rules in .mapInfo-Container:

.mapInfo-Container {
  background-color: blue;
  width: 22%;
  float: left;
  height: 250px;
  overflow-y: scroll;
}

http://jsfiddle.net/mxt32057/19/

Answer №3

include overflow-y: scroll in the mapInfo-Container class

also, make sure to add an additional class to the divs pin_0, pin_1, and pin_2 and then apply width: auto to them.

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

Scrollbar appearing in Safari (Windows) despite increasing the height

While working on a website for a client, I encountered an issue where a section within the footer is causing scrollbars to appear. Despite adjusting the height of the wrapper and setting overflow to hidden, the scrollbars persist. Is there anyone who can ...

htmlcss

Tips for adjusting text placement within table cells without altering the original dimensions of the td element?

In my simple HTML table, I am trying to align the text in all columns to the right side in the second row. After exploring this question and this one, which suggest setting box-sizing: border-box;, I found that the desired result was not achieved. The widt ...

htmlcsshtml-table

The header section on a website not behaving as expected in the Chrome browser

For my website, I want it to look like this in Internet Explorer: https://i.stack.imgur.com/hSkVM.png ^^ This is the IE view However, in Chrome, it displays like this: https://i.stack.imgur.com/noQw8.png The issue is with the Top bar on Chrome showing co ...

htmlcssinternet-explorergoogle-chrome

Guide to modifying WordPress version 4.5 with HTML pages

I am encountering issues with my Wordpress website. I have installed it on Softcald in cPanel and now I want to edit my Wordpress using HTML. However, I am having trouble finding the editing option. My Wordpress version is 4.5 and I have searched online ...

htmlcsswordpresscpanel

CSS3 stackable-design

How can I avoid CSS3 elements from overlapping? They are all <span> precious </span> <span> and </span> <span> cute </span> And here is my current CSS code span { margin : 20px; min-width: 150px; border-r ...

css

Position the final list item in the column on the left side

Currently, I am facing an issue with creating spacing between li elements in a column layout. The problem arises when the last li in the column does not align to the far left edge of the column width. Take a look at the screenshot below for reference: Bel ...

csshtmlwordpress-theminghtml-lists

Challenge in creating a responsive layout using Bootstrap framework

I'm working with Bootstrap, but I'm struggling to achieve the desired layout. My goal is to have the design adapt like this on different screen sizes: ---------------------- Headline | | | image | ----------| | B ...

csstwitter-bootstrap

What's the best way to avoid global application of stylesheets imported for svelte carbon components?

My dilemma lies in wanting to utilize the DatePicker feature from carbon-components-svelte. Unfortunately, when I do so, the global application of styles from carbon-components ends up causing some conflicts with my own custom styles. As per the documenta ...

csssveltesveltekitcarbon-componentscarbon-components-svelte

How can I conceal text using css in specific situations without risking a penalty from search engines?

Currently, I'm developing an illustration tool that needs to be visually appealing to users, while also being accessible to screen readers and search engines. Below is the HTML code I'm working with: <span class="card">A new idea is presen ...

htmlcss

Problem with CSS dotted borders appearing as dashed in Chrome when applied to adjacent columns in a table

After testing the code on both Chrome and Firefox browsers, I noticed that they display the border differently. In Chrome, there is a dash in between adjacent cells while in Firefox, there are no dashes rendering. Can anyone suggest a solution to fix thi ...

htmlcssfirefoxgoogle-chromeborder

Tips for avoiding the transmission of className and style attributes to React components

Hey there! I'm working on a custom button component that needs to accept all ButtonHTMLAttributes except for className and style to avoid any conflicts with styling. I'm using TypeScript with React, but I've run into some issues trying to ac ...

htmlcssreactjstypescript

Can anyone assist with troubleshooting the font size issue for a JavaScript tooltip on Joomla 1.5 with CK Forms?

My Joomla 1.5 site has CK Forms installed and is functioning properly, except for one issue: the tooltip on the captcha is not displaying correctly. It appears in a tiny 1px font size. Even though I have tried debugging using Firebug and confirmed that the ...

javascriptcssfirebugjoomla1.5

Determining the background image size of a div when the window is resized

I'm facing a problem that I can't seem to solve. I have a div with a background image. <div class="a"></div> I want to make a specific point of this background image clickable. I know I can achieve this by adding a div with a z-inde ...

javascriptjqueryhtmlcssresponsive

Tips for Omitting Children <li> from CSS Design

I'm currently working in SharePoint Designer and facing an issue with custom bullets in my list. My goal is to apply a custom bullet on the parent li elements (Desc 1 and Desc 2), but unfortunately, it's also being applied to all the children li ...

htmlcss

Looking for assistance with fundamental HTML concepts

I'm struggling to make the navigation bar stretch to full height. As a beginner in HTML and CSS, I have limited knowledge about it. I have tried numerous solutions found on the internet but nothing seems to work. The styling and HTML code are provide ...

htmlcss

How do I resolve the issue of unable to align the element correctly?

I am struggling to create a hamburger menu icon and align it using flexbox. Unfortunately, the icon is not aligning properly as it is going beyond the menu and the browser screen with an odd top indent. Below is the code I have written: * { margin: 0 ...

htmlcssflexboxposition

"Encountered an error while trying to access properties that

Struggling to create a practice menu with the functionality of making elements appear and disappear on click? If you are encountering issues with a class named "option" not working as expected, you are not alone. Clicking on nested objects like images or i ...

javascripthtmlcss

What causes child margins to extend beyond the boundaries of div elements?

Can anyone shed some light on the advantages of CSS behavior that allows a child element's top and bottom margins to extend beyond the boundaries of its block-parent? Check out this fiddle for a straightforward example. The pink div is influenced by ...

css

Tips for ensuring the Search button always remains alongside the input bar during resizing with percentages

I've been trying to figure out why the search button is still showing at the bottom left and creating an "l" shape even though I'm using style="overflow: hidden; padding-right: .5em;". Does anyone have any ideas as to what might be causing this i ...

css

Combining nested lists with the tag-it plugin from jQuery, you can create a list inside a list all

Currently, I am utilizing the Tag-it jQuery plugin found at Tag-it, which functions within a ul element. Within my horizontal list (a ul with multiple li elements), I aim to add another li element containing the Tag-it ul list alongside the main horizonta ...

jquerycsstag-it