SitePoint Sponsor

User Tag List

Results 1 to 19 of 19

Thread: max height

  1. #1
    SitePoint Guru hisham777's Avatar
    Join Date
    Dec 2005
    Posts
    802
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question max height

    am coding 2 column and Header and Footer site.

    the left column which is the navigation, iwant the column height to max alowed.

    if the Right column is 600px the left column should follow. the reason to this is
    the website content are dynamic content do to that the right column fluctuate in height

    my current left column code are

    HTML Code:
    #leftbar{
    float: left;
    width: 28%;
    /*height:100%;
    margin: 0;
    margin-right: 8px;*/
    padding: 0;
    border-right:1px #999999 solid;
    background-color: #FFFFFF;
    }
    thanks
    Never be shy to ask silly Qs
    An answer is always better than none

  2. #2
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

  3. #3
    SitePoint Guru hisham777's Avatar
    Join Date
    Dec 2005
    Posts
    802
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks all4nerds

    there is no solution with out the hacks.?
    Never be shy to ask silly Qs
    An answer is always better than none

  4. #4
    Non-Member Egor's Avatar
    Join Date
    Jan 2004
    Location
    Melbourne, Australia
    Posts
    7,305
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by hisham777
    thanks all4nerds

    there is no solution with out the hacks.?
    There is, if you can ignore IE.

    http://www.w3.org/TR/CSS21/tables.html#q2

  5. #5
    SitePoint Guru hisham777's Avatar
    Join Date
    Dec 2005
    Posts
    802
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Egor
    There is, if you can ignore IE.

    http://www.w3.org/TR/CSS21/tables.html#q2
    thanks for reply tables are other way to solve the problem. And IE am not really Bothered by making things perfect in IE as long its accepteable diffrensis
    i dont mind it sack by the way (i hope i did not offend B G )
    but its not what am looking at. i started web design with out learning tables
    even though i have tryed tables with PHP it serves its porpues However,

    am not planning to use it, i want to stick with pure xHTML 1.0 Strict and CSS 2 at the time been thanks though for the help, apriciated.

    so i guess there is no solutions but hack (which i will not use).

    thanks everybody


    and if someone fine a solution one day her is the Code
    and any commend regarding this code Please Feel very to improve
    or critisise

    tested on IE6(not bothered much), FF 1.5, Opera 9


    HTML 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=iso-8859-1" />
      <title>Untitled Document</title>
      <link href="main9.css" rel="stylesheet" type="text/css" />
      </head>
      
      <body>
      <div id="container">
      
      <div id="header">&nbsp;</div>
      
      <div id="leftbar">
        
      </div>
      <!-- Left Bar -->
      
      <div id="content">
      
      
      </div><!-- Content -->
      
      <div id="footer">
      
      </div><!-- Footer -->	
      </div><!-- Container -->
      </body>
      </html>
      

    HTML Code:
      #container {
      width: 744px;
      border-left:1px #999999 solid;
      border-right:1px #999999 solid;
      margin-top:0;
      
      margin-left: auto;
      margin-right: auto;
      padding: 0 10px 0 10px;
      
      }
      #header {
      			padding: 0 5px 14px 5px;
      			margin-bottom: 18px;
     			background:#FFFFFF url(images/main9/header.jpg) center top no-repeat;
      			border-bottom:1px #999999 solid;
      		}
      
      #content {
      			padding: 0;
      			margin-left:220px ;
     			background-color: #FFFFFF;
      		}
      
      
      #leftbar{
      float: left;
      width: 28%;
      height:100%;
     padding: 0;
      margin-bottom:1px;
      border-right:1px #999999 solid;
      background-color: #FFFFFF;
      }
      		#footer {
      clear: both;
      padding: 8px;
      margin-top: 10px;
      background:#FFFFFF url(images/main9/bottom.jpg) top no-repeat;
      }
      
    Never be shy to ask silly Qs
    An answer is always better than none

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,338
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    No Hacks

    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=iso-8859-1" />
    <title>Untitled Document</title>
    <link href="main9.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
      #container {
      width: 744px;
      border:1px solid  #999999;
      margin-top:0;
      margin-left: auto;
      margin-right: auto;
      padding: 0 10px 0 10px;
      background:red;
     
    	}
      #header {
    	 padding: 0 5px 14px 5px;
    	 margin-bottom: 18px;
    	background:#FFcccc url(images/main9/header.jpg) center top no-repeat;
    	 border-bottom:1px solid #999999 ;
    	}
      
      #content {
    	padding: 0;
    	margin-left:220px ;
    	width:524px;
    	background-color: #FFFFcc;
    	border-left:1px #999999 solid;
       position:relative;
    	
    	}
      
      
      #leftbar{
      float: left;
      width: 208px;
      margin-left:-207px;
      padding: 0;
      margin-bottom:1px;
      position:relative;
      left:-1px;
      }
    	#footer {
      clear: both;
      padding: 8px;
      margin-top: 10px;
      background:#FFFccc url(images/main9/bottom.jpg) top no-repeat;
      }
     .clearer{height:1px;overflow:hidden;clear:both} 
      
     </style>
    </head>
    <body>
    <div id="container">
     <div id="header">&nbsp;</div>
     <!-- Left Bar -->
     <div id="content">
      <div id="leftbar">
       <p>This is the left content : This is the left content : This is the left content : This is the left content : This is the left content : This is the left content : This is the left content : This is the left content : This is the left content : </p>
      </div>
      <p>This is the content : This is the content : This is the content : This is the content : This is the content : This is the content : This is the content : This is the content : This is the content : This is the content : This is the content : This is the content : This is the content : This is the content : This is the content : </p>
      <div class="clearer"></div>
     </div>
     <!-- Content -->
     <div id="footer"> </div>
     <!-- Footer -->
    </div>
    <!-- Container -->
    </body>
    </html>

    However you should know that floats in ie suffer from the 3 pixel jog and there is no way to cure it unless you address some code to ie only.

    Regarding hacks you have to define what hacks are (devils advocate mode).

    Every time you use a width or height you are in fact using a hack in ie because a width will force "layout" in ie and make it start working correctly. There are a number of other properties that will force "layout" so every time you use them you are using a hack. Position:relative often fixes layout issues and could also be called a hack.

    Using any code when it is not really needed is in fact a hack and by that criteria 99.9% of sitse would be classed as using hacks.

    If you use conditional comments for ie (another hack perhaps) you can provide valid code to ie without using the star selector hack etc (which is valid code but a hack none-the-less).

    The issue are never as clear as you think

  7. #7
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello

    ? Since all your background colors are white ?
    I am wondering what you need you mean the borders donít touch?

    Your floats are also not cleared , this is also hidden by the use of the white background color

    PS your content container has no width or height, it has a haslayout problem in IE (a hack is needed ?)

    I personally would get it going in IE with standard html css and check (part of) the code immediately in FF OP, not afterwards when all is finished

  8. #8
    SitePoint Zealot
    Join Date
    Apr 2006
    Location
    Ohio USA
    Posts
    171
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Only header, content, leftbar, and footer are white. Rest of the page is essentially color auto... it will not be white for everyone.

  9. #9
    SitePoint Guru hisham777's Avatar
    Join Date
    Dec 2005
    Posts
    802
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by all4nerds
    Hello

    ? Since all your background colors are white ?
    I am wondering what you need you mean the borders donít touch?
    The whole problem because there is a border on the right side of the left
    bar i want the border to expend.

    example

    the left bar containe content which takes around 600px
    but the content side on the right it fluctuate between 400px and 1000+px

    i dont have
    problem with 400px because the height of the left bar is 600 (ofcourse including the border on the right)

    i need the container of the left bar to expand as the container on the right


    if there is a solution with out hacks please help me out. ?

    thanks guys
    Never be shy to ask silly Qs
    An answer is always better than none

  10. #10
    SitePoint Guru hisham777's Avatar
    Join Date
    Dec 2005
    Posts
    802
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Zachnefein
    Only header, content, leftbar, and footer are white. Rest of the page is essentially color auto... it will not be white for everyone.
    thanks for the notes.
    Never be shy to ask silly Qs
    An answer is always better than none

  11. #11
    SitePoint Guru hisham777's Avatar
    Join Date
    Dec 2005
    Posts
    802
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B
    Hi,

    No Hacks

    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=iso-8859-1" />
     <title>Untitled Document</title>
     <link href="main9.css" rel="stylesheet" type="text/css" />
     <style type="text/css">
       #container {
       width: 744px;
       border:1px solid  #999999;
       margin-top:0;
       margin-left: auto;
       margin-right: auto;
       padding: 0 10px 0 10px;
       background:red;
      
     	}
       #header {
     	 padding: 0 5px 14px 5px;
     	 margin-bottom: 18px;
     	background:#FFcccc url(images/main9/header.jpg) center top no-repeat;
     	 border-bottom:1px solid #999999 ;
     	}
       
       #content {
     	padding: 0;
     	margin-left:220px ;
     	width:524px;
     	background-color: #FFFFcc;
     	border-left:1px #999999 solid;
        position:relative;
     	
     	}
       
       
       #leftbar{
       float: left;
       width: 208px;
       margin-left:-207px;
       padding: 0;
       margin-bottom:1px;
       position:relative;
       left:-1px;
       }
     	#footer {
       clear: both;
       padding: 8px;
       margin-top: 10px;
       background:#FFFccc url(images/main9/bottom.jpg) top no-repeat;
       }
      .clearer{height:1px;overflow:hidden;clear:both} 
       
      </style>
     </head>
     <body>
     <div id="container">
      <div id="header">&nbsp;</div>
      <!-- Left Bar -->
      <div id="content">
       <div id="leftbar">
        <p>This is the left content : This is the left content : This is the left content : This is the left content : This is the left content : This is the left content : This is the left content : This is the left content : This is the left content : </p>
       </div>
       <p>This is the content : This is the content : This is the content : This is the content : This is the content : This is the content : This is the content : This is the content : This is the content : This is the content : This is the content : This is the content : This is the content : This is the content : This is the content : </p>
       <div class="clearer"></div>
      </div>
      <!-- Content -->
      <div id="footer"> </div>
      <!-- Footer -->
     </div>
     <!-- Container -->
     </body>
     </html>

    However you should know that floats in ie suffer from the 3 pixel jog and there is no way to cure it unless you address some code to ie only.

    Regarding hacks you have to define what hacks are (devils advocate mode).

    Every time you use a width or height you are in fact using a hack in ie because a width will force "layout" in ie and make it start working correctly. There are a number of other properties that will force "layout" so every time you use them you are using a hack. Position:relative often fixes layout issues and could also be called a hack.

    Using any code when it is not really needed is in fact a hack and by that criteria 99.9% of sitse would be classed as using hacks.

    If you use conditional comments for ie (another hack perhaps) you can provide valid code to ie without using the star selector hack etc (which is valid code but a hack none-the-less).

    The issue are never as clear as you think
    Paul O'B i love your style and skills.


    regarding the code its very clean and straight forward but it did not work

    the left bar still do not expand with the content on the right.

    thanks though for the code and information.
    Never be shy to ask silly Qs
    An answer is always better than none

  12. #12
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello

    Paul's Demo is a Negative margin Model, the right border is working? , and the left right columns give the impression of equal height?

    If you mean in the strict sense of the word equal height, that is only going to work if you use a set height on a wrapper and then make use of the 100% height of the columns

    Your model is a wrapper with one float in it, by using a left margin the right column is created; in IE there are a few problems, haslayout and the 3-pixel jog

    The header has no height, in IE its to high because of standard height + padding, + haslayout problem

    Footer has no height, for IE a haslayout problem, for FF < 1.5 NS Moz OP the floats are not cleared

    Itís a fixed width, so why use 28% for left column?

    Margins on first container after floats, the margin collapse in FF NS Moz OP, set margins on the floats

    You have 100% high in the left column? 100% of? , maybe that is working in IE , but not in FF, etc

    I changed it in left right float model, with a left right border that overlaps so the left right extend, also only giving the impression of divís that have equal high

    Its also not clear to me why you insist of not to have hacks , they are used to give specific CSS to the browsers
    Meaning 99% separating/correction of IE 6 behavior, and solve box model problems in IE 5 5.5

    HTML 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" lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>12345 12345 12345 12345 12345</title>
    	<style type="text/css">
    	
    	
    	#container {
    	width:744px;
    	border-left:1px #999999 solid;
    	border-right:1px #999999 solid;
    	margin:0 auto;
    	padding: 0 10px 0 10px;
    	}
    	
    	#header{
    	overflow:hidden;
    	height:14px;
    	padding: 0 5px 0 5px;
    	margin-bottom:18px;
    	background:#ffffff url(images/main9/header.jpg) center top no-repeat;
    	border-bottom:1px #999999 solid;
    	}
    	
    	#leftbar{
    	float:left;
    	width:219px;
    	border-right:1px #999999 solid;
    	background:#ffffff;
    	margin-bottom:10px;
    	}
    
    	#content{
    	float:left;
    	width:513px;
    	background:#ffffff;
    	border-left:1px #999999 solid;
    	margin-left:-1px;
    	margin-bottom:10px;
    	}
    	
    
    	#footer{
    	overflow:hidden;
    	height:8px;
    	clear:both;
    	background:#ccccff url(images/main9/bottom.jpg) top no-repeat;
    	}
    
    	#container p{padding:5px;margin:0;}
    	</style>
    </head>
    <body>
    
    <div id="container">
    
    <div id="header">&nbsp;</div>
    
    <div id="leftbar"><p>left<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /></p></div><!-- Left Bar -->
    
    <div id="content">
    <p>your model is a wrapper with one float in it, by using a left margin the right column is created, in IE there are a few problems, haslayout and the 3 pixel jog</p>
    <p>the header has no height, in ie its to high, haslaout problem</p>
    <p>footer has no height, for IE a haslayout problem, for FF &lt; 1.5 NS Moz OP the floats ar not cleared </p>
    </div><!-- Content -->
    
    <div id="footer"></div><!-- Footer -->
    
    </div><!-- Container -->
    
    </body>
    </html>
    Last edited by all4nerds; Jul 23, 2006 at 03:41.

  13. #13
    SitePoint Guru hisham777's Avatar
    Join Date
    Dec 2005
    Posts
    802
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    all4nerds i dont know how yopu did it

    but its working so far the height of the left bar follows the right bar
    with your code.

    i have to test it further though.

    testing process at the moment
    Never be shy to ask silly Qs
    An answer is always better than none

  14. #14
    SitePoint Guru hisham777's Avatar
    Join Date
    Dec 2005
    Posts
    802
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    *{padding:0;margin:0;}

    this it solve the problem of the spece between the layout and the top of
    the browsers.

    intersting.

    thanks my problem is solved with your code.

    good solution to go around it

    thumps up

    thank you all

    sorry i changed it by mist.
    Never be shy to ask silly Qs
    An answer is always better than none

  15. #15
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello

    Sorry you can delete them, PS set a margin:0; on P tags

    This is not a hack * = all elements, tags
    *{padding:0;margin:0;}

  16. #16
    SitePoint Guru hisham777's Avatar
    Join Date
    Dec 2005
    Posts
    802
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    the code you posted i tryed it everythinf working perfectlly But

    the footer just dissapered ??

    any idea why ?
    Never be shy to ask silly Qs
    An answer is always better than none

  17. #17
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,338
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by hisham77
    regarding the code its very clean and straight forward but it did not work
    lol - my code always works

    You must have changed something or meant something else.

    Here is the code online and working (I've added a few tweaks just to show it working when either column expands).

    http://www.pmob.co.uk/temp/2colhisham.htm

    It seems to do everything you want (as does all4nerds demos also).

    Quote Originally Posted by hisham77
    would you please elaborate on what this 2 hacks does.

    * html #header{height:1%;}
    *{padding:0;margin:0;}
    There you go again

    Only the first one is a hack because it uses a method to parse styles to ie6 with the star selector hack (* html) and then forces "layout" with the height:1% property (see faq on "haslayout"). It however is 100% valid code but is termed a hack because it does something that it shouldn't in <=IE6. (see faz on the broken box model for a longer explanation.)

    The second one * {margin:0;padding:0} is not a hack at all and you are getting it confused with the first one. The universal selector (*) is a selector that matches any other selector and is perfectly valid and extremely useful part of the css specs. It is like a wild card and matches any (or all) elements that would be in the position that it is placed.

    When you say * {margin:0;padding:0} you are saying that all elements are to have no padding and margins at all. These is very useful because it saves you having to explicitly set them for every element you use and makes all browsers start on equal footing.

    I hope that explains it a bit better

  18. #18
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello

    footer is still there maybe not high enough ?

  19. #19
    SitePoint Guru hisham777's Avatar
    Join Date
    Dec 2005
    Posts
    802
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B
    lol - my code always works

    You must have changed something or meant something else.
    i know and i did


    Quote Originally Posted by Paul O'B

    Only the first one is a hack because it uses a method to parse styles to ie6 with the star selector hack (* html) and then forces "layout" with the height:1% property (see faq on "haslayout"). It however is 100% valid code but is termed a hack because it does something that it shouldn't in <=IE6. (see faz on the broken box model for a longer explanation.)

    The second one * {margin:0;padding:0} is not a hack at all and you are getting it confused with the first one. The universal selector (*) is a selector that matches any other selector and is perfectly valid and extremely useful part of the css specs. It is like a wild card and matches any (or all) elements that would be in the position that it is placed.

    When you say * {margin:0;padding:0} you are saying that all elements are to have no padding and margins at all. These is very useful because it saves you having to explicitly set them for every element you use and makes all browsers start on equal footing.

    I hope that explains it a bit better
    great explaination it tells me exactlly what i need to know
    thanks.


    Hello

    footer is still there maybe not high enough ?

    my bad its working thanks
    Never be shy to ask silly Qs
    An answer is always better than none


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
  •