div로 레이아웃을 짤때...

Tyburn · Post by **Tyburn** » 2006 04 04 10:34 46

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>TEST PAGE</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
body {
	margin: 0;
	font-family: tahoma;
}

#top {
	width: 980px;
	background-color: #cccccc;
	margin: 10px auto auto 10px;
	padding-top: 50px;
	padding-bottom: 50px;
	text-align: center;
	font-weight: bold;
	font-size: 12pt;
}

#left {
	width: 120px;
	background-color: #cccccc;
	margin: 10px 0 0 10px;
	padding-top: 150px;
	padding-bottom: 150px;
	font-weight: bold;
	font-size: 12pt;
	text-align: center;
}
</style>
</head>
<body>
<div id="top">top</div>
<div id="left">left</div>
</body>
</html>

div로 레이아웃을 짜는 연습을 하고 있습니다.

보시다시피 top div와 left div가 존재하는데요, right div도 하나 더 만드려고 합니다.

그런데 div태그 밑에 새로운 div를 추가하면 div가 가로로 나열되지 않고 아래로 내려가 버립니다.

즉,

[ top div ]
[left div] [right div]

이런식으로 되지 않고

[ top div ]
[left div]
[right div]

이렇게 되어버린다는 거지요..

초보인 저로서는 어떻게 해결해야 할지 난감합니다. (table에 익숙해져 있다 보니 div를 익히는 것이 어렵습니다.. ㅠㅠ)

position: absolute 속성을 사용하지 않고 left와 right div가 가로로 나열되게 하려면 어떻게 해야 하나요?

Post by **hyeonseok** » 2006 04 04 11:22 53

내용이 많아서 여기서 다 설명 드리기는 힘들 것 같고요.
실전 웹표준 가이드( http://mozilla.or.kr/docs/web-developer/standard/ )의 CSS Layout부분을 참조하시가 바랍니다.
가이드를 보시고도 문제가 발생하면 다시 질문 올려 주세요.

oragi · Post by **oragi** » 2006 04 04 13:46 34

div는 블록 엘레멘트입니다.

블록 엘레멘트는 div, p, table, ul, li 와 같이 연속되서 쓰여지는 경우 수직적으로
보여집니다.
블록 엘레멘트를 수평적으로 보이게 만들려면 포지셔닝을 하시거나
float를 주어 일반적인 흐름과는 다른 흐름을 만들어 주셔야 합니다.

하얀 나비 · Post by **하얀 나비** » 2006 04 06 13:30 04

#left {
width: 120px;
background-color: #cccccc;
margin: 10px 0 0 10px;
padding-top: 150px;
padding-bottom: 150px;
font-weight: bold;
font-size: 12pt;
text-align: center;

float:left;

}

float:left 를 추가하시면 될 겁니다.

연봉3000주는데없수?

#left {
float: left;
.
.
.
.
.
}

// float:left; 를 추가하시면 좌측으로 가면서 right 레이어는 우측으로 자동? 으로 옮겨집니다. 그러나 파이어폭스에선 제대로 표현안되죠 -ㅅ- 이럴때 대략 난감합니다. 이럴경우 (편법이라면 할말없음)

#right {
margin-left : 200px; /*좌측이 서브메뉴라고 봤을때 적당히 띄워주는값 ㅋㅋ*/
.
.
.
.
}

을 넣으시면 먹힌다는거죠~~ 후후.. 함해보시길~

iLmoL · Post by **iLmoL** » 2006 04 28 02:29 07

float:left; 를 추가하시면 좌측으로 가면서 right 레이어는 우측으로 자동? 으로 옮겨집니다. 그러나 파이어폭스에선 제대로 표현안되죠 -ㅅ- 이럴때 대략 난감합니다. 이럴경우 (편법이라면 할말없음)

음... 파이어폭스에서 제대로 왜 표현이 안되는지요,,,?

오히려 IE 에서 오른쪽 DIV 와 왼쪽 DIV 에 float 을 준 후 margin 값을 잘못 지정하게 되면 깨지는 경우가 있기는 합니다만,,

오른쪽 왼쪽 값 다 float 을 적용하시면 정렬이 잘 되게 되어있습니다.

hiphapis · Post by **hiphapis** » 2006 04 28 10:50 50

연봉3000주는데없수? wrote:// float:left; 를 추가하시면 좌측으로 가면서 right 레이어는 우측으로 자동? 으로 옮겨집니다. 그러나 파이어폭스에선 제대로 표현안되죠 -ㅅ- 이럴때 대략 난감합니다. 이럴경우 (편법이라면 할말없음)

width 값이 넘는것일 수 도 있겠네요..
padding, margin 같은걸로 인해 width 가 넘는건 아닌지요..?

Mozilla 한국 커뮤니티

div로 레이아웃을 짤때...

div로 레이아웃을 짤때...

맞습니다 맞고요

Re: 맞습니다 맞고요

Who is online