본문 바로가기
조회 수 3737 추천 수 0 댓글 0
?

단축키

Prev이전 문서

Next다음 문서

+ - Up Down Comment Print Files
?

단축키

Prev이전 문서

Next다음 문서

+ - Up Down Comment Print Files

http://www.subcide.com/articles/creating-a-css-layout-from-scratch/P6/


sidebar-a div 를 오른쪽으로 float하고 width를 280으로


#sidebar-a {
	float: right;
	width: 280px;
	background: darkgreen;
}

1.gif



content div에 내용을 입력하면 아래와 같이 sidebar a 영역을 침범하게 된다.


2.gif


이 경우 content div의 오른쪽 마진을 sidebar a 의 폭만큼 준다. 280px


#content {

margin-right: 280px;

background: green;

}


content div와 sidebar a div 의 영역이 제대로 되었으나 아래와 같이 sidebar-a의 내용을 입력하면 footer가 아래로 내려가지 않는다. 이유는 sidebar-a가 으른쪽 floated 되었기 때문이다.


<div id="sidebar-a">

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam gravida enim ut risus. 

Praesent sapien purus, ultrices a, varius ac, suscipit ut, enim. Maecenas in lectus. 

Donec in sapien in nibh rutrum gravida. Sed ut mauris. Fusce malesuada enim vitae lacus 

euismod vulputate. Nullam rhoncus mauris ac metus. Maecenas vulputate aliquam odio. 

Duis scelerisque justo a pede. Nam augue lorem, semper at, porta eget, placerat eget, 

purus. Suspendisse mattis nunc vestibulum ligula. In hac habitasse platea dictumst.

</div>


3.gif


Explanation: By default, any floated element will not push down elements that are below it. This is because floated elements are not considered part of the document ‘flow’. Its like they are on another layer ‘floating’ above the other elements, and becuase of this, it can’t effect their positions.


"clear" css property로 해결이 가능


#footer {

clear: both;

background: orange;

height: 66px;

}


When an element has the clear property assigned, if it comes into contact with a float it is placed right below where that float ends. You can specify if it is effected by only left floats or only right floats, in this case we could use either ‘right’ or ‘both’. We’ll use clear: both just to be safe.


4.gif


















Title
List of Articles
번호 제목 글쓴이 날짜 조회 수
11 Refresh HTML Page in Browser Automatically Hojung 2014.06.07 1345
10 div태그와 span태그 비교 Hojung 2013.12.07 2110
9 What is the difference between <section> and <div>? Hojung 2013.12.07 1587
8 CSS 선택자의 종류 Hojung 2012.03.15 2766
7 CSS 적용방법 Hojung 2012.03.15 2093
» CSS 강좌5 - CSS 레이아웃 생성 file Hojung 2012.03.15 3737
5 CSS 강좌4 - 주요 요소 설정 file Hojung 2012.03.13 2116
4 CSS 강좌3 - 갠버스 설정 file Hojung 2012.03.13 2067
3 CSS 강좌2 - 기본 html 작성 Hojung 2012.03.13 1989
2 CSS 강좌1 - 레이아웃 잡기 file Hojung 2012.03.13 8255
1 추천 CSS 강좌 (Good) Hojung 2012.03.13 2183
Board Pagination ‹ Prev 1 Next ›
/ 1

Designed by sketchbooks.co.kr / sketchbook5 board skin

나눔글꼴 설치 안내


이 PC에는 나눔글꼴이 설치되어 있지 않습니다.

이 사이트를 나눔글꼴로 보기 위해서는
나눔글꼴을 설치해야 합니다.

설치 취소

Sketchbook5, 스케치북5

Sketchbook5, 스케치북5

Sketchbook5, 스케치북5

Sketchbook5, 스케치북5