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

HTML & CSS
1

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.



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.


<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!

2

Hi, Welcome to Sitepoint :slight_smile:

The first thing to address is using the correct elements for your html. You have chosen to use a span for the columns but spans are inline elements and can only contain other inline elements and are not suitable (or valid) as containers for block content. Spans are inline elements and cannot have dimensions applied to them and although you could set them to display;block the rules of html cannot change and they still are not allowed to hold block content.
You just simply need to use a div instead. :slight_smile:

The second problem is that you have used the body for centering your layout and while that is a valid technique more often than not it leads to problems and bugs that can be avoided by using a normal container element instead. You already have #columns in place so use that as the centred container instead.

Regarding the equalising columns then that is beast accomplished using the display:table-cell approach (supported in ie8+) and will allow for natural equal height columns without the bad semantics of using a real table.

It’s hard guess at what you want your layout to look like but here is a rough version using display:table as mentioned above.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
h1, h2, h3, h4, h5, h6, p { margin:0 0 1em }
html, body {
	padding:0;
	margin:0;
}
body {
	background: #FCFCFC;
	color: #000;
	line-height:1.4;
	font-size: 90%;
	font-family:Verdana, Geneva, sans-serif;
}
a { color: #00F }
#columns {
	width: 980px;
	margin:0 auto;
	display:table;
}
.column {
	display:table-cell;
	vertical-align:top;
}
.left {
	width: 180px;
	background: #EEF3FD;
}
* html .left { float:left; }/* ie6*/
*+html .left { float:left; }/* ie7*/
.right {
	width: 650px;
	background:red;
	border-right:75px solid #fcfcfc;/* body background:color */
	border-left:75px solid #fcfcfc;/* body background:color */
}
* html .right {/* ie6*/
	float:right;
	margin:0 75px 0 0;
	display:inline;
	border:none
}
*+html .right {/* ie7*/
	float:right;
	margin:0 75px 0 0;
	border:none
}
</style>
</head>

<body>
<div id="columns">
		<div class="left column">
				<p>....images, links, search box etc.... </p>
		</div>
		<div class="right column">
				<h1>Heading</h1>
				<p>...Heading, paragraphs, images, etc.... </p>
				<p>...Heading, paragraphs, images, etc.... </p>
				<p>...Heading, paragraphs, images, etc.... </p>
				<p>...Heading, paragraphs, images, etc.... </p>
		</div>
</div>
</body>
</html>

Note that I have used your ids and classes for ease of your identification but they are not very semantic and #columns would be better named as #wrapper or #outer and the columns could be renamed as #sidebar (for the left column) and #main as the right column. Class names and ids should not be presentational but should refer to their function.(e.g. don’t say things like “red-highlight” but instead say something like “warning-message”.)

Hope that’s of some use anyway :slight_smile:

3

Thanks very much for the input Paul! Really appreciated. I will have to work on implementing these suggestions over the next couple of days. I originally elected to use <div> to define the columns as per the beginner’s guide to creating column layouts I followed on the web but it was created an extra line space at the top of the screen on each page which didn’t work with my non-bordered page layout so I changed it to <span> - clearly with undesired consequences!

4

Hi,

What you probably experienced was a default top margin on an element collapsing onto the parent and moving the parent down. Collapsing margins can cause unexpected consequences until you understand how they work.

Remember also that a lot of elements have default margins (or padding in some cases) applied by the browsers so you need to take control of those also which is why most people use a simple reset before they start coding (more info here).

5

Thanks! It was good to learn about collapsing margins.

I decided to go incorporate a normalize.css stylesheet into my main css file for all the pages. Needed some mild tweaks to where there was duplication. Do you think this is better practice to use rather than a global reset of everything? I guess it doesn’t matter if you keep the normalize.css file separate or incorporate it into a common css file for all pages - the former makes for a longer css file but means I don’t have to reference the normalize file on each html page. Cheers!

6

Everyone has their view on resets but I tend to wrote my own much shorter version based on the most common elements and just include it at the top of the main stylesheet.

7

Hi Paul, I spent some time tidying up my css code, deleted a large amount of the normalize commands that I didn’t use on the site, and renamed the <div>s; then moving onto trying to fix the column issues.

I couldn’t get the ‘display: table’ and ‘display: table-cell’ to work as you’d shown it implemented above. It didn’t seem to make any difference. Not sure why. I did scan the code to see if there was a reason the display method didn’t work but couldn’t figure it out. You don’t have any ideas do you please?

I noticed an article on 2 column layouts which solved the problem by creating a footer and by making the wrapper colour the same as the sidebar colour, so if the sidebar links and text weren’t as long as the main page (right column), then that sidebar column background colour would match the length of the main page.

The only problem with this is that it’s not an elegant solution and also if you have more than 2 columns, each a different colour, it won’t work. Also on those pages where the main page is shorter than the sidebar, you have to add spaces (like I did before). At least I got it working for now, albeit with a messy workaround (but not as messy as before!)

EDIT: I just spotted a 3 column template of yours mentioned on another thread. Will try to figure out how you did it. The main differences seem to be the use of ‘z-index’, ‘display’, ‘position’ and ‘left’.

