Jump to content

Please help me, How to do this in HTML?!


D4N005H

Recommended Posts

what have you tried? It's essentially just a two column layout. With a left column made up of three rows, and a right column made up of two rows.

Link to comment
Share on other sites

Yes I tried and found the solution. Here's the code:(Copyright: Coded by coothead) Edited by me.

<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><title>example page</title><link rel="stylesheet"  href="/"><style>body {    background-color:#f0f0f0;    font-family:verdana,arial,helvetica,sans-serif;    font-size:100%;    color:#666; }#container {    width:978px;    padding:10px;    margin:auto;    border:1px solid #ccc;    overflow:hidden;    background-color:#fff;    box-shadow:10px 10px 10px #777; }#left-col {    float:left;    width:348px;    margin-right:10px; }#right-col {    float:left;    width:620px; }#about {    padding:10px;    height:50px;    margin-bottom:10px;    border:1px solid #ccc;    overflow:auto; }.cat {    height:120px;    float:left;    width:147px;    padding:10px;    margin-bottom:10px;    border:1px solid #ccc; }.cat2 {    width:326px;    height:60px;    float:left;    padding:10px;    margin-bottom:10px;    border:1px solid #ccc; }.clear {    clear:both; }.margin5 {    margin-right:5px; }.margin10 {    margin-right:10px; }.social {    margin-top:5px;    float:left;    width:60px;    height:60px;    padding:10px;    border:1px solid #ccc;    font-size:75%; }#content {    margin-left:7px;    height:447px;    padding:10px;    margin-bottom:10px;    border:1px solid #ccc; }.content-footer {    margin-left:7px;    margin-right:1px;    float:left;    width:125px;    margin-top:5px;    height:146px;    padding:10px;    border:1px solid #ccc; }   	</style></head><body><div id="container"><div id="left-col"><div id="about">About</div><div class="cat margin10">Cat 1</div><div class="cat">Cat 2</div><div class="cat margin10">Cat 3</div><div class="cat">Cat 4</div><div class="cat2 margin10">*Cat 5*</div><div class="social margin5 clear">Home</div><div class="social margin10">Facebook</div><div class="social margin5">Youtube</div><div class="social">Twitter</div><div class="social margin5 clear">Home</div><div class="social margin10">Facebook</div><div class="social margin5">Youtube</div><div class="social">Twitter</div></div><!-- end #left-col --><div id="right-col"><div id="content">Box 1</div><div class="content-footer margin10">Box 2</div><div class="content-footer">Box 3</div><div class="content-footer margin10">Box 4</div><div class="content-footer">Box 5</div></div><!-- end #right-col --></div><!-- end #container --></body></html>
Edited by D4N005H
Link to comment
Share on other sites

Try This Code...!!!!!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>example page</title>
<link rel="stylesheet" href="/">
<style>
body {
background-color:#f0f0f0;
font-family:verdana,arial,helvetica,sans-serif;
font-size:100%;
color:#666;
}
#container {
width:978px;
padding:10px;
margin:auto;
border:1px solid #ccc;
overflow:hidden;
background-color:#fff;
box-shadow:10px 10px 10px #777;
}
#left-col {
float:left;
width:348px;
margin-right:10px;
}
#right-col {
float:left;
width:620px;
}
#about {
padding:10px;
height:50px;
margin-bottom:10px;
border:1px solid #ccc;
overflow:auto;
}
.cat {
height:120px;
float:left;
width:147px;
padding:10px;
margin-bottom:10px;
border:1px solid #ccc;
}
.cat2 {
width:326px;
height:60px;
float:left;
padding:10px;
margin-bottom:10px;
border:1px solid #ccc;
}
.clear {
clear:both;
}
.margin5 {
margin-right:5px;
}
.margin10 {
margin-right:10px;
}
.social {
margin-top:5px;
float:left;
width:60px;
height:60px;
padding:10px;
border:1px solid #ccc;
font-size:75%;
}
#content {
margin-left:7px;
height:447px;
padding:10px;
margin-bottom:10px;
border:1px solid #ccc;
}
.content-footer {
margin-left:7px;
margin-right:1px;
float:left;
width:125px;
margin-top:5px;
height:146px;
padding:10px;
border:1px solid #ccc;
}
.content-box {
margin-left:7px;
margin-top:5px;
float:left;
padding:10px;
width:280px;
height:50px;
margin-bottom:10px;
border:1px solid #ccc;
}
</style>
</head>
<body>
<div id="container">
<div id="left-col">
<div id="about">About</div>
<div class="cat margin10">Cat 1</div>
<div class="cat">Cat 2</div>
<div class="social margin5 clear">Home</div>
<div class="social margin10">Facebook</div>
<div class="social margin5">Youtube</div>
<div class="social">Twitter</div>
</div><!-- end #left-col -->
<div id="right-col">
<div id="content">Box 1</div>
<div class="content-box">Box 2</div>
<div class="content-box">Box 3</div>
</div><!-- end #right-col -->
</div><!-- end #container -->
</body>
</html>
  • [*]
Reply[*]Report[*]
[*]

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...