just need a little help formating this correctly. In essence, i have a wrapper div that has 2 divs (id="left" , id="right") inside. The left right divs are aliged horizonataly, acting as columns (both with a set width to achieve the effect). the issue i am having is if the left or right div have large amounts of text, the wrapper div will not extend with the height of these inner divs. I am expecting to see the wrapper extend vertiacally with it's inner divs...why is this not the case, and what should i be looking for?
HTML Code:
<html><head><title></title></head><body><div id="content"><div id="content_wrapper"><div id="left"><div id="text_box"><div id="title_bar"><img src="imgs/titlebar/title_wine.gif" ></div><p>large amounts of text...</p><p>more amounts of text...</p><p>last amounts of long tesxt text...</p><div id="wine_form"></div></div></div><div id="right"><div id="img_holder"><img src="imgs/main/main_wine.jpg"></div></div></div></div></body></html>
add overflow:hidden; to either one, the other or both, of your 'external wrappers'. Sounds as if there is a 'floated' inner-child (either the left, or the content div).
An easier way around this, is to have a 'container' and place the 'main' in it, give it a "margin-left" equal to the width of the desired 'left'. Populate the 'content' normally, and populat the 'container' with the 'left' content. This is (as I understand the concept), called 'faux columns' because the 'column' is virtual... it is created by the margin-left's 'gap', to be filled with the 'left' content..
wow, works, but now messes up my rollover effect on my nav (not even part of that parent div)...dang....can i ask, why exactly that works? Perhaps that will enlighten me on why it effects the navigation div, three divs above
wow, works, but now messes up my rollover effect on my nav (not even part of that parent div)...dang....can i ask, why exactly that works? Perhaps that will enlighten me on why it effects the navigation div, three divs above
"overflow:hidden;" causes the parent element to expand to encompass floated element children. But apparently this 'cure' has given rise to another issue(?)
I'll snag your code and check it over..
back:
-I copied your code and cannot make any sence of what you are trying to accomplish. Can you sketch a diagram or describe it. What I was seeing, is too confusing. Way too many 'nested DIVs' and, it isn't necessary really to wrap an image in a DIV it that is all it is there for. You can just place the image.
And that relative-positioned DIV with the top:-295px is no good. "relative" means exactly that, -the space it occupies is relative, and positioning it 'negatively' only moves the visual aspect, but preserves the spacial location. -The DIV still occupies that relative dimension. Later if you were to add more content, you'd find a mysterious inability to populate that 'white' area due to it's relativity...
I know this is an old thread, but if anyone else comes looking for the answer all you need to do is create a div at the bottom of your container div with the parameter
clear: both;
Then your container's background will extend to the bottom.
Reply With Quote
Originally Posted by mlecho
Bookmarks