SitePoint Sponsor

User Tag List

Results 1 to 5 of 5

Hybrid View

  1. #1
    SitePoint Zealot xiaawan's Avatar
    Join Date
    Sep 2007
    Location
    Islamabad, Pakistan
    Posts
    101
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Controlling div height depending on others

    Hi All can anyone help me with this.
    I have an outer div that contains three more divs i.e. left, middle and right. The height of left and right are fixed, but the height of the middle div is dynamic depending on the data in it, usually comes from database, so the height of middle div is not fixed. What I want here is to force the borders of left and right divs to be the same as middle. But I am unable to do this. Currently I am using Java script to get the height of middle div and then force others to make them equal which I am not sure is the right way. Can anyone help me with this, using CSS how to make all div's height the same depending on the middle div's height? I know the CSS is loaded first then the contents are loaded, but may be someone has a better idea. Thanks in advance. Here is my code. It is only an example.

    Code HTML4Strict:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Dynamic Height</title>
    <style type="text/css">
    body
    {
    	font-family:Verdana, Arial, Helvetica, sans-serif;
    	font-size:10px;
    	text-align:center;
    }
    #outer
    {
    	width:600px;
    	height:auto;
    	border:1px solid #000000;
    	margin:auto;
    	overflow:hidden;
    }
    #left
    {
    	float:left;
    	border:1px solid #0099FF;
    	width:150px;
    	height:300px;
    }
    #middle
    {
    	float:left;
    	border:1px solid #FF0000;
    	width:300px;
    	height:300px;
    }
    #right
    {
    	float:left;
    	border:1px solid #0099FF;
    	width:144px;
    	height:300px;
    }
    </style>
    </head>
     
    <body>
    <div id="outer">
    	<div id="left">Left Panel</div>
    	<div id="middle">Middle Panel</div>
    	<div id="right">Right Panel</div>
    </div>
    </body>
    </html>
    Zia Awan

  2. #2
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    For something like this I'd look to use Faux Columns if possible...

    http://www.alistapart.com/articles/fauxcolumns/

    It looks as though you're trying to do a design that was originally reliant on tables though whereas CSS is so much more flexible once you get out of that mindset.

  3. #3
    SitePoint Zealot xiaawan's Avatar
    Join Date
    Sep 2007
    Location
    Islamabad, Pakistan
    Posts
    101
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Dear thank you for your reply but I could not get much help with the link that you added in the post. It looks like that an image has been repeated in the background of the body to have the same height. Without repeating the image in the background is it possible for any div to force its height comparing with other div. One other thing is also possible that I could not understand the article so bear with me. Any other idea. Thanks in advance.
    Zia Awan

  4. #4
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Unfortunately, it's not really possible. Paul has some examples at http://www.pmob.co.uk but your best bet would be to use an images and get them to repeat to give the impression that the columns are filling 100&#37; height.

    Maybe something like this...

    http://pmob.co.uk/temp/3colfixedtest_4.htm

    As I mentioned before though, you're trying to do something that tables used to be used for so should probably try and get out of that mindset as you can achieve so much more with CSS.

    Sorry if that's not much help.

  5. #5
    SitePoint Zealot xiaawan's Avatar
    Join Date
    Sep 2007
    Location
    Islamabad, Pakistan
    Posts
    101
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Dear thank you for your reply again. Now I see many examples. I will try my best to get help from these. Again thank you very much for your reply. see you in any other post. God Bless You.
    Zia Awan


Bookmarks

Posting Permissions

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