PDA

View Full Version : Small problem with div heights



kimikai
07-05-2013, 01:55 PM
so I made a parental div with 2 div's inside
and everything seems to work pretty fine, cuz the parental div expands when the divs inside expand aswell
the only problem I'm having is that one div inside the parent is a menu div so that doesnt need to be too long, and one div that contains text and that should become (very) long.
As soon as i start expanding the content div the parental div and the menu div both expand. The only problem I'm having is that contrary to the text div after expanding the background in the menu div doesnt repeat-y itself...
I have no idea what I'm doing wrong...

this is the HTML:


<div id="content">
<div id="menubar">
<p>Menu</p>
</div>
<!--End Menu-->
<div id="text">
<p>Here comes text</p>
</div>
<!--End Text-->
<div id="clear" style="clear: both;"></div>
</div>
<!--End Content-->


and this is the corresponding CSS:


/* Content */
#content {
width: 760px;
margin: 0 auto;
background: none;
position:relative;
min-height:400px;
overflow:hidden;
}

* html #content {
height:400px;
overflow:visible;
}

/* Menu */
#menubar {
float: left;
width: 200px;
min-height: inherit;
background:url(../images/menubg.png) repeat-y;
}

/* Text */
#text {
float: right;
width: 560px;
min-height: inherit;
background:url(../images/textbg.png) repeat-y;
}


I'm guessing theres something wrong in the CSS =x but I'm not exactly sure why

Anyways yes I posted it in the HTML section but that's more because I can't quite grasp what I did wrong...

Beverleyh
07-05-2013, 02:38 PM
Off the top if my head, the smaller menu div height will not be expanding because its content is less - just set the background as a solid colour and you'll see that it never grows unless you directly increase its own content. Its a pretty common issue around the web, with people seeking "equal height" scripts and such to overcome it. Thats not necessary in this case as I believe you can get around it with a bit of trickery if you repeat the background image on the parent container instead of the menu div. As you know, the parent height will expand at the same rate as the text div, so you can be sure that the repeating background image on the parent and the repeating text background image will be of equal heights.

kimikai
07-05-2013, 05:03 PM
Oh wow....here ive been thinking of all diff kinds of weird things to get it working and the simplest of the simplest solution was forgotten in the process haha
thanks...i think that might actually work :)