I hate CSS -.- - Webmaster Forum - Web Design, Programming and SEO forums

03-21-2005, 02:38 AM

stenson

Status: Member
Join date: Aug 2004
Location: Sacramento, CA
Expertise:
Software:

Posts: 275

iTrader: 1 / 100%

stenson is on a distinguished road

I hate CSS -.-

Please take a look at http://stenson.biz/121CA/

This is what it should look like... http://stenson.biz/for%20sale/121CA.gif

I'm currently using a system of floating DIVs, and it was working out just great until I tried to add in the right collumn. The damned thing just won't go to the top of the page. I've tried everything I can think of, and it won't budge vertically. Please.. Any help you can give me is appreciated more than you can know.

If you're too lazy to view the source, here is my CSS

/* CSS Document */

body {
margin: 0 auto;
text-align: center;
background-color: #B0E902;
font-family: Tahoma;
font-size: 10px;
color: #4A4A4A;
line-height: 18px;
}

.clear {
clear: both;
}

p, h1, h2, h3, img {
padding: 0px;
border: 0px;
margin: 0px;
}

a, a:visited {
color: #808080;
text-decoration: underline;
}

/* Wrapper - Container */
#wrapper {
width: 740px;
background-color: #fff;
background-repeat: repeat-y;
margin: 0 auto;
text-align: left;
}

#main {
float: left;
}

#logo {
float: right;
margin: 0;
}

#nav {
background-image: url(images/nav_bg.gif);
background-repeat: reapeat-x;
width: 471px;
height: 33px;
float: left;
text-align: center;
border-style: solid;
border-color: #FFF;
border-width: 0px 1px 0px 1px;
}

#welcome {
margin: 12px;
background-image: url(images/welcome.gif);
background-repeat: no-repeat;
width: 451px;
height: 112px;
float: left;
display: inline;
}

#mission {
margin: 0px 12px 0px 12px;
background-image: url(images/mission.gif);
background-repeat: no-repeat;
width: 451px;
height: 92px;
float: left;
display: inline;
}

#boxes {
margin-left: 12px;
margin-top: 12px;
width: 449px;
float: left;
display: inline;
}

.boximgs {
padding-top: 11px;
}

.boxcontent {
padding: 11px;
text-align: justify;
}

#box1 {
margin: 0;
background-image: url(images/box_bg.gif);
background-repeat: repeat-y;
width: 208px;
height: 245px;
}

#box2 {
background-image: url(images/box_bg.gif);
background-repeat: repeat-y;
width: 208px;
height: 245px;
}

#right {
width: 267px;
float: right;
display: inline;
}

.rightsection {
background-image: url(images/rt_bg.gif);
background-repeat: repeat-y;
margin: 0;
}

This is my xhtml

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>121CA - Account Solutions</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<style type="text/css" media="screen">
@import url(style.css);
</style>

</head>

<body>
<div id="wrapper">

<div id="main">
<div style="float: left;"><img src="images/header.gif" alt="" /></div>
<div id="nav">
<a href="#"><img src="images/nav_home.gif" alt="" /></a>
<a href="#"><img style="margin-left: 12px;" src="images/nav_about.gif" alt="" /></a>
<a href="#"><img style="margin-left: 12px;" src="images/nav_services.gif" alt="" /></a>
<a href="#"><img style="margin-left: 12px;" src="images/nav_products.gif" alt="" /></a>
<a href="#"><img style="margin-left: 12px;" src="images/nav_testimonials.gif" alt="" /></a>
<a href="#"><img style="margin-left: 12px;" src="images/nav_contact.gif" alt="" /></a>
</div>

<div id="welcome"><div style="text-align: justify; padding-left: 139px; padding-right: 8px; padding-top: 12px;"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat.</p></div></div>

<div id="mission"><div style="text-align: justify; padding-left: 139px; padding-right: 8px; padding-top: 12px;"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in.</p></div></div>

<div id="boxes">

<div style="float: left;">
<div id="box1"><img src="images/casestudy_h.gif" alt="" />
<div class="boximgs"><img src="images/casestudy_img.gif" alt="" /></div>
<div class="boxcontent">Find out how we helped Beach Computers reach their goal of a 25% increase in sales. The
remarkable thing of it all.. is that we made it happen in just one quarter.</div>

</div>
<img style="margin: 0;" src="images/read-it.gif" alt="" />
</div>

<div style="float: left; margin-left: 33px;">
<div id="box2"><img src="images/recentproject_h.gif" alt="" />
<div class="boximgs"><img src="images/casestudy_img.gif" alt="" /></div>
<div class="boxcontent">Find out how we helped Beach Computers reach their goal of a 25% increase in sales. The
remarkable thing of it all.. is that we made it happen in just one quarter.</div>
</div>

<img style="margin: 0;" src="images/read-it.gif" alt="" />
</div>

</div>

</div>

<div id="right">
<img src="images/logo.gif" alt="" />
<div class="leftsection">
<img src="images/news.gif" alt="" />

<div style="padding: 8px;"><p>March 20, 2005
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore.
</p></div>
</div>

<div class="leftsection">
<img src="images/testimonial.gif" alt="" />
<div style="padding: 8px;"><p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore.
<br /><strong>- Billy Bob Jenkins</strong>
</p></div>

</div>
</div>

<br class="clear" />

</div>
</body>
</html>

Thanks in advance for any advice you might be willing to lend.

03-21-2005, 06:34 PM

stenson

Status: Member
Join date: Aug 2004
Location: Sacramento, CA
Expertise:
Software:

Posts: 275

iTrader: 1 / 100%

stenson is on a distinguished road

Please??? I need some help ASAP.

03-21-2005, 08:02 PM

Geert

Status: Junior Member
Join date: Mar 2005
Location: Belgium
Expertise:
Software:

Posts: 67

iTrader: 0 / 0%

Geert is on a distinguished road

You're using way to much divs and inline styles in my opinion.

Anyway, I changed the width of the #right div from 267px to 265px which did the trick for me.

03-21-2005, 09:31 PM

derek lapp

Status: design rockstar
Join date: Jan 2005
Location: guelph, ontario
Expertise:
Software:

Posts: 2,246

iTrader: 0 / 0%

derek lapp is on a distinguished road

yeah that usually happens when two children div get too close to the parent's width. i'm still not sure why it's so, but if the parent is 500, the two inside it can't be 250 and 250.

03-21-2005, 09:55 PM

FiveInteractive

Status: Request a custom title
Join date: Jan 2005
Location: UK
Expertise:
Software:

Posts: 1,216

iTrader: 0 / 0%

FiveInteractive is on a distinguished road

Send a message via AIM to FiveInteractive

Send a message via MSN to FiveInteractive

It looks alright to me, has it been fixed?

03-21-2005, 09:56 PM

stenson

Status: Member
Join date: Aug 2004
Location: Sacramento, CA
Expertise:
Software:

Posts: 275

iTrader: 1 / 100%

stenson is on a distinguished road

Thanks for leading me in the right direction. The problem was that the welcome and mission boxes PLUS the margins I had set PLUS the width of the column was 2 px to large for the container.

http://www.stenson.biz/121CA/

Problem resolved!