CSS : 가운데, 유동 왼쪽, 고정 오른쪽, 최소/최대 너비로 소스 정렬 된 레이아웃

Question

제목에 표시됩니다. 나는 2 열 CSS 레이아웃을 원하는 :

• 가 중심을 - 주요 내용이 페이지의 중앙에
• 는 고정 (픽셀) 오른쪽 열 폭
• 는 유체 왼쪽 열을 가지고있다 - 최대 사용 사용 가능한 모든 공간을 뺀
• 은 오른쪽 열 폭 소스 주문 -
• 이 최대 폭을 가능하게 내 예 760px - 왼쪽 열 내용이
• 는 최소 폭을 허용 HTML 소스의 오른쪽 열 컨텐츠 앞에 오는 - 10 내 예제의 24px

창이 최대 너비보다 큰 경우 콘텐츠의 최대 값은 페이지의 가운데에 표시됩니다. 윈도우가 최대 너비보다 작은 경우 내용이 가로 너비보다 작은 경우를 제외하고 페이지의 100 %를 채 웁니다.

저 속성을 지원하지 않는 브라우저의 경우 최소/최대 너비를 처리하기 위해 기꺼이 약간의 javascript를 사용합니다 (저는 IE6을보고 있습니다).하지만 그 부분을 허용 할 의지가 있습니다. 레이아웃의 품질이 저하됩니다.

테이블을 사용하면 간단히 삭제됩니다. 말 그대로 수백 개의 예제 레이아웃을 살펴 보았습니다. 내가 묻는 모든 것을 할 수있는 것은 없지만 몇 가지가 있습니다. 문제는 유동적 인 왼쪽 열과 원본 스타일을 동일한 스타일로 얻는 것 같습니다. 나는 고정 된 왼쪽/유체 오른쪽 (원한 것의 반대편)과 적절한 소스 순서 또는 소스 순서없이 유체를 왼쪽/고정 오른쪽으로 여러 예제를 찾았지만 모두는 아닙니다.

플로트 또는 음수 여백을 사용하더라도 상관 없지만 절대 위치 지정은 피하고 싶습니다.

+---------------------------------------+ 
|          | 
| +---------------------------+-----+ | 
| |fluid      |fixed| | 
| |       |  | | 
| |       |  | | 
| +---------------------------+-----+ | 
|          | 
+---------------------------------------+ 

Answer 1

CSS templates at Dynamic Drive을 확인하시기 바랍니다. 다섯 번째 것은 당신이 찾고있는 것이어야합니다 (Fluid-Fixed). max-width 및 min-width을 기본 컨테이너 요소에 추가하기 만하면 모든 설정이 완료됩니다.

참고로 이러한 레이아웃은 실제로 페이지 레이아웃의 기본으로 사용하기에 좋은 템플릿입니다. CSS를 가지고 노는 것은 수레와 위치에 대해 많은 것을 배울 수있는 좋은 방법이며 웹 개발 초기에 나를 도왔습니다.

Answer 2

이와 비슷한 제품을 찾고 계십니까? http://blog.html.it/layoutgala/

그리고 단지 용기 최소/최대 폭을 추가 : 인덱스 페이지에

http://blog.html.it/layoutgala/LayoutGala23.html

더 레이아웃 (부 마진 + 플로트 + 적절한 소스 순서 + 오른쪽 고정).

Answer 3

내 시도 : 그것은 완전하게 작동하지 않습니다 http://www.ryankinal.com/fluid/

아주 작은 창 크기, 내 부정적인 마진이 발생할 수 있기 때문에 그는 비록, 내용이 페이지 떨어져에.여기서 이론 : 용기 100 % 약간의 비율

왼쪽 칼럼에서

1. 용기와 0 %의 폭을 감싸
2. 오른쪽 열의 왼쪽 플로팅 플로트 오른쪽 래퍼 고정에
3. 오른쪽란 (내 예에서 100 픽셀) (예 내에서 200 픽셀) 폭
4. 좌측 열 및 우측 열의 폭의 절반의 열의 왼쪽 오른쪽 여백

따라서 오른쪽 열이 클수록 콘텐츠가 떨어질 가능성이 큽니다. 그러나 그것은 내가 좋은 시간에 얻은 것만 큼 가까운 것입니다. 불필요한 div에 오른쪽 열을 배치하고 오버플로 : 가시적 인 점을 이용하기 때문에 조금 비현실적입니다.

하지만 그들은 내 공작원입니다 (당분간).