Double column setting layout (Width of the main is flexible)

It explains the method of making the page divided right and left thinking it is useful for making the homepage made a double column setting, and no never specifying the width on the homepage.

The width of a right article is made without specifying it specifying the width in the part at the left of this page for 170 pixels. Please change the width on the page and look at operation by putting out the favorite to the left and changing the width. The text character is sure to seem for the width of a right article to change in proportion to the width of a browser without a horizontal scroll.

Method of laying out my HP before

I used the frame or had made the homepage without using the steps class at all up to now. Otherwise, the table is used when the steps class is done or, it will lay it out with Style Sheet (CSS).

The display of the page slows, and generally, it is necessary to change all pages, and it becomes very troublesome at the change in the layout if the entire page is enclosed in the table.

Moreover, if neither the width on the page nor the height of the header were never specified when laying it out with Style Sheet, it was not possible to lay it out well.

I was the most unpleasant in the absolute specification of the width on the homepage. However, because the page divided right and left was able to be made well even if the width on the main page is never specified while trying and erring, it introduces it.

The double column setting method in the right and left (The width of the left is fixed)

I did not succeed though I was going to make the page of a right and left column by using the float function with Style Sheet.

The opposite existed though it made several times referring to the site of making it to good as it did not go well in other browsers even if it went well in Internet Explorer, too. If the width on the page was absolutely specified of course, it was possible.

The steps class is laid out by using float, it turns to the image round the text, it crowds, and when it releases including the turn with clear:both, float is released. Therefore, be not to be able to use release when the float is used including the turn of the substance image.

After all, fix the width on the page in the left side part, and the reading position It absolutely specified it with position:absolute. A right main page was able to display it well only by specifying an upper and lower, right and left margin.

Content of HTML file

The main part and the side part are enclosed with the DIV tag respectively as follows, and the display place is specified with id.

<div id="main">main part (right post)</div>
<div id="side">side portion (left-hand menu and ads)</div>

The HTML file is described in this order. It is very effective in SEO (search engine optimization) to bring the left-hand segment behind the file like this. Parts not important other than the text are basic of SEO bringing behind. Moreover, it lost it because there should not be from the viewpoint of SEO the menu on each page by you.

Moreover, I think it is good for the person whom the text's previously coming sees because of a browser that doesn't correspond to Style Sheet (CSS).

Content of external style sheet (CSS)

It describes it in the external style sheet as follows.

#main {margin:0 10px 10px 180px;}
#side {width:160px;position:absolute;top:5px;left:5px;}

The main part took the blank of 180 pixels below up by this example by ten pixels 10 pixels and left 0 pixels and right, and the width was not specified. The blank of ten pixels was made right because it wanted to give room to a right edge a little more.

A left advertising part took the blank of five pixels on and left, specified the width, and 160 pixels and the display positions of assumption were specified absolutely.

Left margins in a right part are 180 pixels, a right margin displays the width of a browser because the maximum widths of the advertisement of 10 pixels and right parts are 728 pixels, and a horizontal scrollbar is displayed below about 920 pixels. If the advertisement is disregarded, the homepage can be read without trouble even by the width less than it.

Moreover, the blank and padding seem to be different because of the standard according to a browser. The person who is anxious about the fine detail thinks that you should reset a related element to CSS to arrangement and use it.

The external file is taken by using PHP or SSI.

After the external file is taken by using PHP or SSI and it knows the menu is made, and there is a method of making the page that inserts the affiliate program, this method is adopted.

After coming to have used this method, it became very easy to manage the file. It is because it becomes easy to maintain the menu and the affiliate script inserted in each page.

Especially, each page is made a full page and common file because it is quite the same, include is done, and a left advertising page is taken.

When the page made thus is displayed, and the width of a browser is changed, the width of the display becomes the best according to it. It is very good feeling. However, such a small thing doesn't worry though the display is a little different according to a browser.

There is not a problem even if the size of the character is changed either. Side should not scroll basically to read the text character.

Side is sure not to have to scroll to read the text character even if the width of a browser narrows considerably.

Method of specifying the maximum value never specifying width on homepage

It is the one that the design collapses very much when the width grows too much if the homepage is made never specifying the width on the homepage. Then, the maximum value of the width on the homepage was specified.

A right part specifies max-width with CSS on my homepage as follows. If the left-hand segment etc. are included, it doesn't become more than about 920 pixels.

#main {max-width:730px;margin:0 10px 10px 180px;}

Below 920 pixels, the width becomes small in proportion to the width of the display. It is very good feeling. It is possible to display it well also with a standard mode, Firefox, and Opera of Internet Explorer 7(IE7). The maximum value of the width becomes invalid in an interchangeable mode of IE7. The page is made and see that separately about interchangeable to a standard mode, please.

Max-width can be used even with IE before IE6. (minmax.js use)

There is a method by which max-width can be used even with IE before IE6. The minmax.js library where the use of the property of min-width max-width min-height max-height is enabled is downloaded, the following setting is done in the head tag, and minmax.js is called.

<script type="text/javascript" src="minmax.js"></script>

The capacity of the file of minmax.js exists this method, and there is about 4-5kB, and is a fault to which it takes time for download when this is called on each page.

Max-width can be used even with IE before IE6. (* html Huck)

Another method by which max-width can be used even with IE before IE6 exists. In a standard mode since Internet Explorer 7(IE7), Firefox, and Opera, above-mentioned CSS is applied. It is a method to apply by adding to CSS for IE6 and using the expression method of JavaScript.

The expression method is disregarded in other browsers in a peculiar one to IE, and uses the one to read only to IE4-6 of "* html" star Huck. Because I was a standard mode, additional specification was done as follows.

* html #main {width:expression(document.documentElement.clientWidth > 910? "730px":"auto");}

Please give to me as "document.body.clientWidth" in an interchangeable mode of IE "document.documentElement.clientWidth" in a standard mode of IE. When it makes a mistake in this, it doesn't operate well.

Moreover, the meaning of the numerical value of [clientWidth > 910? "730px"] is a meaning "Make a right part 730 pixels when the width of a browser of the display is wider than that of 910 pixels". (910-180=730)