Creating Column CSS Layout
Making the column can be done by determining the margin on each element that can be used. Suppose use HTML tags <p> and the number of columns that made as many as three columns like the following script.
Making the column can be done by determining the margin on each element that can be used. Suppose use HTML tags <p> and the number of columns that made as many as three columns like the following script.
<html>
<head>
<title>Column with CSS</title>
<style type="text/css">
body {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
font-family: verdana, arial, helvetica, sans-serif;
font-size:12px;
color: #000;
background-color: #333; font-weight:bold;
}
p#left
{ position: absolute;
top: 0px;
left: 0px;
margin: 20px;
padding: 10px;
background: #ccc;
width: 150px;
voice-family: "\"}\"";
voice-family:inherit;
width: 120px;
}
p#center
{
margin: 20px 200px 20px 205px;
padding: 10px;
background: #ccc;
}
p#right
{
position: absolute;
top: 0px;
right: 0px;
margin: 20px;
padding: 10px;
background: #ccc;
width: 150px;
voice-family: "\"}\"";
voice-family:inherit;
width: 120px;
}
</style>
</head>
<body>
<p id="left">COLUMN 1 <br>
Style<br>p#left<br>
{ position: absolute;<br>
top: 0px;<br>
left: 0px;<br>
margin: 20px;<br>
padding: 10px;<br>
background: #ccc;<br>
width: 150px; <br>
voice-family: "\"}\"";<br>
voice-family:inherit;<br>
width: 120px;<br>
} </p>
<p id="center">COLUMN 2 <br>
Style <br>
p#center<br>
{<br>
margin: 20px 200px 20px 205px;<br>
padding: 10px;<br>
background: #ccc;<br>
}<br></p>
<p id="right">COLUMN 3 <br>
Style <br>p#right<br>
{<br>
position: absolute;<br>
top: 0px;<br>
right: 0px;<br>
margin: 20px;<br>
padding: 10px;<br>
background: #ccc;<br>
width: 150px;<br>
voice-family: "\"}\"";<br>
voice-family:inherit;<br>
width: 120px;<br>
}<br>
</style></p>
</body>
</html>
Three columns were composed of three styles namely left, center and right. To the left and right to use absolute positioning with the determination of the location of the Top and Left to the left and top and Right to the right. While the middle column just by giving the margin only.
Column Layout by: enough to set tag <p> in HTML with CSS code began to column 1 to column 3 then obtained effects are like news in the newspaper column.
0 comments:
Post a Comment