3 열 고정 너비 크로스 브라우저를 호환 가능하고 액세스 가능하며 의미가 올바른 레이아웃으로 만드는 가장 좋은 방법은 무엇입니까?

Question

3 열 고정 너비 크로스 브라우저를 호환 가능하고 액세스 가능하며 의미가 올바른 레이아웃으로 만드는 가장 좋은 방법은 무엇입니까?

<div id="wrapper"> 
     <div id="header"> 
      This is the Header 
     </div> 
     <div id="top-nav"> 
      Top Navigation 
     </div> 
     <div id="leftcolumn"> 
      Left Column 
     </div> 
     <div id="content"> 
      content column 
     </div> 
     <div id="rightcolumn"> 
      Right Column 
     </div> 
     <div id="footer"> 
      This is the Footer 
     </div> 
    </div> 




#wrapper {width:970px;margin:0 auto } 
#header {height:100px } 
#top-nav {height:30px} 
#leftcolumn { } 
#content { } 
#rightcolumn { } 
#footer {height:100px} 

이 XHTML 코드는이 3 색 레이아웃을 만들기 위해 어떤 CSS가 작성되어야합니다. PX에서

폭 (IE를위한 CSS 해킹 또는 추가 조건 CSS 제외) IE6를 포함한

• 크로스 브라우저 호환
• 중심을
• 글꼴 크기 조정 그들에
• 열 번호가 될 수 있습니다 확장 또는 제거 된 1-4,5 등
• SEO 사용 설정

Answer 1

음, 이것은 수레와 가짜 열로는 꽤 쉽습니다.

왜 주변에 용기가 너무 많습니까? 당신은 오직 하나만 필요합니다.

#container { 
    width:960px; /* or 100%, or whatever. It needs to be set for it to work in IE tho */ 
    overflow:auto; /* hidden works too */ 
    background:url(./img/faux-columns.gif) repeat-y; /* google faux columns for A List Apart article */ 
} 

를 수행 수레를 취소하고 열에 대한 자신 일반적으로

#col1 { width:520px; float:left; margin-right:20px; } 
#col2 { width:200px; float:left; margin-right:20px; } 
#col3 { width:200px; float:left; } 

Answer 2

jQuery + 레이아웃 플러그인을 사용하십시오. 머리카락을 잘 보관하십시오.