PDA

View Full Version : CSS positioning newb



avidarby
19 Apr 2010, 10:55 PM
I've just started my first site using CSS, and I'm having some positioning/floating issues. I'm using Weebly.com (http://www.weebly.com) to host the site, so ignore any %%WEEBLY%%-type writing in the code, as they demand you keep certain things in.

So my basic problem is this: I've put 5 divs inside of a wrapper that is 619px wide. All I really want is for the divs inside to line up against one another from left to right in this order: #leftfar, #leftskinny, #maincol, #rightskinny, #right far

I figured all this would take was putting in the first div (#leftfar), entering in it's width and floating it left. Then I figured I could just repeat this step for each consecutive div. However, it seems that the #maincol div floats left against the wrapper edge and underneath the 1st and 2nd divs instead of against the right side of the #leftskinny div.

I'm not sure why it worked for the 2nd div and not the rest.

Excuse the general disorginization in my code. I don't really have any sort of system yet. I've highlighted in red where the problem probably is.

Here's my html


<html xmlns="http://www.w3.org/1999/xhtml">
<head profile="http://gmpg.org/xfn/11">
<title>%%TITLE%%</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<SCRIPT LANGUAGE="javascript">
image1 = new Image();
image1.src = "http://i43.tinypic.com/1627eo1.jpg";
image2 = new Image();
image2.src = "http://i43.tinypic.com/1sbij8.jpg";
</script>
</head>

<body>
<div id="container">

<div id="header">

</div>

<div id="description-container">
<div class="description">
<img src="http://i43.tinypic.com/9rmty9.gif" alt="spacer"/><a href="http://weebly-link/605275899847844623" onmouseover="image1.src='http://i43.tinypic.com/1627eo1.jpg';"
onmouseout="image1.src='http://i44.tinypic.com/11ujl1z.jpg';"><img name="image1" src="http://i44.tinypic.com/11ujl1z.jpg" border=0></a><a href="http://weebly-link/328195424443321820" onmouseover="image2.src='http://i43.tinypic.com/1sbij8.jpg';"
onmouseout="image2.src='http://i42.tinypic.com/1231e2u.jpg';"><img name="image2" src="http://i42.tinypic.com/1231e2u.jpg" border=0></a>
</div>
</div>


<div id="wrapper">
<div id="leftfar"></div>
<div id="leftskinny"></div>
<div id="maincol"></div>
<div id="rightskinny"></div>
<div id="rightfar"></div>
</div>

<div id="footer">
<p><span id='weeblyFooter'>%%WEEBLYFOOTER%%</span></p>
</div>

</div>

</body>
</html>

and here is my CSS style-sheet:


body,h1,h2,h3,h4,h5,h6,address,blockquote,dd,dl,hr,p,form
{
margin:0;
padding:0;
}

body
{
background: #fefb90 url(http://i43.tinypic.com/9rpo1x.jpg)no-repeat center top;
font-family:Arial, Helvetica, Georgia, Sans-Serif;
font-size:14px;
text-align:center;
vertical-align:top;

/*background-color:#d3d8c1;*/
}


a
{
color:#fefb90;
}

#container
{
width:769px;
text-align:left;
vertical-align:top;
margin:0 auto;
padding:0px 0 0;
}

#header
{
clear:both;
background:#2e2e2e url(http://i41.tinypic.com/2wcjoyq.gif) no-repeat;
color:#fff;
padding-top:155px;
}


#description-container
{
clear:both;
background:#a2a88b ;
color:#fff;
padding:0px;
}

.description
{
font-family:Georgia, sans-seriff;
font-size:14px;
letter-spacing:1px;
line-height:0px;
text-transform:uppercase;
text-align:left;
vertical-align:top;
background:#fff;
color:#000;
padding:0px;
}


#wrapper
{
float: left;
width:619px;

}
#leftfar
{
float:left;
width:122px;
padding-top:274px;
background-image:url(http://i44.tinypic.com/10p90rs.jpg);
background-repeat:no-repeat;
background-color:#fefb90;
}


#leftskinny
{
float:left;
width:15px;
padding-top: 274px;
background-image:url(http://i40.tinypic.com/j584f4.jpg);
background-repeat:no-repeat;
background-color:#ffffff;
}

#maincol
{
float:left;
width:593px;
background-color:#ffffff;

}

#rightskinny
{
float:left;
width:11px;
background-image:url(http://i41.tinypic.com/25z3615.jpg);
background-repeat:no-repeat;
background-color:#ffffff;
padding-top:274px;
}

#rightfar
{
float:left;
width:30px;
background-image:url(http://i41.tinypic.com/1415ah2.jpg);
background-repeat:no-repeat;
background-color:#fef90;
padding-top:274px;
}


}
#footer
{
clear:both;
float:left;
width:620px;
font-family:Georgia, sans-seriff;
font-size:16px;
line-height:30px;
text-align:left;
vertical-align:top;
background:#fefb90 url(bg_footer.gif) no-repeat left bottom;
color:#fefb90;
margin:122px;
padding-left:0px;
}

#footer p
{
padding:0 0px;
}

Trillium
20 Apr 2010, 03:03 PM
It would seem to me that the reason the outcome isn't what you want it to be is that the widths of your inner divs (122, 15, 593, 11, and 30px respectively) add up to 771px, and your "wrapper" div is only 619px, therefore, when the third div (maincol) tries to slide in next to the second one (leftskinny), it finds that it doesn't have enough room left on the line, so it shoots down to the next line. Try playing around with the widths (especially making the #wrapper div wider).

Let me know if that works.