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 15 of 15
  1. #1
    Regular Coder
    Join Date
    May 2009
    Posts
    143
    Thanks
    14
    Thanked 1 Time in 1 Post

    float and height

    hi guys
    quick question

    I have a div container containing 2 divs
    one on the left 60% width and the other 40% width on the right.
    To achieve this I usually set float:left and float:right except this time I need the right div to have 100% height. having the div to float makes the height inline or something. How can I do this?

    I cant use absolute positioning for some reasons, it pushes the div out of the containing box (which has been specified to be relative with the body)

    edit:
    code!
    Code:
    	<fieldset class="redaction_global_container redaction_global_width" style="margin:25px auto 0 auto;" >
    		<div class='redaction_contenu'>		
                         &nbsp;
    		</div>
    		<div class='redaction_cours_panel'>test test</div>
    		<div class='clear'></div>
    	</fieldset>
    css
    Code:
    .redaction_global_container{position:relative; margin:10px; padding:0; background-color:white; text-align:left; font-family:Tw Cen MT,tahoma;}
    .redaction_global_width{width:60%;}
    .redaction_contenu{width:60%; background-color:blue; margin:5px auto 5px auto;}
    .redaction_cours_panel{position:absolute; width:38%; height:100%; right:0px; background-color:#CCCCCC; text-align:left;}
    Last edited by Jahren; 10-19-2009 at 08:12 PM.

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,925
    Thanks
    6
    Thanked 1,040 Times in 1,013 Posts
    A percent size always relates to the parent’s dimensions. Naturally elements have no definite height but the default value is “auto”, therefore a height of 100% of the child elements doesn’t have any effect. So, in order to achieve this you need to specify a height for the parent of the floated elements.

  • #3
    Regular Coder
    Join Date
    May 2009
    Posts
    143
    Thanks
    14
    Thanked 1 Time in 1 Post
    I always keep this in mind. My html/body has 100% width and height set.
    But containing div has no specific height, it grows as data comes in.

    I dont want to set a specific height. min-height won't work either.

  • #4
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,925
    Thanks
    6
    Thanked 1,040 Times in 1,013 Posts
    Would faux columns be a solution here (along with containing floats)?

  • #5
    Regular Coder
    Join Date
    May 2009
    Posts
    143
    Thanks
    14
    Thanked 1 Time in 1 Post
    Hmmm both articles are interesting but unfortunately, they don't cover my exact problem.
    I would like to know how to force the use of height:100% on a floating element

  • #6
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    There isn't any reason to float the second column, is there? Unless I'm missing something...
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. –G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  • #7
    Regular Coder
    Join Date
    May 2009
    Posts
    143
    Thanks
    14
    Thanked 1 Time in 1 Post
    I tried without floating the right div but it will go left, positionned BEHIND the left box.
    I tried clearing the floating before the right box, makes it go bellow the left box.


    ALSO after putting back float:left on the right div, I tried setting height:500px which works. but 100% won't

    I am 100% certain all the parents have width and height set. (all % but still)
    this includes html, body

    anythin i'm missing myself?

  • #8
    Regular Coder
    Join Date
    May 2009
    Posts
    143
    Thanks
    14
    Thanked 1 Time in 1 Post
    oh man I'm stupid.
    not all parents have a specified height.....
    the container div (containing the two columns) have no height.
    But I don't want a height there, the content is dynamical.
    what can I do ? :S

  • #9
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,748
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Hello Jahren,
    Give this a try and see if it gets you closer to what your looking for:
    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">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    html, body {
    	font: 14px "Comic Sans MS";
    	background: #FC6;
    	height: 100%;
    }
    * {
    	margin: 0;
    	padding: 0;
    	border: none;
    }
    #container {
    	width: 800px;
    	margin: 30px auto;
    	background: #f00;
    	height: 50%;
    }
    	#left {
    	width: 60%;
    	float: left;
    	margin: 5px 0;
    	background: #00f;
    	}
    	#right {
    		margin: 0 0 0 60%;
    		background: #ccc;
    		height: 100%;
    	}
    </style>
    </head>
    <body>
        <div id="container">
            <div id="left">&nbsp;</div>
            <div id="right">test test</div>
        <!--end container--></div>
    </body>
    </html>
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #10
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,748
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Or better yet, do away with the problem right box like this:
    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">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    html, body {
    	font: 14px "Comic Sans MS";
    	background: #FC6;
    	height: 100%;
    }
    * {
    	margin: 0;
    	padding: 0;
    	border: none;
    }
    #container {
    	width: 800px;
    	margin: 30px auto;
    	background: #f00;
    	overflow: auto;
    }
    	#left {
    	width: 60%;
    	float: left;
    	margin: 5px 0;
    	background: #00f;
    	}
    	#container p {
    		margin: 5px 5px 5px 60%;
    	}
    </style>
    </head>
    <body>
        <div id="container">
            <div id="left">&nbsp;</div>
                <p>
                    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna 
                    aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no 
                    sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam 
                    nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo 
                    duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
                </p>
        <!--end container--></div>
    </body>
    </html>
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #11
    Regular Coder
    Join Date
    May 2009
    Posts
    143
    Thanks
    14
    Thanked 1 Time in 1 Post
    Yes thats about it. with the very exception that left content is dynamic and therefore I can't set a specific height for the container :S That's a design problem xD
    I can't have the container be 50%, I don't want scroll bars, I want content to extend along with the right col set at height:100%

    Does that make any sense?

  • #12
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,748
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Quote Originally Posted by Jahren View Post

    Does that make any sense?
    I think so... check the code in my second post.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #13
    Regular Coder
    Join Date
    May 2009
    Posts
    143
    Thanks
    14
    Thanked 1 Time in 1 Post
    Second example doesnt make the right col to expand while the content of the left col makes the container grow in height.

    man I have hell of a problem :S

  • #14
    Regular Coder
    Join Date
    May 2009
    Posts
    143
    Thanks
    14
    Thanked 1 Time in 1 Post
    here's the online version of my test page
    TEST

    right col in gray should take height 100%. but it wont accept it while floating

  • #15
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,925
    Thanks
    6
    Thanked 1,040 Times in 1,013 Posts
    Well, that would be the perfect example for faux columns, don’t you think? Apply a background image to the container that is as wide as the gray column and one pixel high, and make it repeat vertically.


  •  

    Posting Permissions

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