Solved

How do I make an auto height div with a set minimum height?

Posted on 2008-10-22
2
346 Views
Last Modified: 2013-11-19
Hi there,

I have a div as a staff profile box. It has a 100x130px portrait image floated on the left and text on the right alongside the image.

My div auto resizes as I type more text but if I delete text, it shrinks below the size of the floated image.

How can I get the div to be height:auto but with min-height; 130px ?

Or alternatively, how can I make it recognize the floated image as an element it cannot reduce past?

Sorry if this is a stupid question or dodgy syntax, I'm just starting out with CSS.

Thanks

Will




0
Comment
Question by:willsavage
2 Comments
 
LVL 1

Accepted Solution

by:
JimDestruct earned 500 total points
ID: 22775056
to give your div a minimum height I use the following:

#MyDivID {
       min-height: 130px;
       height: auto !important;
       height: 130px;
}

0
 

Author Closing Comment

by:willsavage
ID: 31508685
Thanks a lot for answering my first ever question on EE!

Regards

Will
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

Have you tried to learn about Unicode, UTF-8, and multibyte text encoding and all the articles are just too "academic" or too technical? This article aims to make the whole topic easy for just about anyone to understand.
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
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…

920 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

Need Help in Real-Time?

Connect with top rated Experts

17 Experts available now in Live!

Get 1:1 Help Now