homepage Welcome to WebmasterWorld Guest from 23.20.28.193
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
Trouble positioning divs
derstinger




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

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




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

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




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

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




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

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




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

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

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved