Welcome to WebmasterWorld Guest from 107.20.110.201

Forum Moderators: not2easy

Message Too Old, No Replies

Trouble positioning divs

     

derstinger

10:57 am on Feb 2, 2009 (gmt 0)

5+ Year Member



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>

Moby_Dim

4:47 pm on Feb 2, 2009 (gmt 0)

10+ Year Member



You can not have an id name to begin with a digit.

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;
}

derstinger

5:56 pm on Feb 2, 2009 (gmt 0)

5+ Year Member



Hi, thanks for the reply. Just to make clear i dont start my id's of with numbers, i only changed the markup to make it easier to see what i wanted to do. Probably not the best idea now i think about it!

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!

Moby_Dim

6:56 pm on Feb 2, 2009 (gmt 0)

10+ Year Member



i've just tried, and all they (all 4 divs) have been sitting peacefully (2 rows, 2 cols) inside #leftcol (at least in ie6, ff, opera) ;)

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>

derstinger

9:03 pm on Feb 2, 2009 (gmt 0)

5+ Year Member



Huh! Yeah i just tried it in notepad and it worked fine! Well thanks alot mate you saved me throwing my pc at the wall!

Nice one

 

Featured Threads

Hot Threads This Week

Hot Threads This Month