-1
私はFacebookが2つの脇役とセクションをどのように位置づけているかに絶対に魅了されています。FacebookのようなポジショニングCSS
例：グループ|ニュースフィード|広告、ポップアップなど
ここに自分のHTMLとCSSがあります。私はメインセクションを真ん中に集中させて、右にべたべたを置いています。
これは実際に私のやり方ではありません。
HTML：
<?php
require_once 'misc/header.php';
require_once 'misc/footer.php';
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Website</title>
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<div id="page_wrap">
<header id="title">
<img src="images/Icon.png" id="titleIcon">Retnix
</header>
<div id="page-content">
<div id="content-block">
Lorem Ipsum is simply dummy text of the printing and
typesetting industry. Lorem Ipsum has been the industry's
standard dummy text ever since the 1500s, when an unknown
printer took a galley of type and scrambled it to make a
type specimen book. It has survived not only five centuries,
but also the leap into electronic typesetting, remaining
essentially unchanged. It was popularised in the 1960s with
the release of Letraset sheets containing Lorem Ipsum
passages, and more recently with desktop publishing software
like Aldus PageMaker including versions of Lorem Ipsum.
</div>
</div>
<aside>
dsadas
</aside>
</div>
</body>
</html>
CSS：
*{padding:0; margin: 0;}
@font-face
{
font-family: 'infinityregular';
src: url('../fonts/infinity-webfont.woff2') format('woff2'),
url('../fonts/infinity-webfont.woff') format('woff'),
url('../fonts/Infinity.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
#page_wrap
{
width: 100%;
text-align: center;
border: 1px solid black;
}
#page-content
{
border: 1px solid black;
width: 40%;
margin: auto;
padding: 20px;
}
#content-block
{
background-color: #ccccff;
white-space: normal;
font-family: 'infinityregular';;
font-size: 24px;
}
header
{
background-color: #66ff66;
padding: 10px;
}
#title
{
text-align: center;
font-size: 3em;
font-family: 'infinityregular';
}
#titleIcon
{
width: 70px;
height: 70px;
margin-bottom: -13px;
margin-right: 10px;
}
aside
{
border: 1px solid black;
width: 20%;
float: right;
clear: left;
padding: 20px;
}
種類よろしく、事前に 感謝。アレックス 。