Hi everyone
Im a newbie to this site and to handcoding. Ive used dreamweaver to do all my work in the past but have decided from now on to hand code everything. This has gone well so far but im now having problems creating what should be a straight forward page. The layout is pretty standard. A header/navigation at the top. A content div with a large left column and thin right column in the middle. And a footer at the bottom.
This i achieved easily with no problems however, in the left column, i need to place four images that act as links.
The images are all equal size, with no text needed. The four images need to sit in 2 rows to make a nice tidy square formation within the "leftcol"div. The div itself is equal to the four images, and no margin is needed.
Ive tried creating four smaller divs to hold each image but i cant position them within the "leftcol" div. They just go all over the place!
Ive tried all manner of floats and positioning and i just cant get them to sit nicely! Im obviously doing something wrong because its a simple result.
Heres the relevent code, ive changed the divs to numbers for simplicity but ive not tried to use them in the markup. What am i doing wrong?
Any help will be greatly appreciated
The code might appear messy as ive tried so many different approaches ive lost where i am!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
#wrapper {
width:801px;
height:auto;
margin-left:auto;
margin-right:auto;
}
#headnav {
width:800px;
height:225px;
background-image: url(images/header.jpg);
background-repeat:no-repeat;
}
#content {
width:800px;
height:auto;
background-color:#666666;
}
#leftcol {
width:500px;
height:400px;
float:left;
}
#rightcol {
width: 250px;
height:600px;
float:right;
}
#1 {
display:block;
width:250px;
height:200px;
float:left;
background-color:#FF00FF;
}
#2 {
display:block;
width:250px;
height:200px;
float:left;
background-color:#00FFFF;
}
#3 {
display:block;
width:250px;
height:200px;
background-color:#FFFF00;
}
#4 {
display:block;
width:250px;
height:200px;
float: right
background-color:#0000FF;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="headnav">
<ul id="nav">
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
</ul>
</div>
<div id="content">
<div id="leftcol">
<div id="1"><a href="#"></a></div>
<div id="2"><a href="#"></a></div>
<div id="3"><a href="#"></a></div>
<div id="4"><<a href="#"></a></div>
</div>
<div id="rightcol"></div>
</div>
<div id="footer">
<ul id="sitemap">
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
</ul>
</div>
</div>
</body>
</html>
