수다닷컴

/
안녕하세요.
웹표준 마크업, 개념잡기는 그다지 어렵지 않았었는데,
막상 실제 프로젝트에 적용하려니 응용면에서 이해해야할 개념들이 굉장히 많네요.

아래는 지금 제작하고 있는 사이트의 head부분입니다.
head를 감싸는 wrap을 만들어 width를 100% 주어서 좌우로 쭉 뻗어나가게 배경을 주었구요.
h1부분에는 로고가, .mnb에는 플래시로 된 메인 네비게이션 바 이구요.
.gnb에는 로그인, 사이트맵 등의 버튼과 검색폼이 들어갑니다.
처음에는 head 안의 블록을 absolute position을 사용하여 정렬했는데,
비효율적이라 생각되어 다시 float으로 정렬했습니다.
그리고 .gnb안의 블록들(.gnb_menu, gnb_srch)을 정렬 하려니 궁금한 점이 생겨서 여쭙습니다.

코드를 보시다시피 .gnb를 float으로 정렬했음에도 불구하고 position:relative를 사용했는데요.
비록 .gnb를 float으로 정렬하였지만 그 안의 요소들을 .gnb를 기준으로 정렬하기 위해 사용했습니다.
일단 대표 브라우저들(FF, Chrome, Safari, Opera, IE)과 IE6에서는 문제 없음이 확인 되었습니다.

하지만 웹표준 가이드나 다른 방법론에는 float과 position을 한 블록에 동시에 사용하는 예제가 없어,
이런식의 마크업이 유효한 것인지 질문드리고자 올립니다.
아울러 올려드린 코드는 짧지만 제가 구현하는 마크업이 올바른것인지도 검증받고 싶습니다.

[Layout]
/* CSS */
#head_wrap{width:100%;height:103px;background:#FFF url(images/head/bg_head.png) repeat-x}
#head{position:relative;width:1130px;height:103px;margin:0 auto}
#head h1{float:left;width:246px;height:93px;margin:0;padding:0;list-style:none}
.mnb{float:left;width:678px;height:103px;}
.gnb{float:left;position:relative;width:206px;height:93px}
.gnb_menu{clear:both;position:absolute;top:25px;left:20px;width:166px;height:20px}
.gnb_menu ul{width:166px;height:20px;margin:0;padding:0;list-style:none}
.gnb_menu li{float:left}
.gnb_srch{position:absolute;top:57px;left:20px;width:166px;height:20px}

!-- HTML --
div id=head_wrap
div id=head
h1img src=images/head/btn_gstlogo.png width=246 height=93 //h1
div class=mnbimg src=images/head/mnb.png width=678 height=103 //div
div class=gnb
div class=gnb_menu
ul
liimg src=images/head/btn_login.png width=53 height=20 //li
liimg src=images/head/btn_signup.png width=61 height=20 //li
liimg src=images/head/btn_sitemap.png width=52 height=20 //li
/ul
/div
div class=gnb_srchimg src=images/head/form_srch.png width=166 height=20 //div
/div
/div
/div

신청하기