Wrox Programmer Forums
| Search | Today's Posts | Mark Forums Read
BOOK: CSS Instant Results
This is the forum to discuss the Wrox book CSS Instant Results by Richard York; ISBN: 9780471751267
Welcome to the p2p.wrox.com Forums.

You are currently viewing the BOOK: CSS Instant Results section of the Wrox Programmer to Programmer discussions. This is a community of software programmers and website developers including Wrox book authors and readers. New member registration was closed in 2019. New posts were shut off and the site was archived into this static format as of October 1, 2020. If you require technical support for a Wrox book please contact http://hub.wiley.com
  #1 (permalink)  
Old June 9th, 2007, 12:58 PM
Friend of Wrox
 
Join Date: Jul 2006
Location: olathe, ks, USA.
Posts: 238
Thanks: 0
Thanked 2 Times in 2 Posts
Send a message via MSN to rsearing
Default Working with min-height

I am trying to get min-height to work for IE6, so I simply changed the height to be that of the min-height in a commented section (see below). The problem is, then, that that column doesn't stretch with the right. Thoughts?

My html page:

<!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'>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title></title>
        <link rel='stylesheet' type='text/css' href='two-column.css' />
    <!--[if lt IE 7]>
            <link rel='stylesheet' type='text/css' href='two-column-ie.css' />
        <![endif]-->

    </head>
    <body>
        <div id='main'>
            <div id='header' >
                <img src="images/sunslogo.jpg" />

             </div>
            <div id='container'>
                <div id='first-column'>
                    <span id='menu1'>Text in the first column. </span>
                    <span id='menu2'>Text in the first column. </span>
                    <span id='menu3'>Text in the first column. </span> </div>
                <div id='content'>
                    Text in the content column. <br />
            Text in the content column. <br />
Text in the content column. <br />
Text in the content column. <br />
Text in the content column. <br />
Text in the content column. <br />
Text in the content column. <br />
Text in the content column. <br />
Text in the content column. <br />
Text in the content column. <br />
Text in the content column. <br />
Text in the content column. <br />
Text in the content column. <br />
Text in the content column. <br />
Text in the content column. <br />
Text in the content column. <br />
Text in the content column. <br />
Text in the content column. <br />
Text in the content column. <br />
Text in the content column. <br />
Text in the content column. <br />
Text in the content column. <br />
Text in the content column. <br />
Text in the content column. <br />
Text in the content column. <br />
Text in the content column. <br />
Text in the content column. <br />
Text in the content column. <br />
Text in the content column. <br />
Text in the content column. <br />
Text in the content column. <br />
Text in the content column. <br />
Text in the content column. <br />
Text in the content column. <br />
Text in the content column. <br />
Text in the content column. <br />
Text in the content column. <br />
Text in the content column. <br />
Text in the content column. <br />
Text in the content column. <br />
Text in the content column. <br />
Text in the content column. <br />
Text in the content column. <br />
Text in the content column. <br />
Text in the content column. <br />
Text in the content column. <br />
Text in the content column. <br />
Text in the content column. <br />
Text in the content column. <br />
Text in the content column. <br />
Text in the content column. <br />

                </div>
            </div>
            <div id='footer'>
                <h6>Footer</h6>
            </div>
        </div>
    </body>
</html>

two-column.css

body {
    background-image:url(images/EveningShadows.jpg);
    background-repeat:no-repeat;
    background-position:center;
    font-family: sans-serif;
    margin: 0;
    padding: 0;
}
h1, h6 {
    margin: 0;
    font-weight: normal;
}

div#main {
    width:700px;
    margin:auto;
}

div#container {
    position: relative;
    min-height: 400px;
    border: 1px solid gray;
       background:white;
    margin: auto;
}
div#first-column {
    position: absolute;
    top: 0;
    bottom: 0;
    min-height:820px;
    border: 1px solid gray;
    background: rgb(240, 240, 240);
    width: 200px;
    margin: 3px;
    background-image:url(images/paletteleft.jpg);
}
div#first-column {
    left: 0;
}
div#content {
    position:relative;
    top:3px;
    margin: 3px 3px 6px 208px;
    border: 1px solid gray;
    min-height: 820px;
    background-image:url(images/paletteright.jpg);
    background-repeat:no-repeat;

}
div#header,
div#footer {
    background:white;
    padding: 3px;
    border: 1px solid gray;
    width:694;
    margin: auto;
}
div#header {
    border-bottom: none;
    padding-left:70px;
}
div#footer {
    border-top: none;
}
#menu1 {
    position:absolute;
    top:190px;
    left:130px;
    padding-right:10px;

}

two-column-ie.css

#container {
    height:400px;
}

#first-column {
    height:820px;

}

#content {
    height:820px;
}

Thanks,
Rob




Similar Threads
Thread Thread Starter Forum Replies Last Post
Fixed table height and row height rajanikrishna HTML Code Clinic 3 January 18th, 2007 12:42 AM
asp:tablecell height not working kkraeft ASP.NET 2.0 Professional 0 August 24th, 2006 11:02 AM
min-height in IE cgallagr98 CSS Cascading Style Sheets 5 April 8th, 2005 12:47 PM
MIN() function mohiddin52 Access 1 October 29th, 2004 07:09 AM
Change height of div element if < window height JoelJunstrom Javascript How-To 1 October 10th, 2003 09:14 AM





Powered by vBulletin®
Copyright ©2000 - 2020, Jelsoft Enterprises Ltd.
Copyright (c) 2020 John Wiley & Sons, Inc.