mrblack913@naver.com
안녕하세요. 처음부터 배우는 HTML5&CSS 책 잘 보고 있습니다. ^^

다름아니라 3부의 실전 웹 표준 사이트 구축 부분 예제를 실습 중에 있는데 float 속성이 안먹히는 것 같습니다.

현재 메인페이지 실습 중인데요(310페이지 진행중) 제가 실습하느라 타이핑 해 넣은 코드를 익스9 이나 파이어폭스 크롬 등등에서 실행 해보면 float가 안먹히네요.. 상단 메뉴나 아티클내 컨텐츠 부분이 안먹힙니다.

중간 이미지 부분도 백그라운드가 제대로 표시가 안되네요..

최상단 로그인은 float: right가 잘 듣네요;;

타이핑 해 넣은 코드가 아닌 로드북 사이트에서 다운로드한 예제를 실행해 봐도 마찬가지 입니다. 처음에는 상단 메뉴 float 안먹다가 차단된 컨텐츠 다운 하면 제대로 나옵니다.(IE9) 크롬이나 파이어폭스에서는 잘 나옵니다.

도대체 어떻게 된걸까요? 왜 최상단 float만 작동 되나요?

이메일로 답변 주시면 더욱 감사드리겠습니다. ^^

제가 지금까지 실습하느라 타이핑한 index파일과 default.css 파일 내용 아래에 첨부합니다.

=========================================================index.html

<html>

엠플러스(Mplus) Used car auto trading system<br /> Professional used-car Evaluating, Brokering and Pricing group based on Auto Auction data which are newly generated per an everyweek from over 2,000 used-car dealing system.
<meta charset="utf-8">
<link href="CSS/default.css" rel="stylesheet" type="text/css">


<body>
























web hosting solution


Lorem....est




web security solution


aaa bbbb ... bb




web payment solution


ccc... ccc











</body>

</html>
========================================================================

===============================================================default.css
@font-face {
font-family: "seo";
src: url("../images/segoeui.eot");
src: local("m"), url("../images/segoeui.woff") format("woff"), url("../images/segoeui.ttf") format("truetype");
}

body {
background-color: #898989;
margin: 0;
padding: 0;
font-size: 0.75em;
line-height: 1.2em;
color: #333;
}

#wrap {
width: 971px;
text-align: left;
margin: 0;
margin-right: auto;
margin-left: auto;
background-image: url(../images/shadow.png);
background-repeat: repeat-y;
min-height: 780px;
}

.clear {
clear: both;
}

#logo {
float: left;
width: 265px;
margin: 60px 0 0 40px;
}

#login {
float: right;
margin: 20px 64px 0 0;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
word-spacing: 5px;
}

#login a {
text-decoration: underline;
color: #333;
}

#login a:hover {
text-decoration: none;
color: #F90;

]

header {
height: 151px;
}

nav#top_menu {
width: 600px;
margin: 50px 20px 0 0;
float: right;
}

nav#top_menu ul {
list-style: none;
font-family: Verdana, Geneva, sans-serif;
font-size: 13px;
font-weight: 100;
color: #333;
}

nav#top_menu ul li {
float: left;
margin: 0 5px;
}

nav#top_menu a {
display: block;
height: 20px;
padding: 10px;
text-decoration: none;
color: #333;
}

nav#top_menu a:hover {
background-image: url(../images/blue.gif);
background-repeat: repeat-x;
background-position: bottom;
}

#main_img {
width: 971px;
height: 308px;
background-image: url(../images/img_back.png);
background-repeat: no-repeat;
background-position: center top;
}

#main_img img {
margin: 9px 0 0 0;
}

article#front {
margin: 5px 0 5px 0px;
}

#solution {
border: solid 1px #ffffff;
border-radius: 10px;
width: 910px;
min-height: 150px;
background: #ebebeb;
padding: 10px;
}

#hosting, #security, #payment {
width: 30%;
float: left;
padding: 10px;
}

#hosting, #security, #payment h3 {
font-family: seo;
font-size: 14px;
font-weight: 600;
color: #333;
}

#hosting, #security, #payment p {
font-family: seo;
font-size: 12px;
color: #333;
}

===================================================================
이 게시물을