CSSでDIV3カラム(難あり・・・)

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>

<!-- IE8 tested OK!, webkit and Gecko had a small problem. -->

<style type="text/css">
<!--
#wrapper {
 width: 950px;
 margin-left : auto ;
 margin-right : auto ;
}
#header {
 background-color: #FF9900;
 /* V and H center text */
 color: #FF0000;
 text-align: center;
 height:50px;
 padding-top: 25px;
}
#leftbox {
 width: 180px;
 float: left;
 background-color: #FF0000;
 min-height:200px;
}
#content {
 background-color: #FFFF00;
 min-width:450px;
 margin-left: 180px;
 min-height:200px;
}
#rightbox {
 width: 300px;
 float: right;
 background-color: #0000FF;
 min-height:200px;
}
#footer {
 background-color: #FFFFCC;
 /* V and H center text */
 height:30px;
 padding-top: 15px;
 text-align: center;

}
-->
</style>
</head>

<body>
<div id=wrapper>
 <!-- header -->
 <div id=header>header</div>

 <!-- clear -->
 <div style="clear: both;"></div>

 <!-- left -->
 <div id=leftbox>
 <p>menu</p>
 <p>Resources on all aspects of domestic and intercountry adoption, including adoption from foster care. Includes information for prospective and adoptive parents; information </p>
 </div>

 <!-- right -->
 <div id=rightbox>
 <p>ads</p>
 <p>Resources on all aspects of domestic and intercountry adoption, including adoption from foster care. Includes information for prospective and adoptive parents; information about searching for birth relatives; and resources for professionals on rchildren and youth, supporting birth parents, and providing postadoption services.box</p>
 </div>

 <!-- content -->
 <div id=content>
 <p>content</p>
 <p>Resources on all aspects of domestic and intercountry adoption, including adoption from foster care. Includes information for prospective and adoptive parents; information about searching for birth relatives; and resources for professionals on recruiting adoptive families, preparing children and youth, supporting birth parents, </p>
 </div>

 <!-- clear -->
 <div style="clear: both;"></div>

 <!-- footer -->
 <div id=footer>casey.jp</div>

</div>

</body>
</html>

関連記事

スポンサードリンク

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です