css div limit height

Posted on 2011-10-20
Medium Priority
Last Modified: 2012-05-12
div#actionbar{position:absolute;top:50px;left:30px;width:1000px;max-height:40px;overflow:auto;border-width:0px;border-style: solid;border-color:#f0fff0 #bbccbb #bbccbb #f0fff0; }

This is a div that depending on how the page loads will be between about 40 and 200 px height.
The above css does not limit to 40

How do I keep the div to 40 px regardless of content?
Question by:KeithMcElroy
  • 3
  • 2
LVL 10

Expert Comment

ID: 37002373
LVL 30

Expert Comment

ID: 37002375
You can use the min-height:40px; declaration in your CSS.
LVL 25

Accepted Solution

Kyle Hamilton earned 2000 total points
ID: 37002952
>> How do I keep the div to 40 px regardless of content?

overflow-y: auto;


overflow-y: scroll;

You don't need min or max if you just want it to be fixed at 40px regardless of content.

min and max don't work in all browsers anyway.
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

LVL 30

Expert Comment

ID: 37002968
@kozaiwaniec: min-height works in browsers all the way back to IE 7. IE 6 of course being the black sheep
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 37003017
@LZ1: yes, but why use min-height, if you just want height? My understanding is he wants the maximum height to be 40, not the minimum.

not trying to pose a challenge, just curious of your thinking...

LVL 30

Expert Comment

ID: 37003077
The original poster wrote:
This is a div that depending on how the page loads will be between 40px and 200px height.

I'm assuming that the user needs it to be 40px high regardless. Then the content will take care of the rest

Featured Post

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

When writing CSS, there are a few simple rules that will make your life easier.    1. Using ‘* {box-sizing:border-box;}’. Using this will wrap all your elements in a nice little compact box-model that will give you the width you want, like so... …
The first step to building an amazing About page is to figure out what you want the page to say about your company. You then must grab the attention of the reader, boast a bit, tell a story and let others brag about you. With a little bit of thought…
In this tutorial viewers will learn how to define a gradient in CSS. Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Gradient. Define the background as "linear-gradient(to right, #ee3668, black)". Ensure you …
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…
Suggested Courses
Course of the Month13 days, 8 hours left to enroll

750 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question