Wrox Programmer Forums

Need to download code?

View our list of code downloads.

Go Back   Wrox Programmer Forums > Web Programming > CSS > BOOK: CSS Instant Results
Password Reminder
Register
Register | FAQ | Members List | Calendar | 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 tens of thousands of software programmers and website developers including Wrox book authors and readers. As a guest, you can read any forum posting. By joining today you can post your own programming questions, respond to other developersí questions, and eliminate the ads that are displayed to guests. Registration is fast, simple and absolutely free .
DRM-free e-books 300x50
Reply
 
Thread Tools Display Modes
  #1 (permalink)  
Old June 9th, 2007, 01: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


Reply With Quote
Reply


Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is Off
HTML code is Off
Trackbacks are Off
Pingbacks are On
Refbacks are Off

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 12:02 PM
min-height in IE cgallagr98 CSS Cascading Style Sheets 5 April 8th, 2005 01:47 PM
MIN() function mohiddin52 Access 1 October 29th, 2004 08:09 AM
Change height of div element if < window height JoelJunstrom Javascript How-To 1 October 10th, 2003 10:14 AM



All times are GMT -4. The time now is 03:59 PM.


Powered by vBulletin®
Copyright ©2000 - 2017, Jelsoft Enterprises Ltd.
© 2013 John Wiley & Sons, Inc.