Forum Moderators: not2easy
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>
try to be simpler, e.g.:
#a1, #a2, #a3, #a4 {
display:block;
width:250px;
height:200px;
float:left;
}
#a1 {
background:#f0f;
}
#a2 {
background:#0ff;
}
#a3 {
background:#ff0;
}
#a4 {
background:#00f;
}
Ive tried it the way you described, however the divs just dont sit where i want them to within the "leftcol" div. Some sit where i want, some only move half way over, others seem to disappear completely!
I realise there must be something stupid im doing wrong but i just cant get these dam divs to behave!
the code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Untitled</title>
<style type="text/css">
#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;
border : 1px solid red;
}
#content {
width:800px;
height:auto;
background-color:#666666;
border : 1px solid red;
}
#leftcol {
width:500px;
height:400px;
float:left;
border : 1px solid red;
}
#rightcol {
width: 250px;
height:600px;
float:right;
border : 1px solid red;
}
#a1, #a2, #a3, #a4 {
display:block;
width:250px;
height:200px;
float:left;
}
#a1 {
background-color:#FF00FF;
}
#a2 {
background-color:#00FFFF;
}
#a3 {
background-color:#FFFF00;
}
#a4 {
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="a1"><a href="#"></a></div>
<div id="a2"><a href="#"></a></div>
<div id="a3"><a href="#"></a></div>
<div id="a4"><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>
Nice one
