SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Zealot GHicks's Avatar
    Join Date
    Oct 2003
    Location
    Prescott Valley, Arizona, United States
    Posts
    135
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Using images with float for background border (2 related issues)

    OK, I am sure I am just mising something so ridiculously simple... but I can't for the life of me figure out what it is. I am working on a site that has a custom fade border image. So I have 4 images to lay it all out (5 actually), one is the header image, one is the footer, then I have a left and right for the main body, each 5px tall that I repeat-y. (The 5th image is a combination of the left and right that I can use across the page which is fixed width as per the clients request).

    So I have 2 columns in the main body section floated left and right, but when column A is longer than column B the border image doesn't go all the way down column B. I know I've addressed this before, but it was awhile ago (and not sure if that time I was using an image like this). How do I get both columns to fill with the outside border image to match the column lengths?

    Secondly (and this might be a solution to the top issue) when I use the full width image as a background in a div it doesn't show up at all. At least as far as I am seeing. I'm including code and a few images to hopefully make this clear, but if it isn't just ask and I'll straighten up my lack of detail in explaining this.

    Thanks! The forums here are the best resource any web designer could ever hope for!

    Greg

    border-body.jpgborder-bottom.jpgborder-left.jpgborder-right.jpgcssborders.png

    Here is the code for my files:
    TEST.HTML
    Code:
    <html>
      <head>
        <link rel="stylesheet" href="test.css" type="text/css" />
      </head>
      <body>
        <div id="wrapper">
          <div id="header">
            &nbsp;
          </div>
          <div id="mainbody">
            <div id="aside">
              <h2>
                <br /><br /><br />
                This is the ASIDE area
                <br /><br /><br />
                <br /><br /><br />
                This is the ASIDE area and it is taking up all the space it needs and will wrap the text when it reaches the limit of the page width
                <br /><br /><br />
                <br /><br /><br />
                This is the ASIDE area
                <br /><br /><br />
              </h2>
            </div>
              <div id="content">
                <h2>
                  <br /><br /><br />
                  This is the CONTENT area
                  <br /><br /><br />
                  <br /><br /><br />
                  This is the CONTENT area and it is taking up all the space it needs and will wrap the text when it reaches the limit of the page width
                  <br /><br /><br />
                  <br /><br /><br />
                  This is the CONTENT area
                  <br /><br /><br />
                </h2>
              </div>
          </div>
          <div id="bottom">
            <h2>
              This is the bottom text
            </h2>
          </div>
              <div id="footer">
                &nbsp;
              </div>
            </div>
      </body>
    </html>
    TEST.CSS
    Code:
    body {
      background: #043520;
    }
    
    h2 {
      text-align: center;
      vertical-align: middle;
    }
    
    #header {
    	background: url(images/aag-logo.jpg);
        height: 202px;
    }
    
    #wrapper {
    	margin: auto;
    	width: 860px;
        background: red url(images/border-left.jpg) repeat-y;
    }
    
    #aside {
      display: block;
      float: left;
      width: 240px;
      border-radius: 15px;
      margin: 10px 25px;
      background: #cec2b4;
      background-position: left 100%;
    }
    
    #content {
      display: block;
      float: right;
      width: 535px;
      padding-right: 25px;
      background: #ffffff url(images/border-right.jpg) repeat-y;
      background-position: right 100%;
    }
    
    #mainbody {
      background: green;
    }
    
    #bottom {
      color: blue;
      clear: both;
      background: green url(images/border-body.jpg) repeat-y;
    }
    
    #footer {
      clear: both;
      background: url(images/border-bottom.jpg) no-repeat;
      height: 102px;
    }
    Last edited by Paul O'B; Nov 5, 2011 at 10:55. Reason: code tags added

  2. #2
    SitePoint Zealot GHicks's Avatar
    Join Date
    Oct 2003
    Location
    Prescott Valley, Arizona, United States
    Posts
    135
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Figured out part of it...

    OK, I KNEW as soon as I asked for help something would click. Taking a closer look at my graphics I realized my whitespace in the center didn't match which is why it APPEARED the image wasn't showing. I fixed that and now am using the fixed width image across the page so I don't have the problem with left and right column heights not filling the background image all the way down.

    I would like to know if there is a solution for that so in the future if I did a design like this but not fixed width I could deal with it.

    Thanks a bunch guys (and gals!)

    Greg

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,803
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    If you are talking about equal columns then I have a run down here of techniques here which cover fixed and fluid columns. It starts to get a bit more complicated with fluid columns but it is possible.

  4. #4
    SitePoint Zealot GHicks's Avatar
    Join Date
    Oct 2003
    Location
    Prescott Valley, Arizona, United States
    Posts
    135
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm not sure if those solutions will do what I was referring to. I have 2 columns, with a liquid width layout. Either column could extend further down with content than the other, no matter which column ends up being longer I want the opposite column to fill itself with the same background image (pushed to the columns outside border) to allow a multi color blend from the content background to the full page background.

    I'm probably not explaining this so anyone even understands what I am referring to, but maybe someone will understand gibberish. (-:

    Greg

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,803
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    The demos in the example I posted will allow for multiple fluid and equalising backgrounds that match the content of the longest column.

    If you post a rough drawing of what you mean I can show an example.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •