Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 4 of 4
  1. #1
    Senior Member
    Join Date
    Apr 2005
    Location
    Hatfield, England
    Posts
    855
    Member #
    9790
    I have a variable width website. I am having a little difficulty with the content border. The content is rapped in a stylish container. I have separated this into 8 parts. Top left, Top, Top Right, Right etc.

    Everything has fallen into place nicely apart from the Right side of the container.
    HTML Code:
    <div id="ContentLeft"> --- Left Border
    <div id="Content"> --- Styling for Content
    <div id="ContentRight"> --- Right Border
    	<div id="ConT-Left"> </div> --- Top Left Corder
            <div id="ConT-Center"> </div> --- Top Border using repeat-x
    	<div id="ConT-Right"> </div> --- Top Right Corner
    
    	<div class="Center"> asdasd</div> --- Start of Content
    </div>
    </div>
    </div>
    The problem I am having is making the Right border stretch down with the content and actually be on the right of my content. If the ContentRight div is not a rapped around the content then it will not stretch down the page with the left border. However while it is a content rapper I cannot add any padding or a margin to make it sit on the right.

    My HTML may be wrong here, however I see no other place the ContentRight div can go and still stretch down the page.

    CSS
    Code:
    #ConT-Left { background:url(images/JasonStanleyDesign_ConTL.jpg) no-repeat; width:10px; height:10px; float:left;}
    #ConT-Center {background: url(images/JasonStanleyDesign_ConTC.jpg) repeat-x;width:96%; height:10px; float:left;}
    #ConT-Right {background:url(images/JasonStanleyDesign_ConTR.jpg) no-repeat; width:10px; height:10px; float:left;}
    
    #ContentLeft {background:url(images/JasonStanleyDesign_ConL.jpg) repeat-y;}
    #ContentRight {background:url(images/JasonStanleyDesign_ConR.jpg) repeat-y;}
    Has anyone got any ideas on how to make this work? Has anyone done this before? Help!

  2.  

  3. #2
    Senior Member paintingtheweb's Avatar
    Join Date
    Jul 2007
    Location
    Las Vegas
    Posts
    128
    Member #
    15503
    can you post a link? Or is it the jasonstanly.co.uk one? If so I'm not seeing what it is you're mentioning....

  4. #3
    Senior Member
    Join Date
    Jun 2005
    Location
    Atlanta, GA
    Posts
    4,146
    Member #
    10263
    Liked
    1 times
    I'm not 100% clear on what it is you mean, but can you use [minicode]background-position[/minicode] to achieve what you're trying to achieve?

  5. #4
    Senior Member Shani's Avatar
    Join Date
    Nov 2004
    Posts
    1,140
    Member #
    8171
    Has this been resolved?

    I am not 100% sure I understand the question, a link would help, but...
    Two things look off to me:
    Quote Originally Posted by perad
    The problem I am having is making the Right border stretch down with the content and actually be on the right of my content. If the ContentRight div is not a rapped around the content then it will not stretch down the page with the left border. However while it is a content rapper I cannot add any padding or a margin to make it sit on the right.
    In the CSS for ContentRight, you are not setting the background-position. That may resolve the positioning within the div issue.

    Another thing, to maintain size, you may want to change the HTML and make both the left and right sides be INSIDE the content:

    HTML Code:
    <div id="Content"> --- Styling for Content
      <div id="ContentLeft"> --- Left Border
        <div id="ContentRight"> --- Right Border
    	<div id="ConT-Left"> </div> --- Top Left Corder
            <div id="ConT-Center"> </div> --- Top Border using repeat-x
    	<div id="ConT-Right"> </div> --- Top Right Corner
    
    	<div class="Center"> asdasd</div> --- Start of Content
        </div>
      </div>
    </div>
    or maybe even:
    HTML Code:
    <div id="Content"> --- Styling for Content
      <div id="ContentLeft"> --- Left Border
    	<div id="ConT-Left"> </div> --- Top Left Corder
      </div>
    
      <div id="ConT-Center"> </div> --- Top Border using repeat-x
    
      <div id="ContentRight"> --- Right Border
    	<div id="ConT-Right"> </div> --- Top Right Corner
      </div>
    
      <div class="Center"> asdasd</div> --- Start of Content
    </div>
    Shani

    I have an eye for detail like you'd never believe.


Remove Ads

Posting Permissions

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

Search tags for this page

css variable width border

Click on a term to search for related topics.
All times are GMT -6. The time now is 11:59 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com