div.ex1
{
width: 777px;
padding: 5px;
border: 1px solid #ccc;
margin: 1px;
}
div.ex2
{
width:350px;
float: left;
padding: 0px;
border: 1px solid #ccc;
margin: 1px;
}
div.ex3
{
float: right;
width: 350px;
padding: 0px;
border: 1px solid #ccc;
margin: 1px;
}
div.ex4
{
position:absolute;
top: 90%;
left: 20%;
right: 20%;
width: 777px;
padding: 5px;
border: 1px solid #ccc;
margin: 1px;
}
Tuesday, April 16, 2013
index.html page in the midle, center, div, how to css
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>alinneaga div box center</title>
<!-- copyright undert@kerme <alinneaga@aol.com>2013, all rights reserved! -->
<link rel="icon" href="logo.ico">
<link rel="stylesheet" href="box.css" media="screen" type="text/css" />
</head>
<body>
<center>
<div class="ex1">
Head Head Head Head Head Head Head Head Head Head Head HeadHead Head Head Head Head HeadHead Head Head Head Head Head
<div class="ex1">
<div class="ex2">Left box Left box Left box Left box Left box Left box Left box Left box Left box Left box Left box Left box Left box Left box Left box Left box Left box Left box Left box Left box Left box Left box Left box Left box Left box Left box Left box Left box Left box Left box Left box Left box Left box Left box Left box Left box Left box Left box Left box Left box Left box Left box Left box Left box Left box Left box Left box Left box Left box Left box Left box Left box Left box Left box Left box Left box Left box Left box Left box Left box Left box Left box Left box Left box Left box Left box Left box Left box Left box Left box Left box Left box Left box Left box Left box Left box Left box Left box Left box Left box Left box Left box Left box Left box vLeft box Left box Left box Left box Left box Left box Left box Left box Left box Left box Left box Left box </div>
<div class="ex3">Right box Right box Right box Right box Right box Right box Right box Right box Right box Right box Right box </div>
</div>
</div>
<div class="ex4">
Bottom Bottom Bottom Bottom Bottom Bottom Bottom Bottom Bottom Bottom Bottom Bottom Bottom Bottom Bottom Bottom Bottom Bottom Bottom Bottom Bottom Bottom </div>
</center>
</body>
</html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>alinneaga div box center</title>
<!-- copyright undert@kerme <alinneaga@aol.com>2013, all rights reserved! -->
<link rel="icon" href="logo.ico">
<link rel="stylesheet" href="box.css" media="screen" type="text/css" />
</head>
<body>
<center>
<div class="ex1">
Head Head Head Head Head Head Head Head Head Head Head HeadHead Head Head Head Head HeadHead Head Head Head Head Head
<div class="ex1">
<div class="ex2">Left box Left box Left box Left box Left box Left box Left box Left box Left box Left box Left box Left box Left box Left box Left box Left box Left box Left box Left box Left box Left box Left box Left box Left box Left box Left box Left box Left box Left box Left box Left box Left box Left box Left box Left box Left box Left box Left box Left box Left box Left box Left box Left box Left box Left box Left box Left box Left box Left box Left box Left box Left box Left box Left box Left box Left box Left box Left box Left box Left box Left box Left box Left box Left box Left box Left box Left box Left box Left box Left box Left box Left box Left box Left box Left box Left box Left box Left box Left box Left box Left box Left box Left box Left box vLeft box Left box Left box Left box Left box Left box Left box Left box Left box Left box Left box Left box </div>
<div class="ex3">Right box Right box Right box Right box Right box Right box Right box Right box Right box Right box Right box </div>
</div>
</div>
<div class="ex4">
Bottom Bottom Bottom Bottom Bottom Bottom Bottom Bottom Bottom Bottom Bottom Bottom Bottom Bottom Bottom Bottom Bottom Bottom Bottom Bottom Bottom Bottom </div>
</center>
</body>
</html>
Subscribe to:
Posts (Atom)