Results 1 to 3 of 3

Thread: Small problem with div heights

  1. #1
    Join Date
    Apr 2012
    Thanked 0 Times in 0 Posts

    Default Small problem with div heights

    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:
    HTML Code:
    <div id="content">
        	<div id="menubar">
            <!--End Menu-->
        	<div id="text">
    			<p>Here comes text</p>
            <!--End Text-->
        	<div id="clear" style="clear: both;"></div>
        <!--End Content-->
    and this is the corresponding CSS:
    /* Content */
    #content {
    	width: 760px;
    	margin: 0 auto;
    	background: none;
    * html #content {
    /* 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...

  2. #2
    Join Date
    Jul 2008
    Derbyshire, UK
    Thanked 599 Times in 575 Posts
    Blog Entries


    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.
    Focus on Function Web Design
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps

  3. #3
    Join Date
    Apr 2012
    Thanked 0 Times in 0 Posts


    Oh 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

Similar Threads

  1. Resolved Small problem
    By Bernie Kruger in forum Dynamic Drive scripts help
    Replies: 3
    Last Post: 11-18-2010, 01:12 PM
  2. Resolved Small SQL problem
    By romaer in forum MySQL and other databases
    Replies: 1
    Last Post: 06-14-2009, 01:06 PM
  3. Resolved having small problem with background.
    By robin9000 in forum CSS
    Replies: 2
    Last Post: 03-05-2009, 01:59 PM
  4. Replies: 1
    Last Post: 05-14-2007, 09:54 PM
  5. Small little redirect problem..
    By hhp5 in forum JavaScript
    Replies: 1
    Last Post: 06-07-2006, 06:03 PM


Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts