Member Avatar for jonow

Hi i have made a generic type template. I have a main content div with a sidebar inside of a container div. which you can see.

To give you an idea the sidebar is about 200px the main content div is about 700px and the container div is about 1000px.

My Problem is: when one of the elements the sidebar grows in height in pushes the div that both the sidebar and the content div is in so you just see the background below the main content div.

What i want: i need to make it so the main div minimum height will be that of the container div so you don't see the background below it.

a min-height of a certain amount of pixels would not do it i need it dynamic.

Does anybody have a solution?

  • 3 Contributors
  • 6 Replies
  • 266 Views
  • 20 Hours Discussion Span
  • Latest Post Latest Post by jonow
Member Avatar for JPByD

I think I understand the issue: if your sidebar div gets too small than the content div will slide underneath the sidebar div, rather than staying to the right of the sidebar div. Is this correct? if so, my suggestion is to play with the margin-bottom style of the sidebar div. By making margin-bottom: 100%; or margin-bottom: auto; this may fix the issue... I am not at my regular computer to test this suggestion, but, it is worth looking at.

Member Avatar for jonow

That is not exactly what i mean. I have attached pictures that i made that describe it better. Look at them in numerical order by there name. (1, 2, 3, 4).

(sorry about the horrid colors, i don't know about you but it hurts my eyes)

1.jpg 960.07 KB 2.jpg 1019.68 KB 3.jpg 797.34 KB 4.jpg 912.4 KB
Member Avatar for MidiMagic

You want a lot, don't you. You night have to do this in JavaScript to get both view 3 and view 4.

Divs would give you 2 and 4, while a table will give you 3.

You could try putting a div inside a table cell for just the right column, but just a table cell for the left column. That would give you 3 and 4, but would require some other styles to make it work in all browsers.

Member Avatar for jonow

Thank you. I new tables could fix most of the problems but i don't want to use them. But i have found an interesting solution using images, i will post it up.

I set the background image to be 1px high and 1000px wide It will be a sliver of what the main div but with the background color were the sidebar is. You set that as the background image of the container div so when the sidebar expands it looks like the content div expands and when the content div expands to be larger the sidebar does not change. I hope this makes sense. This solution only works with a container div and with a 1 color background unless the background is uniformly horizontal.

Member Avatar for MidiMagic

Try changing your browser window size in restored down condition, so you can see what happens on other screen resolutions.

Member Avatar for jonow

it works at 800 by 600 as well as 1440 by 900.
I have also tested it on all major browsers including IE 6 and it works

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.