고정 3 컬럼 사이트

Question

나는 이것이 전에 물어 보았지만, 변화가 있는지 궁금하다.

DOM에서 3 번째 열에 위치하는 주 콘텐츠 (가운데) 영역이있는 html/CSS 고정 3 열 레이아웃을 찾고 있습니다 (SEO 용).

아이디어가 있으십니까?

Answer 1

그것은 당신이 이런 식으로 뭔가를 시도 할 수 있습니다, 약간의 추가 마크 업을 필요로하지만, 내용이 첫째로 얻을 :

<div id="wrapper"> 
    <div id="content-wrapper"> 
     <div id="content">I'm first</div> 
     <div id="side_a">I'm second</div> 
    </div> 
    <div id="side_b">I'm third</div> 
</div> 

그리고 CSS에서 :

#wrapper { 
    width: 800px; /* Total width of all columns */ 
    margin: 0 auto; 
} 

#content-wrapper { 
    float: left; 
} 

#content { 
    width: 400px; 
    float: right; 
} 

#side_a { 
    width: 200px; 
    float: left; 
} 

#side_b { 
    float: left; 
    width: 200px; 
} 

#wrapper contstraints 열을을을 너비는 800 픽셀이며 페이지가 가운데에 맞춰집니다. #content 및 #side_a 열은 다른 수레를 사용하여 역순으로 #content_wrapper 안에 배열됩니다. #side_b은 #content_wrapper과 함께 플로팅됩니다.

동작하는 예제는 여기에서 찾을 수 있습니다 :

http://www.ulmanen.fi/stuff/columns.php

Answer 2

이것은 타투를 사용하는 것과 동일한 방식이지만,에 :

• 헤더
• 바닥 글
• 고정 폭 대신 유동 폭 http://jsfiddle.net/BzaSL/

  HTML :

  <div id="header">First: Header</div> 
  <div id="wrapper"> 
      <div id="content-wrapper"> 
       <div id="content"> 
        <div id="contentpad"> 
         <h2>Second: Content</h2> 
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus turpis dui, porta consectetur dictum id, rhoncus non turpis. Praesent vitae fermentum enim. Donec consequat accumsan nibh et tempor. Duis sem enim, interdum eget vestibulum vitae, semper ac arcu. Maecenas convallis imperdiet libero, bibendum vulputate nulla tempus in. Duis eu purus eget lectus tincidunt fermentum. Vestibulum sit amet nunc et metus auctor ullamcorper. Vestibulum ut dui purus, nec hendrerit orci. Aliquam erat volutpat. Praesent a nibh vitae enim fringilla aliquam.</p> 
        </div> 
       </div> 
       <div id="leftcol"> 
        <div id="leftcolpad"> 
         Third: Left column 
        </div> 
       </div> 
      </div> 
      <div id="rightcol"> 
        <div id="rightcolpad"> 
         Fourth: Right column 
        </div> 
      </div> 
  </div> 
  <div id="footer">Fifth: Footer</div> 
  

  전체 높이의 배경 색상을 패드에

• 추가 된 div 당신은 jsfiddle에서 테스트 할 수있는 열

의 콘텐츠를

열을 izes CSS :

/* wrapper has all three columns, it is 100% of page width. 
* background applies to the right column.*/ 
#wrapper { width: 100%; margin: 0 auto; background-color:#CCFFFF; } 
/* clear floating elements before footer */ 
#wrapper:after { display: block; content: ""; clear: both; } 
/* content-wrapper is left two columns; 80% of wrapper width. 
* background applies to left column */ 
#content-wrapper { float: left; width:80%; background-color:#FFFFCC; } 
/* content is 75% of the content-wrapper width */ 
#content { width: 75%; float: right; background-color:#FFCCFF; } 
/* leftcol is the other 25% of the content-wrapper width */ 
#leftcol { width: 25%; float: left; } 
/* rightcol is 20% of thet wrapper width */ 
#rightcol { float: left; width: 20%; } 
/* Adding padding or margin directly to the columns messes up the layout */ 
#contentpad, #leftcolpad, #rightcolpad, #footer, #header{ padding:1em; } 
#footer{ background-color:#CCCCFF; } 
#header{ background-color:#FFCCCC; }