http://www.pmob.co.uk/temp/3colfixedtest_4.htm
I noticed in the code you provided above that you used ‘border’ to create space either side of the text in the main column. I ended up using ‘padding’. That was the same colour as the main page which was what I was after, rather than having a background colour in between the two columns. Do you think it makes any difference which one uses (as a general coding practice)?

Thanks again for the input!

Best

Patrik

8

Here’s a excerpt from my revised css code. I haven’t implemented the IE6 and IE7 parts you listed above yet, need to study those and understand how they are laid out.

body, html
{ padding:0;
margin: 0;
color: #000000;
background-color: #a7a09a;}

#wrap
{ width: 980px;
margin: 0 auto;
background-color: #EEF3FD;
link: #0000FF;
line-height:1.40;
font-size: 0.9em;
font-weight: normal;
font-style: normal;
text-transform: none;
text-align: left;
margin-top: 1.8em;
margin-bottom: 1.8em;
font-family: Verdana, Helvetica, Arial, sans-serif;}

#header
{ background: #EEF3FD;
width: 980px;
height: 1.8em;}

#sidebar
{ width: 140px;
background-color: #EEF3FD;
float: left;
padding-left: 20px;
padding-right: 20px;}

#sidebar p
{padding-left: 15px;}

#sidebar form
{padding-left: 10%;}

#main
{ width: 650px;
background-color: #FCFCFC;
float: right;
padding-left: 75px;
padding-right: 75px;}

#footer
{ background: #EEF3FD;
clear:both;
width: 980px;
height: 1.8em;}

9

PliSsKen,

First a request, please read these guidelines for posting code:
http://www.sitepoint.com/forums/showthread.php?1041498-Forum-Posting-Basics.

The CSS in your previous message has no accompanying HTML so we cannot be sure how it is being applied. It is most helpful if you post complete working examples of your code as explained in the above guidelines.

You mentioned that Paul’s example code did not work for you. I notice that in your last post, the CSS is full of IDs, no classes. Paul’s code uses mostly classnames. Is it possible that you did not catch that distinction when you tried his code?

The code that Paul posted is a complete standalone page. Copy it to a file and run it exactly as it is. It should work. If your page does not work when you copy and paste excerpts of Paul’s code into your existing code, then the problem is not Paul’s code; rather it is the way in which it is being inserted into your existing page.

Context matters.

Hope this is helpful.

10

Hi Ronpat

Thanks - I can see that posting the code in this format makes it much easier for others to view the code and to troubleshoot it. Paul’s code did indeed work, my mistake was not tweaking my own code with all the important selectors and attributes. Having familiarised myself better with these and properly tweaking my old web site code, I got it to do exactly what I wanted, so thanks again! :slight_smile:

I have a quick question for Paul on the code he very kindly provided.

a { color: #00F }

I notice, Paul, you made all links a fixed colour, whether visited or unvisited. Would you normally implement it like this on your own web sites?

I can see that it would have benefit in the sidebar to keep it looking fresh (I’m using plain links in the sidebar, no buttons, graphics or frills). I have previously used the link colour defaults and it looks rather awful IMO to have visited coloured links in the sidebar/navbar. I have looked at a few professional web sites and their sidebars and nav bars don’t change colour after clicking on them but then they tend to use more professional looking buttons and tabs etc.

However, in the main body text of the pages of the web site (the main text frame), where links are inside paragraphs etc., I’m thinking it might be better to have visited links a different colour, as is the browser default behaviour, to avoid confusing people and having them revisit visited pages by accident.

What do you think? Do you have any particular preferences in this area at all? Or do you think it depends on the site?

Many thanks!

11

I would normally set the default link states in a small reset at the top of the page.

e.g.


a{ color:red}
a:visited{color:orange}
a:focus{outline:1px dotted #ccc}

However for menus used for navigation and the like I would not set a visited colour as that would look a bit messy and spoil the menu. Visited links are best used in blocks of text so you can see which links have been clicked or perhaps where you have a list of off site links so you can see which ones you have visited.

Main menus and navigation usually don’t have visited links. (And just stick to using the color property for visited links.)

12

I support a simple read-only informational web site for a club. The textual columnar menu uses the default link/visited colors. The rationale is simple enough… provide feedback to the users, however occasionally they may visit, showing which links they have visited and which have been updated since their last visit so they are aware that new information exists.

If I were managing a business site, I would want visitors to revisit every page as may times as possible with the hope that they might find something to buy :slight_smile: . Likewise, a read-only reference site (dictionary, etc) whose content is not apt to change might not want to color its links.

With the above examples in mind, I would suggest that the coloring of links depends on whether or not it is useful/beneficial to provide feedback to the user.

13

I don’t suggest link fixed colors , stick with the general.

14

Hi all, sorry for the late response. Thanks for all the replies.

It is odd, news sites tend to have fixed colours across the entire site, makes it very hard to navigate.

In the end, I decided to compromise and go with fixed colours only for the main sidebar links but non-fixed colours for all the other hyperlinks on the pages and other menus.