37 Replies Latest reply on Mar 24, 2010 1:12 AM by osgood_

    First time creating CSS Layout based webpage

    TF22Raptor2 Level 1

      Hi all,

      Just wondering what the best way is to create a CSS based layout in dreamweaver. I've done website for over tens years now but I have only ever used table based layouts as they have always done what I have needed, but the CMS I am now working with unfortunatley only uses CSS based layouts.

      Any good tutorials or links would be great. 

        • 1. Re: First time creating CSS Layout based webpage
          TF22Raptor2 Level 1

          Okay I've just found dreamweaver has some default CSS layout based templates that I will be able to play with and get used to, that's a start.

          • 2. Re: First time creating CSS Layout based webpage
            brightbelt Level 1

            Hi,

              I'm using CS4 - I'm also new to CSS layouts and from what folks here recommended to me, it's better and easier for a beginner to go with a 'Fixed' template than the liquid or elastic kinds.

             

            See this thread: http://forums.adobe.com/thread/498260?tstart=120

             

            You may have already seen this - but make sure you look over the code in your template because DW Templates are full of comments that explain why it's set up the way it is and what certain CSS properties are doing for you etc. They are a great learning tool.

             

            Good Luck! Frank

            • 3. Re: First time creating CSS Layout based webpage
              osgood_ Level 8

              TF22Raptor2 wrote:

               

              Okay I've just found dreamweaver has some default CSS layout based templates that I will be able to play with and get used to, that's a start.

               

              Humm thats the last place you should start. The templates which come with DW are crap.

               

              I'd cut your teeth on these first. have a look at 8 and 9. Once you get the basics you can then alter to suit your own requirements.

               

              http://css.maxdesign.com.au/floatutorial/

              • 4. Re: First time creating CSS Layout based webpage
                TF22Raptor2 Level 1

                Why does Dreamweaver always seem to provide examples, code snippets, simple javascript code for simple things like a rollover, that seems to be written by an alien?????? It appears to always be written way over complicated and never straight up easily to allow people to see what is going on, why is that?

                • 5. Re: First time creating CSS Layout based webpage
                  TF22Raptor2 Level 1

                  This is the format of the layout I am trying to achieve. It will be a fixed width layout with liquuid height (bottom expands downward as content is added).

                  Is this layout achieveable in CSS? I have 3 border cells there that will use an image to repeat throughout those 3 cells.

                   

                  css_border.gif

                  • 6. Re: First time creating CSS Layout based webpage
                    Nancy OShea Adobe Community Professional & MVP

                    I think you want a basic 2-column layout. Then apply a repeating background image to create the illusion of borders and equal height columns.

                     

                    BEFORE FAUX COLUMNS

                    http://alt-web.com/TEMPLATES/3-col-fixed-layout.shtml

                     

                    AFTER FAUX COLUMNS

                    http://alt-web.com/TEMPLATES/3-col-white-gray.shtml

                     

                     

                    Nancy O.
                    Alt-Web Design & Publishing
                    Web | Graphics | Print | Media  Specialists
                    http://alt-web.com/
                    http://twitter.com/altweb
                    http://alt-web.blogspot.com

                    • 7. Re: First time creating CSS Layout based webpage
                      Charles Bannister Level 2

                      The main thing with this is knowing how to generally layout your DIVs.

                       

                      First have a main DIV called wrapper or container which will have all of your divs in.

                       

                      Centre this simply by setting the margin as margin:0 auto;

                       

                      From there on keep document flow in mind (left to right, top to bottom) so work from the top putting  your header in first etc.

                       

                       

                       

                       

                      Once you learn how to float and clear you pretty much have it.  (look these up).

                      • 8. Re: First time creating CSS Layout based webpage
                        TF22Raptor2 Level 1

                        Does the word FAUX stand for fixed column width in CSS????

                        • 9. Re: First time creating CSS Layout based webpage
                          Charles Bannister Level 2

                          I've honestly never heard that word (faux) before, and I'm pretty good with CSS.

                          • 10. Re: First time creating CSS Layout based webpage
                            TF22Raptor2 Level 1

                            Guys I'm going through the tutorail over:

                            http://www.adobe.com/devnet/dreamweaver/articles/css_concepts_pt6_03.html#

                             

                             


                            What does

                             

                            @charset "utf-8";

                             

                            * {
                                margin: 0;
                                padding: 0;
                                border: 0;
                            }

                             


                            nean in an externally linked css file? Its at the very top of the css file.

                            eg. <link href="CssFiles/twoColElsLtHdr.css" rel="stylesheet"  type="text/css" />

                             

                             

                            ???

                            • 11. Re: First time creating CSS Layout based webpage
                              TF22Raptor2 Level 1

                              Also guys I am trying to put a div underneath another div, despite there being a left side div that is floating left.

                               

                              css_2ndtry.gif

                               

                              Heres my code. Can this be done even? All the layout I am examining none of them appear to have a div directly undereath another div like this.

                               

                               

                              <style type="text/css">

                               

                              <!--

                               

                              body {

                               

                                  height:100%;

                               

                                  background-image: url(images/apgm_bg.jpg);

                               

                                  background-repeat: no-repeat;

                               

                                  background-position: center top;

                               

                                  background-color: #1d3c18;   

                               

                                  margin-left: 0px;

                               

                                  margin-top: 0px;

                               

                                  margin-right: 0px;

                               

                                  margin-bottom: 0px;

                               

                              }

                               

                              #container {


                                  width : 1000px;
                                  margin : 0 auto;
                                  text-align : left;
                              }

                               

                              #leftside {
                              width: 200px;

                               

                              padding: 0px 0;
                              /**to reduce float drop issues in IE6**/
                              overflow: hidden;
                              float: left;   
                              }
                              }

                               

                              #maincontent {
                              margin: 0;
                              padding: 0;
                              }

                               

                              #mainheader {
                              margin: 0;
                              padding: 0;
                              }

                               


                              #footer {
                              }

                               

                              </style>
                              <body>

                               


                              <!-- Begin Wrapper -->
                              <div id="container">

                               

                              <!-- Begin leftside -->
                              <div id="leftside">
                              this is left side
                              </div>
                              <!--end leftside -->

                               

                              <!-- Begin maincontent -->
                              <div id="maincontent">
                              this is main content

                               

                              <!-- Begin mainheader -->
                              <div id="mainheader">
                              this is main header

                               

                              </div>
                              <!--end mainheader -->

                               

                              </div>
                              <!--end maincontent -->

                               

                              </div>
                              <!-- End Wrapper -->

                               

                              </body>
                              </html>
                              • 12. Re: First time creating CSS Layout based webpage
                                osgood_ Level 8

                                Answer both questions:

                                 

                                1) * {

                                blah: blah;

                                }

                                 

                                Is a univeral selector. In your example its zeroing out all the default padding and margin that some tags are preset with. personally I don't use it prefering only to zero out the padding/margins on those tags in my layout that need it.

                                 

                                 

                                2)

                                 

                                Yes, its easy to set out the construction you want with css (see html/css code below). There is this myth with css layouts that they more difficult than they actually are to achieve. Think of the layout as a set of simple linear boxes where one container fits in another. It's a bit like building with lego.

                                 

                                <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
                                <html xmlns="http://www.w3.org/1999/xhtml">
                                <head>
                                <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
                                <title>Untitled Document</title>
                                <style type="text/css">
                                body {
                                height:100%;
                                background-image: url(images/apgm_bg.jpg);
                                background-repeat: no-repeat;
                                background-position: center top;
                                background-color: #1d3c18;  
                                margin:0;
                                padding: 0;
                                }
                                #container {
                                width: 1000px;
                                }
                                #leftside {
                                width: 200px;
                                float: left;
                                }
                                #rightside {
                                float: left;
                                width: 800px;
                                }
                                </style>
                                </head>

                                 

                                <body>
                                <div id="container">
                                <div id="leftside">This is left side</div><!--end left -->
                                <div id="rightside">
                                <div id="mainContent">This is main content</div>
                                <div id="mainHeader">This is main header</div>
                                </div><!--end rightside -->
                                </div><!--end container -->
                                </body>
                                </html>

                                • 13. Re: First time creating CSS Layout based webpage
                                  TF22Raptor2 Level 1

                                  Hi osgood thanks for showing me that, how do I get your new code to be centered on the page and for the leftside dive to expand past the bottom of the first main div? At the moment the left side div expands to the start of the second div, not all the way to the bottom of it.

                                  Yeah I can see how doing pages like this will have its benefits, but its just taking me a while to get my head around all these new terms float: clear: relative positioning: overflow: wrappers: etc etc etc when I've been so used to tables for a good 10 years. I'm a pixel my pixel designer and don't really do too many flexible/expandable/liquid website designs so the tables method served my needs over all this time. Hopefully after a bit of practice it will all sink in.

                                  • 14. Re: First time creating CSS Layout based webpage
                                    osgood_ Level 8

                                    TF22Raptor2 wrote:

                                     

                                    Hi osgood thanks for showing me that, how do I get your new code to be centered on the page

                                    Add margin: 0 auto; plus overflow: hidden; to the 'container' css selector as shown below. margin: 0 auto; centers the design horizontally in the browser window whilst overflow: hidden; makes sure the 'container' wraps itself around the 'floated' <divs> inside of it. (which you'll need for the other explanation).

                                     

                                    #container {
                                    width: 1000px;

                                    margin: 0 auto;

                                    overflow: hidden;
                                    }

                                     

                                    and for the leftside dive to expand past the bottom of the first main div? At the moment the left side div expands to the start of the second div, not all the way to the bottom of it.

                                    The leftside <div> will expand all the way down if you put more text in it. However if you have less content in it than the <divs> on the right side it wont. To overcome this issue you need to create a 'faux' column background image if you want a background colour to go all the way to the bottom and match with the rightside <div>. Attach this repeating image to the 'container' <div> as a background (see css below)

                                     

                                    #container {
                                    width: 1000px;

                                    margin: 0 auto;

                                    overflow: hidden;

                                    background-image: url(images/yourBg.gif);

                                    background-repeat: repeat-y;
                                    }

                                    • 15. Re: First time creating CSS Layout based webpage
                                      TF22Raptor2 Level 1

                                      What does this word "faux" mean exactly?

                                      • 16. Re: First time creating CSS Layout based webpage
                                        osgood_ Level 8

                                        TF22Raptor2 wrote:

                                         

                                        What does this word "faux" mean exactly?

                                        It means 'fake', 'false' You have to fake the column depth by using a repeating background image if you want them to be all the same. Css cannot do this yet like tables can.

                                         

                                        http://www.alistapart.com/articles/fauxcolumns/

                                         

                                         

                                        You can use javascript as well to accomplish this.

                                         

                                        http://www.projectseven.com/tutorials/css/pvii_columns/

                                        • 17. Re: First time creating CSS Layout based webpage
                                          John Waller Adobe Community Professional & MVP

                                          Faux is French for false or fake.

                                           

                                          The trick gives the illusion of 2 equal height columns, side by side, both partially filled with text..

                                           

                                          In reality, you have two <div>s of text finishing wherever the text in each <div> finishes, with a background image faking the look of side by side, equal height columns.

                                          • 18. Re: First time creating CSS Layout based webpage
                                            TF22Raptor2 Level 1

                                            osgood I am trying to now place a footer at the bottom on thge leftside div and obviosuly I want the left side div to fill to the footer and the right side div to also meet/fill the bottom of the footer.

                                             

                                            It's proving rather difficult. (Have tried floating etc)

                                            • 19. Re: First time creating CSS Layout based webpage
                                              TF22Raptor2 Level 1

                                              Ok just answered my own question:

                                              clear: both;

                                               

                                              and it was rather simple!

                                              • 20. Re: First time creating CSS Layout based webpage
                                                TF22Raptor2 Level 1

                                                But now trying to vertically center a line of text inside a div, that has got me boggled!!! Any help would be great

                                                • 21. Re: First time creating CSS Layout based webpage
                                                  TF22Raptor2 Level 1

                                                  line-height: with a value the same size as your div seems to have got it, so many little tricks you need to learn to do basic stuff in CSS!!! Arh!

                                                  • 22. Re: First time creating CSS Layout based webpage
                                                    TF22Raptor2 Level 1

                                                    osgood_ wrote:


                                                    The leftside <div> will expand all the way down if you put more text in it. However if you have less content in it than the <divs> on the right side it wont. To overcome this issue you need to create a 'faux' column background image if you want a background colour to go all the way to the bottom and match with the rightside <div>. Attach this repeating image to the 'container' <div> as a background (see css below)

                                                     

                                                    #container {
                                                    width: 1000px;

                                                    margin: 0 auto;

                                                    overflow: hidden;

                                                    background-image: url(images/yourBg.gif);

                                                    background-repeat: repeat-y;
                                                    }


                                                    osgood yes I can see where this would have its purpose, but what about where my left hand side colum needs an image at the very bottom of it????

                                                     

                                                    In the past I would simply vertical align the image to the bottom and have a BG image to fill the rest. With this CSS way for what ever reason my left hand side column does not reach to the length of the other to divs to the right, so I have a very annoying (blank) space on the end of it where it doesnt reach to the length of the others. (So what you were saying by using a bg to fake it won't work, because I need that very bottom image (its a design element) to be at the very bottom.

                                                     

                                                    Any other ways around it for what I am trying to achieve??? This CSS is turning into a real pain!

                                                    • 23. Re: First time creating CSS Layout based webpage
                                                      osgood_ Level 8

                                                      TF22Raptor2 wrote:

                                                       

                                                      osgood_ wrote:


                                                      The leftside <div> will expand all the way down if you put more text in it. However if you have less content in it than the <divs> on the right side it wont. To overcome this issue you need to create a 'faux' column background image if you want a background colour to go all the way to the bottom and match with the rightside <div>. Attach this repeating image to the 'container' <div> as a background (see css below)

                                                       

                                                      #container {
                                                      width: 1000px;

                                                      margin: 0 auto;

                                                      overflow: hidden;

                                                      background-image: url(images/yourBg.gif);

                                                      background-repeat: repeat-y;
                                                      }


                                                      osgood yes I can see where this would have its purpose, but what about where my left hand side colum needs an image at the very bottom of it????

                                                       

                                                      In the past I would simply vertical align the image to the bottom and have a BG image to fill the rest. With this CSS way for what ever reason my left hand side column does not reach to the length of the other to divs to the right, so I have a very annoying (blank) space on the end of it where it doesnt reach to the length of the others. (So what you were saying by using a bg to fake it won't work, because I need that very bottom image (its a design element) to be at the very bottom.

                                                       

                                                      Any other ways around it for what I am trying to achieve??? This CSS is turning into a real pain!

                                                      Without seeing the code which you are working with to date I can't say. But to get an image to stay at the bottom of your left hand side column you would have to use another background-image positioned at the bottom. This may possibly involve introducing another <div> if there is not one which is free to use for this purpose.

                                                       

                                                      Tableless css layouts are by no means perfect, they can't do a minority of things that tables could do very easily. However I personally think the benefits outweight the disadvantages and it may mean you need to rethink some design stragegy.

                                                      • 24. Re: First time creating CSS Layout based webpage
                                                        TF22Raptor2 Level 1

                                                        Hi Osgood thanks for all this help your a god send, I'm also still having some difficult vertically centering a line of text inside a div. I am trying to get my text into the middle, heres what I have.

                                                         

                                                        #footer {

                                                        padding: 0;

                                                        background-image: url(images/UI/cms_footer_1.jpg);

                                                        clear: both;

                                                        height: 37px;

                                                        font-family: Tahoma, Arial, Sans-Serif, Veranda;

                                                        font-size: 11px;

                                                        color: #FFFFFF;

                                                        /* line-height:37px */

                                                        /* display:table-cell; vertical-align:middle */

                                                        }

                                                         

                                                         

                                                        #footerleft {

                                                        height: 37px;

                                                        margin-left: 24px;

                                                        width: 350px;

                                                        float:left;

                                                        /* vertical-align: middle; */

                                                        min-height: 5px;

                                                            display: table-cell;

                                                            vertical-align: middle }

                                                         

                                                        }

                                                         

                                                         

                                                        <div id="footer">

                                                        <div id="footerleft">line of text </div>

                                                        </div>

                                                        • 25. Re: First time creating CSS Layout based webpage
                                                          TF22Raptor2 Level 1

                                                          osgood and here is my other query regarding getting the image to the bottom of the left side div while expanding that cell all the way in height to be at the save level as the main content div.

                                                          Heres the code you asked about. (you will notice a green gap after the left side div thats what I am trying to expand into while having the image at the bottom of the div.


                                                          <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

                                                          <html xmlns="http://www.w3.org/1999/xhtml">

                                                           

                                                          <head>

                                                          <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

                                                          <title>Untitled Document</title>

                                                           

                                                          <style type="text/css">

                                                          body {

                                                          height:100%;

                                                          background-image: url();

                                                          background-repeat: no-repeat;

                                                          background-position: center top;

                                                          background-color: #1d3c18;

                                                          margin:0;

                                                          padding: 0;

                                                          }

                                                           

                                                          #container {

                                                          width: 1002px;

                                                          margin: 0 auto;

                                                          /* overflow: hidden; */

                                                          /* background-color:#00FF00; */

                                                          /* background-image:url(images/UI/css_rightside_bg.jpg) */

                                                          }

                                                           

                                                          #leftside {

                                                          width: 250px;

                                                          float: left;

                                                          background-color:#FFFFFF

                                                          }

                                                           

                                                          #rightside {

                                                          width: 752px;

                                                          float: right;

                                                          background-color: #000000;

                                                          }

                                                           

                                                          #mainnav {

                                                           

                                                          }

                                                           

                                                          #mainheader {

                                                           

                                                          }

                                                           

                                                          #footer {

                                                          padding: 0;

                                                          clear: both;

                                                          height: 37px;

                                                          font-family: Tahoma, Arial, Sans-Serif, Veranda;

                                                          font-size: 11px;

                                                          color: #000000; /* line-height:37px */ /* display:table-cell; vertical-align:middle */

                                                          background-color:#FFFF00

                                                          }

                                                           

                                                          #footerleft {

                                                          height: 37px;

                                                          margin-left: 24px;

                                                          width: 350px;

                                                          float:left;

                                                          /* vertical-align: middle; */

                                                          min-height: 5px;

                                                              display: table-cell;

                                                              vertical-align: middle }

                                                           

                                                          }

                                                           

                                                          #footerright {

                                                          height: 37px;

                                                          width: 350px;

                                                          float:right;

                                                          text-align: right;/* line-height:37px */

                                                          margin-right: 24px;

                                                          }

                                                           

                                                          .imgrightalign {

                                                          /* text-align: right; */

                                                          float:right

                                                          }

                                                           

                                                          .botimgrightalign {

                                                          /* text-align: right; */

                                                          float:right;

                                                          vertical-align: bottom;

                                                          }

                                                           

                                                          .style1 {color: #FFFFFF}

                                                          </style>

                                                          </head>

                                                           

                                                          <body>

                                                          <div id="container">

                                                          <div id="leftside">

                                                            <div align="center"><br />

                                                            <br />

                                                              <br />

                                                              <br />

                                                              <br />

                                                              <br />

                                                              <br />

                                                              My white cell (trying to expand to the footer and have that image at the bottom)<br />

                                                              <br />

                                                              <br />

                                                              <br />

                                                                <br />

                                                                <span class="botimgrightalign"><img src="images/UI/css_leftside_bot.gif" alt="here is my bottom image" /></span></div>

                                                          </div>

                                                          <!--end left -->

                                                          <div id="rightside">

                                                            <div id="mainheader">

                                                            <div align="center"><br />

                                                                <br />

                                                                <br />

                                                                <br />

                                                                <br />

                                                                <br />

                                                                <br />

                                                                <br />

                                                                <br />

                                                                <br />

                                                                <span class="style1">This is my main content cell I'd like the white cell to the left to expand to the size (height) as this black one, but also to have an image be at the very bottom of the white cell</span><br />

                                                                <br />

                                                                <br />

                                                                <br />

                                                                <br />

                                                                <br />

                                                                <br />

                                                                <br />

                                                                <br />

                                                                  <br />

                                                            </div>

                                                          </div>

                                                          </div><!--end rightside -->

                                                           

                                                          <div id="footer">This is my footer</div>

                                                           

                                                          </div><!--end container -->

                                                          </body>

                                                          </html>

                                                          • 26. Re: First time creating CSS Layout based webpage
                                                            osgood_ Level 8

                                                            TF22Raptor2 wrote:

                                                             

                                                             

                                                            Hi Osgood thanks for all this help your a god send, I'm also still having some difficult vertically centering a line of text inside a div. I am trying to get my text into the middle, heres what I have.

                                                             

                                                            #footer {

                                                            padding: 0;

                                                            background-image: url(images/UI/cms_footer_1.jpg);

                                                            clear: both;

                                                            height: 37px;

                                                            font-family: Tahoma, Arial, Sans-Serif, Veranda;

                                                            font-size: 11px;

                                                            color: #FFFFFF;

                                                            /* line-height:37px */

                                                            /* display:table-cell; vertical-align:middle */

                                                            }

                                                             

                                                             

                                                            #footerleft {

                                                            height: 37px;

                                                            margin-left: 24px;

                                                            width: 350px;

                                                            float:left;

                                                            /* vertical-align: middle; */

                                                            min-height: 5px;

                                                                display: table-cell;

                                                                vertical-align: middle }

                                                             

                                                            }

                                                             

                                                             

                                                            <div id="footer">

                                                            <div id="footerleft">line of text </div>

                                                            </div>

                                                            display: table-cell; is not supported in IE7 or IE6. I think IE8 does display it to some degree. I would not use it at the moment until IE7 has disappeared and that going to be  along time yet.

                                                            • 27. Re: First time creating CSS Layout based webpage
                                                              osgood_ Level 8

                                                              TF22Raptor2 wrote:

                                                               

                                                              osgood and here is my other query regarding getting the image to the bottom of the left side div while expanding that cell all the way in height to be at the save level as the main content div.

                                                              Heres the code you asked about. (you will notice a green gap after the left side div thats what I am trying to expand into while having the image at the bottom of the div.

                                                              <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

                                                              <html xmlns="http://www.w3.org/1999/xhtml">

                                                               

                                                              <head>

                                                              <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

                                                              <title>Untitled Document</title>

                                                               

                                                              <style type="text/css">

                                                              body {

                                                              height:100%;

                                                              background-image: url();

                                                              background-repeat: no-repeat;

                                                              background-position: center top;

                                                              background-color: #1d3c18;

                                                              margin:0;

                                                              padding: 0;

                                                              }

                                                               

                                                              #container {

                                                              width: 1002px;

                                                              margin: 0 auto;

                                                              /* overflow: hidden; */

                                                              /* background-color:#00FF00; */

                                                              /* background-image:url(images/UI/css_rightside_bg.jpg) */

                                                              }

                                                               

                                                              #leftside {

                                                              width: 250px;

                                                              float: left;

                                                              background-color:#FFFFFF

                                                              }

                                                               

                                                              #rightside {

                                                              width: 752px;

                                                              float: right;

                                                              background-color: #000000;

                                                              }

                                                               

                                                              #mainnav {

                                                               

                                                              }

                                                               

                                                              #mainheader {

                                                               

                                                              }

                                                               

                                                              #footer {

                                                              padding: 0;

                                                              clear: both;

                                                              height: 37px;

                                                              font-family: Tahoma, Arial, Sans-Serif, Veranda;

                                                              font-size: 11px;

                                                              color: #000000; /* line-height:37px */ /* display:table-cell; vertical-align:middle */

                                                              background-color:#FFFF00

                                                              }

                                                               

                                                              #footerleft {

                                                              height: 37px;

                                                              margin-left: 24px;

                                                              width: 350px;

                                                              float:left;

                                                              /* vertical-align: middle; */

                                                              min-height: 5px;

                                                                  display: table-cell;

                                                                  vertical-align: middle }

                                                               

                                                              }

                                                               

                                                              #footerright {

                                                              height: 37px;

                                                              width: 350px;

                                                              float:right;

                                                              text-align: right;/* line-height:37px */

                                                              margin-right: 24px;

                                                              }

                                                               

                                                              .imgrightalign {

                                                              /* text-align: right; */

                                                              float:right

                                                              }

                                                               

                                                              .botimgrightalign {

                                                              /* text-align: right; */

                                                              float:right;

                                                              vertical-align: bottom;

                                                              }

                                                               

                                                              .style1 {color: #FFFFFF}

                                                              </style>

                                                              </head>

                                                               

                                                              <body>

                                                              <div id="container">

                                                              <div id="leftside">

                                                                <div align="center"><br />

                                                                <br />

                                                                  <br />

                                                                  <br />

                                                                  <br />

                                                                  <br />

                                                                  <br />

                                                                  My white cell (trying to expand to the footer and have that image at the bottom)<br />

                                                                  <br />

                                                                  <br />

                                                                  <br />

                                                                    <br />

                                                                    <span class="botimgrightalign"><img src="images/UI/css_leftside_bot.gif" alt="here is my bottom image" /></span></div>

                                                              </div>

                                                              <!--end left -->

                                                              <div id="rightside">

                                                                <div id="mainheader">

                                                                <div align="center"><br />

                                                                    <br />

                                                                    <br />

                                                                    <br />

                                                                    <br />

                                                                    <br />

                                                                    <br />

                                                                    <br />

                                                                    <br />

                                                                    <br />

                                                                    <span class="style1">This is my main content cell I'd like the white cell to the left to expand to the size (height) as this black one, but also to have an image be at the very bottom of the white cell</span><br />

                                                                    <br />

                                                                    <br />

                                                                    <br />

                                                                    <br />

                                                                    <br />

                                                                    <br />

                                                                    <br />

                                                                    <br />

                                                                      <br />

                                                                </div>

                                                              </div>

                                                              </div><!--end rightside -->

                                                               

                                                              <div id="footer">This is my footer</div>

                                                               

                                                              </div><!--end container -->

                                                              </body>

                                                              </html>

                                                              Contain your leftside and rightside <div>s in a wrapper <div> then use the faux background image technique to fake the leftside <div> extending to the height of the rightside <div>.

                                                               

                                                              To have an image appear at the foot of the leftside <div> wrap the left/right side wrapper in another wrapper and attach a background image to it positioned at the bottom left.

                                                               

                                                              OR

                                                               

                                                              You could make the footer <div> have a position of relative, insert an absolutely positioned <div> inside of it and move that into the required position using css.

                                                               

                                                              You have to think outside of the box a bit when using css. Things are possible if you know how.

                                                              • 28. Re: First time creating CSS Layout based webpage
                                                                TF22Raptor2 Level 1

                                                                osgood, I've also only just found that the doc type also makes a differences when rendering CSS.
                                                                I have been working in:
                                                                <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

                                                                 

                                                                but the CMS I am using uses a

                                                                <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

                                                                and there is a difference between the two when I render.

                                                                <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

                                                                as it gives quite a few horizontal space issues around images which I need to fix.

                                                                 

                                                                Do you have more knowledge about this?

                                                                 

                                                                I'll have to redesign my CSS for 

                                                                <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

                                                                What's causes the differences, tags to look out for do you know of head?

                                                                • 29. Re: First time creating CSS Layout based webpage
                                                                  osgood_ Level 8

                                                                  TF22Raptor2 wrote:

                                                                   

                                                                  osgood, I've also only just found that the doc type also makes a differences when rendering CSS.
                                                                  I have been working in:
                                                                  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

                                                                   

                                                                  but the CMS I am using uses a

                                                                  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

                                                                  and there is a difference between the two when I render.

                                                                  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

                                                                  as it gives quite a few horizontal space issues around images which I need to fix.

                                                                   

                                                                  Do you have more knowledge about this?

                                                                   

                                                                  I'll have to redesign my CSS for 

                                                                  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

                                                                  What's causes the differences, tags to look out for do you know of head?

                                                                   

                                                                  Would need to see a page with the below doctype so I can see the spaces.

                                                                   

                                                                  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
                                                                  • 30. Re: First time creating CSS Layout based webpage
                                                                    TF22Raptor2 Level 1

                                                                    os good its the same code as I was using before (in a previous post but with the different document type, and I removed a few of those tags you suggested to move.

                                                                     

                                                                    The purple areas here is where the unecessary space is created when I change the document type for whatever reason. The grey and the white areas are the image I have contained in the divs etc. Black is the background where it is supposed to be, its just those purple areas that I am trying to fix, or get them to vertically align to push upwards I guess you would call it.

                                                                     

                                                                    apgm_site.jpg

                                                                    • 31. Re: First time creating CSS Layout based webpage
                                                                      osgood_ Level 8

                                                                      TF22Raptor2 wrote:

                                                                       

                                                                      os good its the same code as I was using before (in a previous post but with the different document type, and I removed a few of those tags you suggested to move.

                                                                       

                                                                      The purple areas here is where the unecessary space is created when I change the document type for whatever reason. The grey and the white areas are the image I have contained in the divs etc. Black is the background where it is supposed to be, its just those purple areas that I am trying to fix, or get them to vertically align to push upwards I guess you would call it.

                                                                       

                                                                      apgm_site.jpg

                                                                      Can you paste the complete page code and css here. State which browser/s give this problem. Posting images really don't mean a great deal.

                                                                      • 32. Re: First time creating CSS Layout based webpage
                                                                        TF22Raptor2 Level 1

                                                                        osgood, ok here is the full code. As I said since I now have to use

                                                                         

                                                                        <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
                                                                        I now get those purple gaps (space that pushes my images apart horizontally by 2-3px). When I was using the previous transitional doc type I did not get this behaviour, but unfortunatley I now have to use the xhtml11.dtd doc type.
                                                                        I get the behaviour in FF, IE and Safari.


                                                                        <?xml version="1.0" encoding="UTF-8"?>

                                                                        <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

                                                                        <html xmlns="http://www.w3.org/1999/xhtml">

                                                                        <script type="text/javascript">

                                                                        <!--

                                                                        function MM_preloadImages() { //v3.0

                                                                          var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();

                                                                            var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)

                                                                            if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}

                                                                        }

                                                                         

                                                                        function MM_findObj(n, d) { //v4.01

                                                                          var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {

                                                                            d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}

                                                                          if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];

                                                                          for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);

                                                                          if(!x && d.getElementById) x=d.getElementById(n); return x;

                                                                        }

                                                                         

                                                                        function MM_nbGroup(event, grpName) { //v6.0

                                                                          var i,img,nbArr,args=MM_nbGroup.arguments;

                                                                          if (event == "init" && args.length > 2) {

                                                                            if ((img = MM_findObj(args[2])) != null && !img.MM_init) {

                                                                              img.MM_init = true; img.MM_up = args[3]; img.MM_dn = img.src;

                                                                              if ((nbArr = document[grpName]) == null) nbArr = document[grpName] = new Array();

                                                                              nbArr[nbArr.length] = img;

                                                                              for (i=4; i < args.length-1; i+=2) if ((img = MM_findObj(args[i])) != null) {

                                                                                if (!img.MM_up) img.MM_up = img.src;

                                                                                img.src = img.MM_dn = args[i+1];

                                                                                nbArr[nbArr.length] = img;

                                                                            } }

                                                                          } else if (event == "over") {

                                                                            document.MM_nbOver = nbArr = new Array();

                                                                            for (i=1; i < args.length-1; i+=3) if ((img = MM_findObj(args[i])) != null) {

                                                                              if (!img.MM_up) img.MM_up = img.src;

                                                                              img.src = (img.MM_dn && args[i+2]) ? args[i+2] : ((args[i+1])? args[i+1] : img.MM_up);

                                                                              nbArr[nbArr.length] = img;

                                                                            }

                                                                          } else if (event == "out" ) {

                                                                            for (i=0; i < document.MM_nbOver.length; i++) {

                                                                              img = document.MM_nbOver[i]; img.src = (img.MM_dn) ? img.MM_dn : img.MM_up; }

                                                                          } else if (event == "down") {

                                                                            nbArr = document[grpName];

                                                                            if (nbArr)

                                                                              for (i=0; i < nbArr.length; i++) { img=nbArr[i]; img.src = img.MM_up; img.MM_dn = 0; }

                                                                            document[grpName] = nbArr = new Array();

                                                                            for (i=2; i < args.length-1; i+=2) if ((img = MM_findObj(args[i])) != null) {

                                                                              if (!img.MM_up) img.MM_up = img.src;

                                                                              img.src = img.MM_dn = (args[i+1])? args[i+1] : img.MM_up;

                                                                              nbArr[nbArr.length] = img;

                                                                          } }

                                                                        }

                                                                        //-->

                                                                        </script>

                                                                        <head>

                                                                        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

                                                                        <title>Untitled Document</title>

                                                                         

                                                                        <style type="text/css">

                                                                        body {

                                                                        height:100%;

                                                                        background-image: url(../../images/ui/apgm_bg.jpg);

                                                                        background-repeat: no-repeat;

                                                                        background-position: center top;

                                                                        background-color: #1d3c18;

                                                                        margin:0;

                                                                        padding: 0;

                                                                        }

                                                                         

                                                                        #container {

                                                                        width: 1002px;

                                                                        margin: 0 auto;

                                                                        /* overflow: hidden; */

                                                                        /* background-color:#00FF00; */

                                                                        /* background-image:url(images/UI/css_rightside_bg.jpg) */

                                                                        }

                                                                         

                                                                        #leftside {

                                                                        width: 250px;

                                                                        float: left;

                                                                        background-image:url(../images/UI/css_leftside_bg.gif)

                                                                        }

                                                                         

                                                                        #rightside {

                                                                        width: 752px;

                                                                        float: right;

                                                                        }

                                                                         

                                                                        #mainnav {

                                                                        background-image:url(../images/UI/css_rightside_green_bg.jpg)

                                                                        }

                                                                         

                                                                        #mainheader {

                                                                        background-image:url(../images/UI/css_rightside_bg.jpg)

                                                                        }

                                                                         

                                                                        #footer {

                                                                        padding: 0;

                                                                        background-image: url(../../images/UI/cms_footer_1.jpg);

                                                                        clear: both;

                                                                        height: 37px;

                                                                        font-family: Tahoma, Arial, Sans-Serif, Veranda;

                                                                        font-size: 11px;

                                                                        color: #FFFFFF;

                                                                        /* line-height:37px */

                                                                        /* display:table-cell; vertical-align:middle */

                                                                        }

                                                                         

                                                                        .footer_text {

                                                                        font-family: Tahoma, Arial, Sans-Serif, Veranda;

                                                                        font-size: 11px;

                                                                        color: #FFFFFF;

                                                                        }

                                                                         

                                                                        .footer_text a{

                                                                        font-weight: bold;

                                                                        }

                                                                         

                                                                        #footerleft {

                                                                        height: 37px;

                                                                        margin-left: 24px;

                                                                        width: 350px;

                                                                        float:left;

                                                                        min-height: 5px;

                                                                            /* display: table-cell;  */

                                                                            /* vertical-align: middle  */

                                                                        }

                                                                         

                                                                        #footerright {

                                                                        height: 37px;

                                                                        width: 350px;

                                                                        float:right;

                                                                        text-align: right;/* line-height:37px */

                                                                        margin-right: 24px;

                                                                        }

                                                                         

                                                                        .imgrightalign {

                                                                        /* text-align: right; */

                                                                        float:right

                                                                        }

                                                                         

                                                                        .botimgrightalign {

                                                                        /* text-align: right; */

                                                                        float:right;

                                                                        vertical-align: bottom;

                                                                        }

                                                                         

                                                                        .contact {

                                                                        font-family: Tahoma, Arial, Sans-Serif, Veranda;

                                                                        font-size: 11px;

                                                                        color: #000000;

                                                                        }

                                                                         

                                                                        .contactmarg {

                                                                        font-size: 11px;

                                                                        font-weight: bold;

                                                                        margin-left: 20px;

                                                                        display: block;

                                                                        }

                                                                         

                                                                        .contactmargnonbold {

                                                                        font-size: 11px;

                                                                        /* font-weight: bold; */

                                                                        margin-left: 20px;

                                                                        display: block;

                                                                        }

                                                                        </style>

                                                                         

                                                                         

                                                                        </head>

                                                                         

                                                                        <body onload="MM_preloadImages('../images/UI/nav/n_01home1_on.gif','../images/UI/nav/n_02aboutu s1_on.gif','../images/UI/nav/n_03why1_on.gif','../images/UI/nav/n_04who_on.gif','../images /UI/nav/n_05mp1_on.gif','../images/UI/nav/n_06ls1_on.gif','../images/UI/nav/n_071_on.gif', '../images/UI/nav/n_08history1_on.gif','../images/UI/nav/n_091_on.gif','images/UI/nav/n_10 links1_on.gif','../images/UI/nav/n_11contacts1_on.gif')">

                                                                         

                                                                         

                                                                        <div id="container">

                                                                        <div id="leftside"><span class="imgrightalign"><img src="../images/UI/cms_logo_1.jpg" width="246" height="190" /></span>

                                                                        <span class="imgrightalign">

                                                                        <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="247" height="254">

                                                                                      <param name="movie" value="../images/ui/apgm_left_image.swf" />

                                                                                      <param name="quality" value="high" />

                                                                                      <embed src="../images/ui//apgm_left_image.swf" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="247" height="254"></embed>

                                                                                    </object></span>

                                                                              <span class="imgrightalign"><img src="../images/ui/css_flash_bot.gif" width="247" height="42" /></span><br />

                                                                            <br />

                                                                        <span class="imgrightalign">

                                                                              <table width="243" border="0" cellspacing="0" cellpadding="0">

                                                                                <tr>

                                                                                  <td width="243"><img src="../images/ui/css_contact_top.gif" width="243" height="65" /></td>

                                                                                </tr>

                                                                                <tr>

                                                                                  <td><table width="243" border="0" cellspacing="0" cellpadding="0">

                                                                                    <tr>

                                                                                      <td width="32"><img src="../images/UI/css_contact_left.gif" width="32" height="160" /></td>

                                                                                      <td valign="top"><table width="178" height="160" border="0" cellpadding="0" cellspacing="0" background="../images/UI/css_cont_bg.gif" class="contact">

                                                                                        <tr>

                                                                                          <td width="72" valign="top">

                                                                                            <span class="contactmarg">                   

                                                                                            <br />

                                                                                            line1:                   

                                                                                              line2:

                                                                                              <br />

                                                                                              line3:<br />

                                                                                            line4:</p>

                                                                                            </span></td>

                                                                                          <td width="90" valign="top"><a href="link.html" class="contact"><br />

                                                                                            line1</a><br />

                                                                                           line2<br />

                                                                                            line3<br />

                                                                                          line4 </td>

                                                                                        </tr>

                                                                                        <tr>

                                                                                          <td colspan="2" valign="top">

                                                                                          <span class="contactmargnonbold">

                                                                                          <b>line</b><br />

                                                                                              <br />

                                                                                            line2<br />

                                                                                            line3<br />

                                                                                           line4<br /></span></td>

                                                                                        </tr>

                                                                                      </table></td>

                                                                                      <td width="33"><img src="../images/UI/css_contact_right.gif" width="33" height="160" /></td>

                                                                                    </tr>

                                                                                  </table></td>

                                                                                </tr>

                                                                                <tr>

                                                                                  <td><img src="../images/UI/css_contact_bot.gif" width="243" height="42" /></td>

                                                                                </tr>

                                                                              </table>

                                                                            </span>

                                                                              <br />

                                                                              <br />

                                                                              <br />

                                                                              <br />

                                                                              <br />

                                                                              <br />

                                                                            <br />

                                                                            <span class="botimgrightalign"><img src="../images/UI/css_leftside_bot.gif" /></span>

                                                                        </div>

                                                                        <!--end left -->

                                                                        <div id="rightside">

                                                                        <div id="mainnav"><img src="../images/UI/css_navtop1.gif" width="752" height="96" /><br />

                                                                            <table width="747" border="0" cellpadding="0" cellspacing="0">

                                                                              <tr>

                                                                                <td width="7"><img src="../images/UI/nav/n_edge_left.gif" width="7" height="70" /></td>

                                                                                <td width="92"><a href="mylink" target="_top" onclick="MM_nbGroup('down','group1','home','../images/UI/nav/n_01home1_on.gif',1)" onmouseover="MM_nbGroup('over','home','../images/UI/nav/n_01home1_on.gif','images/UI/nav/ n_01home1_on.gif',1)" onmouseout="MM_nbGroup('out')"><img src="../images/UI/nav/n_01home1.gif" alt="Home" name="home" width="52" height="70" border="0" id="home" onload="" /></a></td>

                                                                                <td width="107"><a href="mylink" target="_top" onclick="MM_nbGroup('down','group1','aboutus','../images/UI/nav/n_02aboutus1_on.gif',1)" onmouseover="MM_nbGroup('over','aboutus','../images/UI/nav/n_02aboutus1_on.gif','images/U I/nav/n_02aboutus1_on.gif',1)" onmouseout="MM_nbGroup('out')"><img src="../images/UI/nav/n_02aboutus1.gif" alt="About Us" name="aboutus" width="72" height="70" border="0" id="aboutus" onload="" /></a></td>

                                                                                <td width="89"><a href="mylink" target="_top" onclick="MM_nbGroup('down','group1','whyfarm','../images/UI/nav/n_03why1_on.gif',1)" onmouseover="MM_nbGroup('over','whyfarm','../images/UI/nav/n_03why1_on.gif','images/UI/na v/n_03why1_on.gif',1)" onmouseout="MM_nbGroup('out')"><img src="../images/UI/nav/n_03why1.gif" alt="Why" name="activities" width="76" height="70" border="0" id="activities" onload="" /></a></td>

                                                                                <td width="79"><a href="mylink" target="_top" onclick="MM_nbGroup('down','group1','whcfa','../images/UI/nav/n_04who_on.gif',1)" onmouseover="MM_nbGroup('over','whcfa','../images/UI/nav/n_04who_on.gif','images/UI/nav/n _04who_on.gif',1)" onmouseout="MM_nbGroup('out')"><img src="../images/UI/nav/n_04who.gif" alt="Who" name="rd" width="86" height="70" border="0" id="rd" onload="" /></a></td>

                                                                                <td width="83"><a href="mylink" target="_top" onclick="MM_nbGroup('down','group1','mepr','../images/UI/nav/n_05mp1_on.gif',1)" onmouseover="MM_nbGroup('over','mepr','../images/UI/nav/n_05mp1_on.gif','images/UI/nav/n_ 05mp1_on.gif',1)" onmouseout="MM_nbGroup('out')"><img src="../images/UI/nav/n_05mp1.gif" alt="Meat Products" name="mepr" width="69" height="70" border="0" id="mepr" onload="" /></a></td>

                                                                                <td width="63"><a href="mylink" target="_top" onclick="MM_nbGroup('down','group1','lstock','images/UI/nav/n_06ls1_on.gif',1)" onmouseover="MM_nbGroup('over','lstock','../images/UI/nav/n_06ls1_on.gif','images/UI/nav/ n_06ls1_on.gif',1)" onmouseout="MM_nbGroup('out')"><img src="../images/UI/nav/n_06ls1.gif" alt="lstock" name="lstock" width="72" height="70" border="0" id="lstock" onload="" /></a></td>

                                                                                <td width="106"><a href="mylink" target="_top" onclick="MM_nbGroup('down','group1','gsup','../images/UI/nav/n_071_on.gif',1)" onmouseover="MM_nbGroup('over','gsup','../images/UI/nav/n_071_on.gif','images/UI/nav/n_07 1_on.gif',1)" onmouseout="MM_nbGroup('out')"><img src="../images/UI/nav/n_07grower1.gif" alt="GS" name="gsup" width="64" height="70" border="0" id="gsup" onload="" /></a></td>

                                                                                <td width="27" background="../images/UI/nav/09_blank.gif"><a href="mylink" target="_top" onclick="MM_nbGroup('down','group1','history','../images/UI/nav/n_08history1_on.gif',1)" onmouseover="MM_nbGroup('over','history','../images/UI/nav/n_08history1_on.gif','images/U I/nav/n_08history1_on.gif',1)" onmouseout="MM_nbGroup('out')"><img src="../images/UI/nav/n_08history1.gif" alt="History" name="history" width="60" height="70" border="0" id="history" onload="" /></a></td>

                                                                                <td><a href="mylink" target="_top" onclick="MM_nbGroup('down','group1','re','../images/UI/nav/n_091_on.gif',1)" onmouseover="MM_nbGroup('over','re','../images/UI/nav/n_091_on.gif','images/UI/nav/n_091_ on.gif',1)" onmouseout="MM_nbGroup('out')"><img src="../images/UI/nav/n_09r1.gif" alt="re" name="forsale" width="62" height="70" border="0" id="forsale" onload="" /></a></td>

                                                                                <td><a href="mylink" target="_top" onclick="MM_nbGroup('down','group1','links','../images/UI/nav/n_10links1_on.gif',1)" onmouseover="MM_nbGroup('over','links','../images/UI/nav/n_10links1_on.gif','images/UI/na v/n_10links1_on.gif',1)" onmouseout="MM_nbGroup('out')"><img src="../images/UI/nav/n_10links1.gif" alt="Links" name="links" width="48" height="70" border="0" id="links" onload="" /></a></td>

                                                                                <td><a href="mylink" target="_top" onclick="MM_nbGroup('down','group1','contactus','../images/UI/nav/n_11contacts1_on.gif',1 )" onmouseover="MM_nbGroup('over','contactus','../images/UI/nav/n_11contacts1_on.gif','../im ages/UI/nav/n_11contacts1_on.gif',1)" onmouseout="MM_nbGroup('out')"><img src="../images/UI/nav/n_11contacts1.gif" alt="Contact Us" name="contactus" width="71" height="70" border="0" id="contactus" onload="" /></a></td>

                                                                                <td> </td>

                                                                                <td> </td>

                                                                              </tr>

                                                                            </table>

                                                                              </div>

                                                                        <div id="mainheader">

                                                                          <div align="center"><img src="../images/ui/rwel_APGM.jpg" width="718" height="263" /><br />

                                                                            <table width="720" border="0" cellspacing="0" cellpadding="0">

                                                                                  <tr>

                                                                                    <td width="243"><a href="mylink.html"><img src="../images/ui/rAPGM_1.gif" width="234" height="211" border="0" /></a></td>

                                                                                    <td width="231"><a href="mylink.html"><img src="../images/ui/rU_Interested.jpg" width="231" height="211" border="0" /></a></td>

                                                                                    <td><a href="mylink.html"><img src="../images/ui/r_forsale.jpg" width="255" height="211" border="0" /></a></td>

                                                                                  </tr>

                                                                                </table>

                                                                                <br />

                                                                                <img src="../images/ui/footer_btm.gif" width="709" height="107" /><br />

                                                                                <br />

                                                                          </div>

                                                                        </div>

                                                                        </div>

                                                                        <!--end rightside -->

                                                                         

                                                                        <div id="footer">

                                                                        <div id="footerleft">left text goes here </div>

                                                                        <div id="footerright">right text goes here <a href="http://www.link.com" class="footer_text">link name</a></div>

                                                                        </div>

                                                                         

                                                                        </div>

                                                                        <!--end container -->

                                                                        </body>

                                                                        </html>

                                                                        • 33. Re: First time creating CSS Layout based webpage
                                                                          TF22Raptor2 Level 1

                                                                          osgood

                                                                           

                                                                          If I simply add

                                                                           

                                                                          img {

                                                                          vertical-align:top;

                                                                          }

                                                                           

                                                                          to my css, then all of my images push up and I have removed the purple space!

                                                                           

                                                                          So I now take it that

                                                                           

                                                                          img {

                                                                          vertical-align:top;

                                                                          }

                                                                           

                                                                          should be a default setting in any future css I write, do you know of any websites out there that has this kind of info listed.
                                                                          So for noobs to css like me don't have to find these little bugs/hints/tips out on our own, like default ways css behaves etc?

                                                                          • 34. Re: First time creating CSS Layout based webpage
                                                                            TF22Raptor2 Level 1

                                                                            PS osgood I am still battling to get that leftside wrapper faux background tecnique to extend my left hand div into a liquid div that equals the same height as my right had div.

                                                                            Do you think you could show us using the code I just posted, I'm really struggling to get that to do anything. I thought my leftside was already a wrapper, anyway.

                                                                            • 35. Re: First time creating CSS Layout based webpage
                                                                              TF22Raptor2 Level 1

                                                                              again heres what I am trying to accomplish with this.

                                                                               

                                                                              trying_to_accomplish.gif

                                                                               

                                                                              I was thinking now that I have that bit of code that aligns my images to the top

                                                                               

                                                                               

                                                                              img {

                                                                              vertical-align:top;

                                                                              }

                                                                               

                                                                              For what I want to do here I think I need to stop my image from taking on that peice of css, is that right?. With images how would I do that?

                                                                              • 36. Re: First time creating CSS Layout based webpage
                                                                                TF22Raptor2 Level 1

                                                                                okay got the bakcground faux image to work on the left hand side colum ( I created a bg that was the entire horizonal size of both left and right side divs) then went to the container div and added a background image with repeat to its css.

                                                                                Now to get that image to go right to the bottom of the div (left side). That thing is starting to tear my hair out.

                                                                                • 37. Re: First time creating CSS Layout based webpage
                                                                                  osgood_ Level 8

                                                                                  TF22Raptor2 wrote:

                                                                                   

                                                                                  okay got the bakcground faux image to work on the left hand side colum ( I created a bg that was the entire horizonal size of both left and right side divs) then went to the container div and added a background image with repeat to its css.

                                                                                  Now to get that image to go right to the bottom of the div (left side). That thing is starting to tear my hair out.

                                                                                  There's a lot of questions there lol

                                                                                   

                                                                                  The image align issue, although I can't be sure, only relates to the images in <td> cells.

                                                                                   

                                                                                  <td>'s by default have a setting of align-middle so therefore you would see gaps and spaces appearing unless you set the contents within the <td> cell to vertical-align: top;

                                                                                   

                                                                                  td {

                                                                                  vertical-align: top;

                                                                                  }

                                                                                   

                                                                                  The way to get an image to always sit at the bottom of the leftside is to wrap the leftside and rightside <divs> in their own wrapper and use a background image positioned right, bottom attached to it. However this means that the rightside content must have enough content in it to push the wrapper down to show the image. If the rightside content is in anyway shorter than the leftside content the image will only be partially shown or not at all. In that instance you would need to add padding bottom to the leftside <div> to push it down. This can be added on specific page where this occurs.