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