By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
437,986 Members | 1,487 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 437,986 IT Pros & Developers. It's quick & easy.

display problem with height on a div!

P: 21
Hey Everyone

I wonder if someone can help me with this problem that i am having! Here is the code that i have written,

<div id="outline">
<div id="left"></div>
<div id="right"></div>
</div>

so there is an outer div that has a 1px solid border all of the way around, and then i have two div's inside that that i have floated left so they both sit side by side. Now i want it so that when there is more info added to the left or right div, the out div with the border will flow with it, but at the moment when i added more info to the left div, the outer div doesn't flow with it, just crops all the info, unless i give the outer div a height, which i don't want to do, because i have been told that if i don't add a height to it, i can then use the same style on each page!

If anyone has any solutions, please post them, because it is driving me mad at the moment!!! lol

Thanks for any help
Feb 27 '07 #1
Share this Question
Share on Google+
8 Replies


drhowarddrfine
Expert 5K+
P: 7,435
This is normal and correct behavior. Divs are NOT to expand to contain floated elements because floats are removed from the normal flow. To accomplish what you want, try adding overflow:auto to the outer div.
Feb 27 '07 #2

P: 21
This is normal and correct behavior. Divs are NOT to expand to contain floated elements because floats are removed from the normal flow. To accomplish what you want, try adding overflow:auto to the outer div.
Ok that works like a charm. Thank you for the help drhowarddrfine, at least i know that that was normal behavior as well now!!

Thanks again
Feb 27 '07 #3

P: 21
Ok i have another question. I would like the div on the right to be a side bar, that is always flush with the bottom of the outer div. What would be the best way of doing this? At first i thought i could achieve the result i wanted, but putting the height at 100%, but it doesn't seem to do anything?? So what would be the best way to get the result i am looking for?

Any help would be great again.
Thanks
Feb 27 '07 #4

drhowarddrfine
Expert 5K+
P: 7,435
What you would do is set the containing div as position:relative so the internal divs will use it as a reference and parent. Then set the right div as height:100%.
Feb 27 '07 #5

P: 21
What you would do is set the containing div as position:relative so the internal divs will use it as a reference and parent. Then set the right div as height:100%.
Hey drhowarddrfine, that is how i had it set up, but the 100% height doesn't do anything, just stays the same height. Have you got any other idea's??

Thanks for the reply :)
Feb 27 '07 #6

drhowarddrfine
Expert 5K+
P: 7,435
I assume you set the outer div to position:relative and there is content inside the divs? Can you post your code?
Feb 27 '07 #7

P: 21
I assume you set the outer div to position:relative and there is content inside the divs? Can you post your code?
Yes you are right, i don't have any content inside the divs, apart from some margins!
Feb 27 '07 #8

drhowarddrfine
Expert 5K+
P: 7,435
You need to either add content for them to expand or set a height/width to the containing div to see the effect.
Feb 27 '07 #9

Post your reply

Sign in to post your reply or Sign up for a free account.