Friday Sep 26, 2008

About CSS, two column page

I noticed that my home page web site suffered from the same problem that the public blog used to, it didn't have a width constraint and as the browser grew to full screen size the content pane gets wider and wider making paragraphs harder to read. Like this, if you look hard.

my old site

In the article Fixing my blog theme..., on this blog I described how I implemented automatic margins using a fixed width and <CENTER> tag. davelevy.info does not use tables for formating its page and for some reason, the technique didn't work, although this may have been due to a fault in my code. Anyway, I now have a better answer.

Bluerobot, suggests using

margin: auto;

as the technique for centering the document object. From my previous work, I know I want to specify a fixed width and reckon that 1000px is a good fixed width for the document. I havn't explored if amending the <BODY> rule has the effect I want, since while I did apply the rules to the BODY tag, I need a whole page encapsulating DIVision for other reasons and my current solution is to apply the CSS sub-rules to that DIVISION's rule. The old page had three divisions, a banner/header, main content and the menu. Apart from the exterior automatic margins the second part of the problem is to ensure that the positional rules for the three divisions work correctly, most importantly that the positional rules inherit the page constraints we are defining.

This tutorial at http://www.barelyfitz.com, explains how to use relative and absolute position attributes to do what's required. I tested it with the following code,

.outer {
    position: relative;
    width: 500px;
    margin: auto;
}
.inner {
    position: absolute;
     top: 10px;
    right: 20px;
    width: 250px;
}

The BODY section contains,

<DIV STYLE="background-color: gray" CLASS="outer">
<P>Outer</P>
<BR><BR>
<DIV CLASS="inner" STYLE="background-color: #0080C0">
<P>Inner</P>
</DIV>
</DIV>

and this looks like this,

screenshot

the key thing I had to learn was that the encapsulating division needs to be defined as relative, and the interior object is then defined as absolute and the locational parameters in the .inner i.e. top & right are then absolute within the .outer division. Does this make sense? I have underlined the position attribute values above. The other key lesson is to learn that CLASS and ID attributes are different. On my home site, I use IDs throughout; I was advised to use them originally.

So I need a new DIVision, this is called #Page and associated with the division via the ID attribute

#Page {
    margin: 0px auto;
    width: 1000px;
    position: relative; }

I have moved the location breadcrumb into the Header/Banner division, but otherwise left the #Header division alone, it inherits the width from #Page; it is encapsulated bt tghe #Page DIVision. The #Content DIVision I have left alone, and is placed in the default location, which is within #Page.

The #Menu division rule has had the following lines added

position: absolute;
top: 75px;
right: 20px;

The page structure is as follows

<DIV ID="#Page">
    <DIV ID="#Header"></DIV>
    <DIV ID="#Content"></DIV>
    <DIV ID="#Menu"></DIV>
</DIV>

which is what's wanted, a nice list of html content, with all the look and feel held elsewhere, just paragraphs, links, and division statements. Actually the banner is a table still, but now I have a fixed width, I can work on making an image file. The outstanding job is to work out how to create and name a rule for the paragraph containing the breadcrumb trail.

davelevy.info

and this is what the index/home page looks like. You can see the two whaite space margins either side of the page. I have briefly tested it with Opewra, Firefox and Explorer.

tags:

About

DaveLevy

Search

Archives
« April 2014
MonTueWedThuFriSatSun
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
    
       
Today