SitePoint Sponsor

User Tag List

Results 1 to 14 of 14

Threaded View

  1. #1
    SitePoint Member
    Join Date
    Jun 2013
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Simple pages with columns - issues with page border and column length/colour

    Hi there, I have created two basic web sites for my company, which I hope to make more sophisticated in the medium term. They follow a two column layout, the navigation bar on the left and the main column on the right for the page text. The page is 980px wide, the left navigation bar is 180px wide (and light blue), and the right column is 650px wide with a margin of 75px either side of it. There is no page border so the lines are of the page are somewhat defined by the background shading colour of the left column presently.

    Here is the css for the relevant elements in the CSS stylesheet.
    Code:
    html
    {margin:0;
    padding:0;}
    
    body
    { padding:0;
      margin:0;
      width: 980px;
      margin-left: 0px;
      background-color: #FCFCFC;
      color: #000000;
      link: #0000FF;
      line-height:1.40;
      font-size: 0.9em;
      font-weight: normal;
      font-style: normal;
      text-transform: none;
      text-align: left;
      font-family: Verdana;}
    
    span
    { overflow: hidden;}
    
    #columns .left 
    { width: 180px;
      background-color: #EEF3FD;
      float: left;
      padding: 0%;}
    
    #columns .right 
    { width: 650px;
      margin-right: 75px;
      margin-left: 75px;
      float: right;
      padding: 0%;}
    On the HTML page, in the <body>, I have used <span> to define the columns.

    Code:
    <span id="columns">
    
    <span class="left column">
    ....images, links, search box etc....
    </span>
    
    <span class="right column">
    ...Heading, paragraphs, images, etc....
    </span>
    
    </span>
    I have been unable to create a page border using 'border' under 'body' or 'html' in CSS. All that seems to happen when defining a border under 'body' is that I get a border appearing around each column. This wouldn't be so bad if I didn't have the left and right margin in the right column, as what actually is seen is a border around two columns with a gap in between. I guess if I got rid of the margins from the right column and implemented the margins according to <p> elements etc. it might be a workaround but that's a messy way of achieving the result, and I still end up with a line dividing/differentiating the columns whereas I want to achieve that using background colour rather than a line as it looks better. Any suggestions please? Should I try to create some kind of element to put the columns inside of and then create a border around that to create a page border type effect? I want to avoid using a table!

    I have used background colour to colour the left column. However, the colour only extends down as far as the last line of text or line break, and I have the classic conundrum of wanting the left column to look as long as at least the end of the text in the right column on the longer pages. I noted a few articles on how to achieve this on the web but they went over my head so in the end I implemented a workaround, which was to insert multiple <br> elements to make the blue colour in the left column extend down to where I want it (roughly). Any suggestions as to how to accomplish this easily (without resorting to a table)? If I had a page border, then I'd want the colour to extend down to the bottom page border. I tried to create a page defining effect using a different background colour in each of the 2 columns (to obviate the need for a page border), but the net result was that a) both columns didn't line up exactly and b) the left margin of the right column wasn't coloured - so not a great workaround.

    Any input is greatly appreciated! Many thanks!
    Last edited by Paul O'B; Jun 23, 2013 at 07:52. Reason: code tags added


Tags for this Thread

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
  •