ansaurus

Question

How do I change the height of a container div to fit all dynamic content?

Answer 1

A:

Could you not set the minimum height of the div so that it stops below the google map, but no max height?

mydiv { min-height:400px; }

Mike Broughton 2010-02-23 09:35:08

Answer 2

A:

If you want to ensure that text won't fall out of the block:

Give your div with the class trucklogo a position: relative.

When trucklogo is positioned relative you will see that the text won't fall out of the block anymore.

Then:

Check for other elements that are not showing correctly.
Be consistent on using elements, and classes inside them.
If using spans inside divs give them a class or style them...
Position your trucklogo div.

Younes 2010-02-23 09:38:28

this is exactly what i needed. thanks!

2010-02-23 09:55:45

Great ;). Good luck with the rest of your website.

Younes 2010-02-23 12:45:12

I have 1 more question that arose after my last post and i've been trying to figure out with trial+error today. the container will expand as needed for the text, but if the javascript map widget div extends beyond where the text ends, then it overflows. how can i prevent this from happening, given that the height of the div in the script can vary and it still doesnt work if i set the height of the div holding the widget in the js?

2010-02-24 10:10:15

Put overflow: hidden on <div class="tm-w"> this will hide all overflowing elements behind the end of your containerdiv that holds this element. Just make sure this googlemaps img fits your design ;). Don't scale it too big. And if it gets too big you could give your div the overflow: hidden; !importantGood luck!

Younes 2010-02-24 10:37:19

Younes- That didn't seem to work, im so sorry i didnt provide an example of the problem taking place! heres one:http://la.truxmap.com/marker?id=frysmith !important both prevent the contents from expanding beyond the set width, but it doesnt keep the elements all within the container with a white background. Thanks so much for the quick and thoughtful replies; youve been incredibly helpful!

2010-02-24 11:07:46

The overflow hidden propperty will make sure that content won't be showed outside your element indeed. I think you should not use the spans etc. Try to use div's as much as possible in your design. You can set width: auto on your div class="container", this will make it expand when the content asks for it.

Younes 2010-02-24 11:19:23

Alright, I changed up the design so that im using divs instead of spans in the javascript, and i messed around with the css a bit, but the container div isnt expanding to fit the height of the javascript widget. the width isnt a problem because the little overflow that there is horizontally, is kept in the container. vertically, the container div is stubborn. how would the browser determine what the size of the div ought to be? would it look at what height is given inside the css of the widget or can it figure out the height by merely scanning its elements? Thanks!

2010-02-24 11:58:01

Answer 3

A:

Hi user276843,

So I played around with a copy of your code and did a really quick experiment:

I put in a strict doctype at the very top of the page:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;

On the DIV that holds your main copy I changed the inline style from:

position: relative; top: 65px; height: 125%;

to:

position: relative; top: 65px; margin-bottom: 100px;

That seems to work just fine. Maybe try this?

Amy 2010-02-23 09:47:52

ansaurus

tags:

views:

answers:

How do I change the height of a container div to fit all dynamic content?

related questions