3. How to first display the content in the middle column in the column layout

Today, KESO said that for a page with three columns on the left and right, such as home.donews.com, what users want to see most is the information in the middle column, and the navigation portal for the website information in the left and right columns, therefore, the column information is the most important, and the page display sequence should take precedence over the left and right columns. Alternatively, you can give priority to the display of the most important information on a page over other elements on the page. This is true for the layout of columns 3 or 2.

The browser display page is a line of code executed in order, that is to say, the first line of the code is displayed, and the layout of the three columns in the left middle right is designed, the code is either written from the left --> Middle --> right, or from the right --> Middle --> left to achieve the effect that KESO says, the first thing to write is the code in the middle column. So I first defined a DIV with id = m and padding-left: 150px, which is used to set the position of 140PX in the left column, then, a DIV with id = middle is nested in this DIV. I use the position: absolute attribute (absolute positioning), and then define the left and right columns. A bad thing about the position: absolute attribute is that like the layer in photoshop, its automatic extension does not lead to the extension of the entire layout, so it will cover some page elements, for example, we usually write some copyright information at the bottom of the website. If this method is used to display the middle column first, if it is not processed, the information will be overwritten. The solution is to use javascript to automatically extend the height of the left and right columns along with the middle column.

Below is the code for this implementation. If you are interested, you can COPY it back and try it. You are also welcome to leave a message.

BTW: this time, with Liu Ren, KESO revised DONEWS. COM to gain benefits. They are the people who really understand user needs and websites.

Supplement:

When I did some tests recently, I found that the final JS of the code in this article is not very good and I thought of a new

This is old:
<Script language = "javascript">
If (document. getElementById ("left "). scrollHeight <document. getElementById ("middle "). scrollHeight | document. getElementById ("right "). scrollHeight <document. getElementById ("middle "). scrollHeight ){
Document. getElementById ("left"). style. height = document. getElementById ("middle"). scrollHeight + "px"
Document. getElementById ("right"). style. height = document. getElementById ("middle"). scrollHeight + "px"
}
</Script>

This is new:
<Script language = "javascript">
Var l = document. getElementById ("left"). scrollHeight
Var m = document. getElementById ("middle"). scrollHeight
Var r = document. getElementById ("right"). scrollHeight
LayoutHeight = Math. max (l, m, r)
Document. getElementById ("left"). style. height = layoutHeight + "px"
Document. getElementById ("right"). style. height = layoutHeight + "px"
Document. getElementById ("middle"). style. height = layoutHeight + "px"
</Script>

The switching of the three-column layout is more complicated than this. The code will be put up and shared in a short time.
Full Code:
Function Preview (obj) {var TestWin = open ('''); TestWin.doc ument. write (obj. value);} function copyCode (obj) {var rng = document. body. createTextRange (); rng. moveToElementText (obj); rng. scrollIntoView (); rng. select (); rng.exe cCommand ("Copy"); rng. collapse (false);} function saveCode (obj) {var winname = window. open (''', ''' _ blank '', ''' top = 10000''); winname.doc ument. open (''text/html '',</