SitePoint Sponsor

User Tag List

Results 1 to 18 of 18
  1. #1
    SitePoint Enthusiast
    Join Date
    Jan 2007
    Posts
    34
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    I'm looking for vertical liquid layout example

    It's very simple one but not so popular, I want to not use tables and here is what I need to achieve :



    header and footer blue box can be an image or div background, it doesn't matter
    however the middle div ought to be a div with background repeat that starts below the header and ends before the footer, no content inside the div and it has to adjust the height to height of container like in this example



    I've tried the standard stack however middle div overlaps the footer, I cannot stick footer to the bottom of a page because the location of container can be different and I can't put the green as background of container because it will interfere with blue boxes

  2. #2
    Just Blow It bronze trophy
    DaveMaxwell's Avatar
    Join Date
    Nov 1999
    Location
    Mechanicsburg, PA
    Posts
    7,264
    Mentioned
    115 Post(s)
    Tagged
    1 Thread(s)
    Do you mean something like this?

    Code HTML4Strict:
    <?xml version="1.0" encoding="ISO-8859-1"?>
     <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "[URL]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd[/URL]">
     <html xmlns="[URL]http://www.w3.org/1999/xhtml[/URL]" xml:lang="en-US" lang="en-US">
     <head>
      <title> New Document </title>
      <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
      <meta name="title" content="" />
      <meta name="author" content="" />
      <meta name="subject" content="" />
      <meta name="language" content="en" />
      <meta name="keywords" content="" />
      <style type="text/css">
       body { margin: 0; padding: 0; background-color: #FBAFD9; text-align:center; }
       #header { background-color: #C8006E; color: #fff; width: 100%; margin:0;}
       #content { width: 80%; margin: 10px auto; background-color: #5C846E;  }
       #footer {background-color: #C8006E; color: #fff; width: 100%; margin: 0; }
      </style>
     </head>
      <body> 
       <div id="content">
        <div id="header">This is the header</div>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris vehicula. Nunc eleifend, tellus a luctus dignissim, nisi velit euismod urna, vel condimentum ligula libero id justo. Curabitur sed mi. Mauris lobortis dolor eget ante. Sed augue enim, adipiscing non, tincidunt sed, vestibulum eu, purus. Morbi tortor sem, interdum sed, mollis quis, vestibulum et, dolor. Aenean elit nisl, tempor et, lobortis non, tincidunt a, massa. Proin volutpat consequat eros. Morbi consectetuer metus quis libero. Mauris in diam. </p>
        <p>Cras scelerisque mauris sed lorem congue luctus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam varius purus a leo. Pellentesque volutpat facilisis purus. Integer vestibulum mi vel felis. Integer rutrum nisi ac massa. Aliquam vitae velit. Fusce elit. Praesent nonummy venenatis dui. Sed molestie eleifend ante. In hac habitasse platea dictumst. Praesent malesuada. Nullam cursus commodo nibh. Vestibulum vel nulla ac dolor faucibus tincidunt. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis quis nisi eu arcu adipiscing volutpat. Integer dolor. Aliquam erat volutpat. Proin at mauris. Vestibulum fermentum, diam vel fermentum euismod, lectus dolor pharetra pede, et ullamcorper risus augue vitae felis. </p>
        <p>In gravida, elit sit amet consequat porttitor, tortor lorem porttitor lacus, feugiat faucibus quam nibh non elit. Integer id neque. Pellentesque est diam, ultricies non, aliquam vitae, commodo nec, urna. Donec ac tellus. Duis mi tellus, dictum vitae, vestibulum gravida, facilisis eget, elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. In ipsum. Curabitur ut lacus. Proin eleifend ullamcorper nibh. Fusce convallis pharetra tellus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. </p>
        <p>Donec molestie velit semper eros. Praesent semper. Donec tortor lorem, dapibus eu, consequat sodales, pretium eget, sem. Phasellus quis magna sed ipsum sollicitudin aliquam. Proin tristique sagittis dolor. Mauris lacus neque, rutrum in, feugiat sed, scelerisque vel, lectus. Nulla ac leo. Aenean nulla magna, facilisis nec, euismod in, ultrices nec, est. In a ante ut ante volutpat ullamcorper. Nam lectus sapien, sagittis a, accumsan et, varius ut, velit. Nulla porttitor, enim non ultricies faucibus, massa turpis volutpat metus, vel vestibulum enim dolor vitae lectus. Curabitur ut mi. Donec tincidunt, eros a fringilla blandit, urna enim posuere magna, sit amet aliquam libero nibh sit amet lorem. Integer hendrerit laoreet enim. </p>
        <p>Vestibulum eget massa. Nullam sit amet sapien sit amet mi ullamcorper pharetra. Integer ullamcorper. Donec mattis nulla id odio eleifend ornare. Nulla feugiat ornare tortor. Nulla a ligula sed erat vehicula dictum. Quisque in mi. Vivamus vel metus. Fusce sodales odio ac arcu. Nulla tortor lorem, sodales ut, ullamcorper scelerisque, dictum non, sem. Aenean ut justo quis justo ullamcorper varius. Nam semper feugiat nibh. </p>
        <div id="footer">This is the footer</div>
       </div>
      </body>
     </html>
    Dave Maxwell - Manage Your Site Team Leader
    My favorite YouTube Video! | Star Wars, Dr Suess Style
    Learn how to be ready for The Forums' Move to Discourse

  3. #3
    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)
    I think you'll only be able to do this if you know in advance what height the container will be and are able to code this within your CSS.

    If you're able to do this then the following will work

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>Layout Demo</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <style type="text/css">
    #container {
    	width: 130px;
    	height: 400px;
    	background-color: #FECCFF;
    	padding: 10px;
    }
    #top {
    	background-color: #8066FF;
    	height: 20px;
    }
    #box {
    	position: relative;
    	height: 100&#37;;
    	background-color: #7FC080;
    }
    #bottom {
    	background-color: #8066FF;
    	position: absolute;
    	bottom: 0;
    	height: 20px;
    	width: 100%;
    }
    </style>
    </head>
    
    <body>
    <div id="container">
    	<div id="box">
    		<div id="top"></div>
    		<div id="bottom"></div>
    	</div>
    </div>
    </body>
    </html>
    If you alter the height of #container then it's content will automatically adjust accordingly.

    You can obviously then apply a background image to any of these <div>'s as required.

  4. #4
    SitePoint Enthusiast
    Join Date
    Jan 2007
    Posts
    34
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    DaveMaxwell : nope, sorry it's something different

    csswiz : almost good, but check this out :

    http://hdd001.republika.pl/vertical/01.htm

    it's your code with my graphics, as you see the green is under blue boxes and I need #box to start below the header and end before the footer

    this is how it should look like

    http://hdd001.republika.pl/vertical/table.htm

    however this is old style coding using tables and I want to learn how to get these things done using CSS

  5. #5
    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)
    Not sure that's possible without entering a physical height for the green container.

    You can obviously adjust the width so that it gives the appearance of your second example.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>Layout Demo</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <style type="text/css">
    #container {
    	width: 20px;
    	height: 400px;
    	background-color: #FECCFF;
    	padding: 10px;
    }
    #top {
    	background-color: #8066FF;
    	height: 20px;
    	width: 20px;
    }
    #box {
    	position: relative;
    	height: 100&#37;;
    	background-color: #7FC080;
    }
    #bottom {
    	background-color: #8066FF;
    	position: absolute;
    	bottom: 0;
    	height: 20px;
    	width: 20px;
    }
    </style>
    </head>
    
    <body>
    <div id="container">
    	<div id="box">
    		<div id="top"></div>
    		<div id="bottom"></div>
    	</div>
    </div>
    </body>
    </html>
    This may be a good time to ask, what this is actually going to be used for?

    Quite often people switching from tables to CSS still think with the same mindset as they did with tables which is often more of a problem that the restrictions of CSS.

  6. #6
    SitePoint Enthusiast
    Join Date
    Jan 2007
    Posts
    34
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by csswiz View Post
    Not sure that's possible without entering a physical height for the green container.
    the height will be dynamical as container height would change (for example container div can be resizable)

    Quote Originally Posted by csswiz View Post
    You can obviously adjust the width so that it gives the appearance of your second example.
    I can but I have to have nothing below the box, it has to be just blue box and body background, nothing in the middle as box has opacity

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    however this is old style coding using tables and I want to learn how to get these things done using CSS
    Then don't try and mimic specific table behavior as you will be working to the weaknesses of CSS. If you want table behavior like that then use a table. Use CSS for the things it's good at and don't try to emulate equalizing cell behavior as that is specific to tables.

    You might have more success telling us how this is supposed to work in a real layout as I can't see much use for what you have there.

    If the container has a fixed height then you can do it 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=iso-8859-1" />
    <title>Untitled Document</title>
    <style type="text/css">
    
    .test{
        width:500px;
        position:relative;
        background:red;
        height:300px;
        padding:50px 0;
    }
    .top,.bottom{
        width:50px;
        position:absolute;
        left:25px;
        height:25px;
        background:blue;
    }
    .top {top:25px}
    .bottom{bottom:25px;}
    .mid{
        position:relative;
        left:25px;
        width:450px;
        background:yellow;
        opacity:0.5;
        filter:alpha(opacity=50);
        height:100&#37;;
    }
    
    </style>
    </head>
    <!--[if IE ]>
    <![endif]-->
    <body>
    <div class="test">
        <div class="top">Top</div>
        <div class="mid"></div>
        <div class="bottom">Bottom</div>
    </div>
    </body>
    </html>
    You can change the height and the inner elements will adjust. However you cannot let it be height:auto or it won't work as the inner element collapses to height:auto also.

    You could do this using absolute positioning but it won't work in IE6 and under. It should work everywhere else including ie7 though.

    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>
    <style type="text/css">
    
    .test{
        width:50%;
        position:relative;
        background:red;
    }
    .top,.bottom{
        width:95%;
        position:absolute;
        left:2.5%;
        height:25px;
        background:blue;
    }
    .top {top:25px}
    .bottom{bottom:25px;}
    .mid{
        position:absolute;
        top:50px;
        left:2.5%;
        bottom:50px;
        width:95%;
        background:yellow;
        opacity:0.5;
        filter:alpha(opacity=50);
    }
    
    </style>
    </head>
    <body>
    <div class="test">
        <p>This is some text This is some text This is some text This is some textThis is some text This is some textThis is some text This is some textThis is some text This is some textThis is some text This is some textThis is some text This is some textThis is some text This is some textThis is some text This is some textThis is some text This is some textThis is some text This is some text</p>
        <p>This is some text This is some text This is some text This is some textThis is some text This is some textThis is some text This is some textThis is some text This is some textThis is some text This is some textThis is some text This is some textThis is some text This is some textThis is some text This is some textThis is some text This is some textThis is some text This is some text</p>
        <div class="top">Top</div>
        <div class="mid"></div>
        <div class="bottom">Bottom</div>
    </div>
    </body>
    </html>
    However, I am guessing that there are more behaviors required than you have told us because the examples don't take into account real applications like where is the content going

  8. #8
    SitePoint Enthusiast
    Join Date
    Jan 2007
    Posts
    34
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Then don't try and mimic specific table behavior as you will be working to the weaknesses of CSS. If you want table behavior like that then use a table. Use CSS for the things it's good at and don't try to emulate equalizing cell behavior as that is specific to tables.
    you are absolutely right, it's just because I see all around the net that people are claiming that using tables is old and bad, it shall be used only to represent the tabelaric values but my case proves they're wrong

    Quote Originally Posted by Paul O'B View Post
    You might have more success telling us how this is supposed to work in a real layout as I can't see much use for what you have there.
    OK, here is an example layout

    http://hdd001.republika.pl/vertical/02.htm

    I've tested tables + CSS and tables with images and as you see it works very well however I found out it can be problematic to view offline if wrong doctype is declared so please tell me which one will be the best for using what I have now + newest dtml and css2 ?

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    I see all around the net that people are claiming that using tables is old and bad, it shall be used only to represent the tabelaric values but my case proves they're wrong
    Well tables are bad for accessibility and I would avoid using them unless there is absolutely no other way to achieve what you want. If you can't change the design and you have to have that specific format then you have no other choice but to use a table.

    Tables are bad for layout if you keep using them when other elements will do the job and nested tables should be avoided at all costs. However I don't see a problem with the odd table just to get an effect that can't realistically be done otherwise.

    However if it was my design I would change it in some way so that I didn't need a table

    I've tested tables + CSS and tables with images and as you see it works very well however I found out it can be problematic to view offline if wrong doctype is declared so please tell me which one will be the best for using what I have now + newest dtml and css2 ?
    The only reason that layout is working is because your online version puts a script above the doctype and causes both mozilla and IE to go into quirks mode. You cannot do that layout (like that) while in standards mode.

    I'm not sure why you are using many divs and 3 tables. If you are going to use a table than use a table with 3 cells and 3 rows.

    This is about as close as I can get more simply but IE is too high due to the 100&#37; height on the middle row. If you want IE to work then it means removing the * html .mid td{height:100%}style and then changing IE to quirks mode by using the html 4.01 doctype without URI or put some html comments above the doctype. Of course running in quirks mode is never a good thing.

    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" />
    <style type="text/css">
    body{background: url(http://hdd001.republika.pl/vertical/bgtest.gif);}
    #cont{
        height:380px;
        width:700px;
        margin:50px auto 0 auto;
        border:10px solid black;
    }
    .middle {
        background:yellow;
        filter:alpha(opacity=50);
        -moz-opacity:.50;
        opacity:.50;
        width:100%;
    }
    .main{
        width:100%;
        height:100%;
        border-collapse:collapse;
        padding:0;
    }
    .narrow{
        width:30px;
        height:30px;
    }
    .long{
        background:url(http://hdd001.republika.pl/vertical/tlo1.png) repeat left top;
    }
    img{display:block;}
    table.main td{vertical-align:top}
    table.main .top td{vertical-align:top;height:30px;}
    table.main .base td{vertical-align:bottom;height:30px}
    * html .mid td{height:100%}
    
    </style>
    </head>
    <body>
    <div id="cont">
        <table class="main" cellspacing="0" cellpadding="0">
            <tr class="top">
                <td class="narrow"><img src="http://hdd001.republika.pl/vertical/1.png"></td>
                <td class="middle">&nbsp;</td>
                <td class="narrow"><img src="http://hdd001.republika.pl/vertical/1.png"></td>
            </tr>
            <tr class="mid">
                <td class="long">&nbsp;</td>
                <td class="middle">Middle</td>
                <td class="long">&nbsp;</td>
            </tr>
            <tr class="base">
                <td class="narrow"><img src="http://hdd001.republika.pl/vertical/1.png"></td>
                <td class="middle">&nbsp;</td>
                <td class="narrow"><img src="http://hdd001.republika.pl/vertical/1.png"></td>
            </tr>
        </table>
    </div>
    </body>
    </html>
    Firefox is OK as it is.

    I'm still not sure how this layout is supposed to work in a real situation because you didn't show an example of its usage. I don't see any difference from your table layout to the first example I posted. Both are controlled by an outer element with a height defined. You said that the height would be defined dynamically but what exactly do you mean? How is the height to be dictated?

  10. #10
    SitePoint Enthusiast
    Join Date
    Jan 2007
    Posts
    34
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    However if it was my design I would change it in some way so that I didn't need a table

    ....

    I'm still not sure how this layout is supposed to work in a real situation because you didn't show an example of its usage. I don't see any difference from your table layout to the first example I posted. Both are controlled by an outer element with a height defined. You said that the height would be defined dynamically but what exactly do you mean? How is the height to be dictated?
    You are asking many questions, I know it seems odd and mysterious but I have vision (or a dream) of a great layout, something that as I assume have never been done before, it requires many hacks and tricks to get done but I want to do it and I will. Maybe there is a simpler, easier, better way to do it but I want to do it my way and after that I'll surely present you the results so you can praise or insult me for my work. As for now, thanks for your help and you can expect me to post some more odd questions in here.

  11. #11
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    fter that I'll surely present you the results so you can praise or insult me for my work
    We never insult anyone here

    Good luck anyway and maybe once you get a bit further on we can see what you meant

  12. #12
    SitePoint Enthusiast keyshey's Avatar
    Join Date
    Nov 2007
    Posts
    37
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    not sure if this is what you want to achieve, but try this code

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>Layout Demo</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <style type="text/css">
    
    * {
    	margin: 0;
    	padding: 0;
    }
    
    #header {
    	margin: 0 auto;
    	width: 150px;
    	background: #8066FF;
    	border: 1px solid crimson;
    }
    
    #boxmiddle {
    	margin: 0 auto;
    	width: 152px;
    	background: #7FC080;
    }
    
    #footer {
    	margin: 0 auto;
    	width: 150px;
    	background: #8066FF;
    	border: 1px solid crimson;
    }
    
    
    </style>
    </head>
    
    <body>
    	<div id = "header">
    	<p> header </p>
    	</div>
    	<div id="boxmiddle">
    	<p> &nbsp; </p><p> &nbsp; </p><p> &nbsp; </p><p> &nbsp; </p>
    	</div>
    	<div id = "footer">
    	<p> footer </p>
    	</div>
    </body>
    </html>

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

    Thanks for your attempt but if the answer was as simple as that don't you think we would have given the answer sooner

    However don't let that deter you and have another go but read the thread starters requirements in that the box needs to extend to the height of the container automatically even when there is no content.

    Thanks for trying anyway

  14. #14
    SitePoint Enthusiast keyshey's Avatar
    Join Date
    Nov 2007
    Posts
    37
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    yeah... I thought so Paul =]
    then yeah, it wouldnt be possible to achieve that by just using HTML and CSS

    if you are able to use PHP, then this code should work
    this will give a height to the middle box automatically based from the height of the container

    since its a php, it cant be viewed offline,
    I uploaded a sample page here: http://keyshey.110mb.com/test/sitepoint.php

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
        <head>
            <?php
    ?>
            <title>Layout Demo</title>
            <meta content="text/html; charset=iso-8859-1" http-equiv="Content-Type" /> <style type="text/css">
    
    * {
    	margin: 0;
    	padding: 0;
    }
    
    <?php
    $cheight = 550;    // height of the container
    $hheight = 30;     // height of the header
    $fheight = 30;      // height of the footer
    $sum = $fheight + hheight;
    $bheight = $cheight - $sum; // this will be the height of the middle box
    ?>
    
    #container {
    	margin: 0 auto;
    	width: 152px;
            <?php echo 'height: '.$cheight.'px;'; ?>
    }
    
    #header {
    	width: 150px;
            <?php echo 'height: '.$hheight.'px;'; ?>
    	background: #8066FF;
    	border: 1px solid crimson;
    }
    
    #boxmiddle {
    	width: 152px;
    	background: #7FC080;
            <?php echo 'height: '.$bheight.'px;'; ?>
    }
    
    #footer {
    	width: 150px;
            <?php echo 'height: '.$fheight.'px;'; ?>
    	background: #8066FF;
    	border: 1px solid crimson;
    }
    
    
    </style>
        </head>
        <body spellcheck="false">
            <div id="container">
            <div id="header">
            <p>header</p>
            </div>
            <div id="boxmiddle">&nbsp;</div>
            <div id="footer">
            <p>footer</p>
            </div>
            </div>
        </body>
    </html>

  15. #15
    SitePoint Enthusiast
    Join Date
    Jan 2007
    Posts
    34
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I don't understand this stupid MSIE

    Code HTML4Strict:
    <html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" lang="en">
     
    <head>
     
    </head>
     
    <style type="text/css">
    #a{height:3px;width:100%;background:red;}
    #b{height:3px;width:100%;background:green;}
    #c{height:3px;width:100%;background:blue;}
    </style>
     
    </head>
     
    <body>
     
    <div style="height:100px;width:100px;">
     
    <div id="a"></div>
    <div id="b"></div>
    <div id="c"></div>
     
    </div>
     
     
    </body>
    </html>

    it seems that IE has some minimal height and can't go lower, I've tried this same with table and it's better

    Code:
    <table border="0" cellpadding="0" cellspacing="0" width="100%">
      <tr>
        <td id="a"></td>
      </tr>
      <tr>
        <td id="b"></td>
      </tr>
      <tr>
        <td id="c"></td>
      </tr>
    </table>

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

    IE6 and under will always expand an elements height to fit the content. An element will have a default font-size and therefore the element will never be smaller than that font-size unless you reduce the font-size to zero or alternatively use overflow:hidden
    Code:
    #a,#b,#c{overflow:hidden}
    See Keyshey's post for a dynamic solution to your previous questions.

  17. #17
    SitePoint Enthusiast
    Join Date
    Jan 2007
    Posts
    34
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Hi,
    IE6 and under will always expand an elements height to fit the content. An element will have a default font-size and therefore the element will never be smaller than that font-size unless you reduce the font-size to zero or alternatively use overflow:hidden
    IE7 also, overflow:hidden looks fine


    Quote Originally Posted by Paul O'B View Post
    See Keyshey's post for a dynamic solution to your previous questions.
    I saw however I'll stick to tables because in my case it is simpler and easier.
    I try to not use PHP or Flash in my project.

  18. #18
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    IE7 also,
    No IE7 is fine unless you are working in quirks mode and then you lose all the benefits of IE7 (all new features and fixes) and it basically means you are dropping back to a browser that behaves more like ie5. Which then means you have to use all the fixes and box model hacks that you would for those ancient browsers.

    IE7 in standards mode treats height correctly.


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
  •