Topic: N00B CSS problem with stretching left/right floats to bottom of window

So all the Rails contracts these days expect you to have CSS experience.... looks like all that backend work I did at my last place isn't going to be of much use then.  So I'd better learn some CSS.

The following 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=UTF-8" />
  <title>Title</title>


<style type="text/css">

/* general */

h1, h2, h3, h4, h5, h6 {
        padding: 0;
        margin: 0;
}

body {
        padding:0;
        margin: 0;
}

p { padding: 0; margin: 0; }

.title {
        font-variant: small-caps;
}

.floating_terminator {
        clear: both;
}

#entire_page {
        background-color: #efe6c1;
        height: 100%;
}

#flash_notice {
        color: green;
        background-color: white;
        border-style: dotted;
        padding: 2px;
        width: auto;
}

#left_pane {
        float: left;
        width: 20%;
        height: 100%;
        background-color: #eddb92;
}

#right_pane {
        float: right;
        width: 80%;
}

#navigation {
        list-style-type: none;
        padding: 0;
        margin: 0;
        /*padding-left: 0.75em;*/
}

.navigation_link {
        padding-left: 0.3em;
}

</style>


</head>
<body>

<div id="entire_page">

        <div id="left_pane">
            <ul id="navigation">
                <li class="navigation_link"><a href="/">Front Page</a></li>
                <li class="navigation_link"><a href="/">Random Location</a></li>
                <li class="navigation_link"><a href="/">Random Place</a></li>
            </ul>
        </div>

        <div id="right_pane">
            <h1 class="title">Welcome to MyApp!!</h1>

            <p id="flash_notice">Flash!</p>

            <span id="some_contents">
            <ul>
                <li>Contents</li>
                <li>Contents</li>
                <li>Contents</li>
                <li>Contents</li>
                <li>Contents</li>
                <li>Contents</li>
                <li>Contents</li>
                <li>Contents</li>
                <li>Contents</li>
                <li>Contents</li>
                <li>Contents</li>
                <li>Contents</li>
            </ul>

            </span>
        </div>

        <div class="floating_terminator"/>

</div>

</body>
</html>


generates the following page: http://fuzzy.qazi.eu/test-html.html

Sorry if that's a bit long.

Here's what I can't seem to figure out:

1) The 'Flash!' box - I only want it to go around the text that's in there, not go all the way to the right edge of the screen.

2) I want the whole site's background to always stretch all the way to the bottom of the screen, no matter what the height of the browser, and

3) I want the left pane's background to also stretch down to the bottom of the browser window.  Setting height=100% in #left_pane or #page_contents does not work.

Help please?  This has taken up my whole Saturday, I can't figure it out.

Thanks

Last edited by ayqazi (2009-02-01 10:51:11)

Re: N00B CSS problem with stretching left/right floats to bottom of window

hi ayqazi,
first off all, i guess you applied all styles inside <head> of the html template as example for this post, in real life you should  link to a external style sheet to separate content from presentation and ror makes this a default
here is a very good explanation http://www.maxdesign.com.au/presentatio … ndex07.htm

1) the flash box:
you are using a <p> tag wich is a block html element, use a <span> tag or give this css rule to the #flash_notice { display:inline; }. that will do the trick.

2) background to entire page:
instead of giving to #entire_page { bacground-color: #efe6c1;}   give it to body { bacground-color: #efe6c1; }. that will do the trick.

3) left pane background
here you go to more complex stuff its a technique called faux column
good explanation here http://www.alistapart.com/articles/fauxcolumns/

any way, open your gimp or photoshop and cut a image same color of your left_pane (#EDDB92) 1px height and width of your choice,
ah you must set a fix width for your left_pane in order to accomplish this, so your 20% must be a fix width and your 80% on your right_pane must be 100% or don't set width default will do just fine.

then once you have your image apply this css rule to the body like this:
body { backgrond: #efe6c1 url(your_image.png) repeat-y ; }

and you don't need that div id=entire_page if you take it out your site will stand good anyway.

hope this help,
im front end developer html css js and im learning ruby on rails for server side, some day i will ask you something.

Re: N00B CSS problem with stretching left/right floats to bottom of window

Thanks for the reply, answered all my questions!

You're welcome to ask me anything you want for server-side stuff like ActiveResource etc.