Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    New to the CF scene
    Join Date
    Mar 2012
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Height 100% on a div doesnt work

    Hello everyone

    I am just starting to learn HTML and i am having trouble doing a small thing and i am sure you guys can help me out

    I have a <div class="middleColumn">

    which is inside <div class="content_table">
    and both of them are wrapped up inside the <div class="wrapper">

    What i been trying to do for the past 2 hours , is to expand the height of my middleColumn to be 100% (Basically as much as the height of my content_table)

    In my CSS i have this code

    .middleColumn {
    width: 290px;
    height: 100%;
    border-left: solid 1px #464545;
    margin: 50px 0 0 0;
    padding: 0 0 30px 35px;
    float: left;
    }
    .content_table{

    height: 100%;
    width: 960px;
    overflow: auto;

    }
    .wrapper {

    width: 960px;
    margin: 0 auto;
    height: 100%;
    }

    The middle column doesnt expand to be the size of the content_table

    Any ideas on how to fix this??? I am switching from flash to HTML and this is killing me lol!

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,466
    Thanks
    23
    Thanked 634 Times in 633 Posts
    Get a two column layout that has equal heights was a problem with the div layout when it first came out. There are a number of solutions for this, but I am only going to give you one. This page http://matthewjamestaylor.com/blog/e...s-2-column.htm He also has 3, 4, and 5 column so you'll be ahead of the game.

    Just view the page markup copy and paste. Study it and if things aren't clear stop back and ask. We're always happy to help.

  • #3
    New to the CF scene
    Join Date
    Mar 2012
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Hi sunfighter

    Thanks for your answer...! This link is indeed very helpful .. i will try and see if i can incorporate it in my project and let you know how it goes!

    Million Thanks on your help!

  • #4
    New to the CF scene
    Join Date
    Mar 2012
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Hello.. i tried studying and applying the solution you gave me in my project but unfortunately with no luck... I think my problem might be a bit more complicated than i thought..

    I am attaching a sample for you to see..

    The grey vertical line on the left of my middleColumn class should expand to the height of the div and keep expanding if i add more text in that div.

    Many Thanks for any help!
    Attached Files Attached Files

  • #5
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,466
    Thanks
    23
    Thanked 634 Times in 633 Posts
    Very few people down load and open files on their computer that they don't know what it contains or who it's from. Please use the '#' above to contain your code so we can view it in safety.

  • Users who have thanked sunfighter for this post:

    creativedot (03-12-2012)

  • #6
    New to the CF scene
    Join Date
    Mar 2012
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Hi..thanks for your answer,...no problem here is the code

    HTML
    <!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=UTF-8" />
    <title>Prudens Group | Welcome</title>
    <link href='http://fonts.googleapis.com/css?family=Quattrocento+Sans:400,700' rel='stylesheet' type='text/css'>
    <link href="my_css.css" rel="stylesheet" type="text/css" />



    </head>





    <body>

    <div class="wrapper">





    <!--**********************************---- Content Starts ----*********************************-->

    <div class="content_table">


    <!--******---- LeftColumn Starts ----******-->

    <div class="leftColumn">
    <div id="quicklinks">
    <ul id="quicklist">
    <li><a href="company_formation_management.html">Button_1</a></li>
    <li><a href="trustee_services.html">Button_2</a></li>
    <li><a href="accounting.html">Button_3</a></li>
    <li><a href="tax_advisory.html">Button_4</a></li>
    <li><a href="banking_services.html">Button_5</a></li>
    <li><a href="banking_services.html">Button_6</a></li>
    </ul>
    </div>


    <div class="publications">

    <div id="feature">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
    <form name="form" id="form">
    <select name="jumpMenu" id="jumpMenu" onchange="MM_jumpMenu('parent',this,0)">
    <option>Select a publication</option>
    <option value="publications/download_1.pdf">PDF 1</option>
    <option value="publications/download_2.pdf">PDF 2</option>
    <option value="publications/download_3.pdf">PDF 3</option>
    </select>
    </form>
    </div>

    </div>
    </div>

    <!--******---- LeftColumn Ends ----******-->


    <!--******---- MiddleColumn Starts ----******-->


    <div class="middleColumn">
    <h1>Welcome
    </h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>


    </div>

    <!--******---- MiddleColumn Ends ----******-->




    <!--******---- RightColumn Starts ----******-->

    <div class="rightColumn">
    </h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p></div>


    </div>

    <!--******---- RightColumn Ends ----******-->


    <!--**********************************---- Content Ends ----*********************************-->



    </div>
    </body>
    </html>






    CSS
    @charset "UTF-8";
    /* CSS Document */

    /* HTML5 display-role reset for older browsers */
    article, aside, details, figcaption, figure,
    footer, header, hgroup, menu, nav, section {
    display: block;
    }


    html {
    min-height: 100%;
    height: 100%;
    }



    .wrapper {

    width: 960px;
    margin: 0 auto;
    min-height: 100%;
    height: 100%;
    }


    body,td,th {
    font-size: 12px;
    color: #666;
    text-align:left;
    }
    body {
    font-family: Arial;
    font-size: 12px;
    font-weight:normal;
    color: #929090;
    line-height: 142%;
    background-color: #132600;
    margin-left: 0px;
    margin-top: 20px;
    margin-right: 0px;
    margin-bottom: 0px;
    min-height: 100%;
    }



    /* MAIN CONTENT */

    .content_table{

    min-height: 100%;
    width: 960px;
    overflow: auto;

    }


    .leftColumn {
    margin-top: 50px;
    padding: 0px 10px 10px 0;
    width: 290px;
    float: left;
    height: 100%;

    }

    .middleColumn {
    width: 290px;
    min-height: 100%;
    border-left: solid 1px #464545;
    margin: 50px 0 0 0;
    padding: 0 0 30px 35px;
    float: left;
    }


    .rightColumn {
    height: 100%;
    margin: 86px 0 0 35px;
    width: 290px;
    float: left;
    }

    .publications{

    height: 100%;
    background-color: #2a2929;
    padding: 15px;

    }


    #feature {
    font-family: 'Quattrocento Sans', Arial, serif; font-weight: 400;
    color: #fefefd;
    display: block;
    height: auto;
    font-size: 12px;
    }



    /* OTHER */



    h1 {

    font-family: 'Quattrocento Sans', Arial, serif; font-weight: 400;
    margin-top: 2px;
    font-size: 29px;
    color: #fcfbfb;
    display:block;
    padding-bottom: 10px;

    }
    h2 {
    font-family: Arial, serif;
    font-size: 12px;
    color: #929090;
    }




    #form{
    border-top:dotted thin #999;
    padding-top:5px;
    margin:0px;
    }


  • #7
    New to the CF scene
    Join Date
    Mar 2012
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Hi...i am attaching a screen shot to visualize it better.. maybe that may help in giving you a clearer picture of what the problem is
    Attached Thumbnails Attached Thumbnails Height 100% on a div doesnt work-screen-shot-2012-03-13-10.29.45-am.jpg  

  • #8
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,466
    Thanks
    23
    Thanked 634 Times in 633 Posts
    creativedot, as I have said before the height of a div is either given in the css or it takes it's dimension from it's contents, the div expanding until the entire contents fills it.

    Your .middleColumn {border-left: solid 1px #464545;} is working the way it should. Your div height is shorter then the one to it's left. Answer: We can't use it. There is probably a number of things we could do, but I'm going to use the example on the page link I gave you above. About your code, min-height: 100%; height: 100%; only work if the browser knew what you what 100% of. After all 100% of nothing is nada and you never have told us what 100% is anywhere in your code.

    I used the 4-column layout on http://matthewjamestaylor.com. He uses the background color as a fake div. The longest div will determine the height of the overall container and the colors fill it giving the illusion that a short div is the same length as the long one. So there are two parts to this. First a container is made and the colors are laid down each a shorter width than the one before. Four colors marking the four informational divs. Wait we only have three informational divs and they're all the same color. So I made them all green except for the second one, I made that one 2px wide and colored it your border-left color. Then I added the information.

    You need to finish the styling.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-GB">
    <head>
    	<title>4 Column CSS Demo - Equal Height Columns with Cross-Browser CSS</title>
    	<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
    	<meta name="description" content="4 Column CSS Demo - Equal Height Columns with Cross-Browser CSS" />
    	<meta name="keywords" content="4 Column CSS Demo - Equal Height Columns with Cross-Browser CSS" />
    	<meta name="robots" content="index, follow" />
    	<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
    <style media="screen" type="text/css">
    body {
    	margin:0;
    	padding:0;
    }
    
    /* Start of Column CSS */
    #container4 {
    	clear:left;
    	float:left;
    	width:960px;
    	overflow:hidden;
    	background:#132600; /* column 4 background colour #b2f0f9 */
    }
    #container3 {
    	clear:left;
    	float:left;
    	width:640px;
    	position:relative;
    	right:0px;
    	background:#132600; /* column 3 background colour #89ffa2 */
    }
    #container2 {
    	clear:left;
    	float:left;
    	width:320px;
    	position:relative;
    	right: 0px;
    	background: #464545; /* column 2 background colour */
    }
    #container1 {
    	float:left;
    	width:318px;
    	position:relative;
    	right:0px;
    	background:#132600; /* column 1 background colour  */
    }
    #col1 {
    	float:left;
    	overflow:hidden;
    	padding: 0 15px 10px 15px;
    	width: 290px;
    }
    
    #col3 {
    	float:left;
    	width:290px;
    	position:relative;
    	left:1px;
    	padding: 0 15px 10px 15px;
    	overflow:hidden;
    }
    #col4 {
    float:left;
    width: 285px;
    position:relative;
    left:0px;
    padding: 0 15px 10px 15px;
    overflow:hidden;
    }
    #main{
    width: 960px;
    }
    #active4{
    width: 960px;
    padding-top: 50px;
    color: #666;
    background-color: #132600;
    margin-left: auto;
    margin-right: auto;
    }
    </style>
    </head>
    <body id="active4">
    <div id="header">
    </div>
    
    <div id="container4">
    	<div id="container3">
    		<div id="container2">
    			<div id="container1">
    				<div id="main">
    					<div id="col1">
    						<div id="quicklinks">
    							<ul id="quicklist">
    							<li><a href="company_formation_management.html">Button_1</a></li>
    							<li><a href="trustee_services.html">Button_2</a></li>
    							<li><a href="accounting.html">Button_3</a></li>
    							<li><a href="tax_advisory.html">Button_4</a></li>
    							<li><a href="banking_services.html">Button_5</a></li>
    							<li><a href="banking_services.html">Button_6</a></li>
    							</ul>
    						</div>
    
    					<div id="feature">
    					Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
    						<form name="form" id="form">
    							<select name="jumpMenu" id="jumpMenu" onchange="MM_jumpMenu('parent',this,0)">
    							<option>Select a publication</option>
    							<option value="publications/download_1.pdf">PDF 1</option>
    							<option value="publications/download_2.pdf">PDF 2</option>
    							<option value="publications/download_3.pdf">PDF 3</option>
    							</select>
    						</form>
    					</div>
    					</div>
    
    					<div id="col3">
    						<h1>Welcome
    						</h1>
    						<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    					</div>
    					<div id="col4">
    						<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    						</p>
    					</div>
    				</div>
    			</div>
    		</div>
    	</div>
    </div>
    <div id="footer">
    </div>
    
    </body>
    </html>


  •  

    Posting Permissions

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