I'm still learning CSS so bear with me...

I need to setup columnar layout. One column needs to bee 400 pixels wide and the other needs to be 80 pixels wide, and then 20 pixels of padding between the 2 columns. (overall the combined space can't be greater than 500 pixels)

How would I set that up, do you have to use DIV tags?


Thanks
Jacob

I'm not sure if I completly understand, but hey, thats just one of my many problems. If I do understand than I would suggest something like;

#left {
 width: 400px;
 float: left;
 margin: 0;
}
#right {
 width: 80px;
 float: right;
 margin: 0 0 0 20px;
}

If I misunderstood the question though, please post a link so I can better understand and I will try and be more helpful.

Cheers,

Hey faze, that worked!

Next question, how do I add another element under #right. Reason I ask is I need to set a back ground image to #right, and then I need another element, the same shape in size with a different background image.


Thanks
Jacob

#right2 {
width: 80px;
float: right;
clear: right;
margin: 0 0 0 20px;
}

Just add the right2 DIV after the other DIVs and you should be fine.

this worked, however, there is no spacing between the background images of #right and #right1, so I'm not sure how to get a space between the 2, I tried <br>, but that didnt' work. I also tried padding-top, but that moved the text only, not the background image.

what i need to do is add 10px between the #right and #right 1, I just checked my css book and I see a background-position function, but it doesnt have anything about specifying pixels.

Almost got it. Just set the margin, not the padding.

#right2 {
width: 80px;
float: right;
clear: right;
margin: 10px 0 0 20px;
}

Basically, 'margin' affects the position of the DIV, 'padding' affects the position of what's in the DIV.

You could also use 'margin-top: 10px' if you didn't want to specify all the four margins in one line.

to see what i'm talking about go to

http://www.jacobjacobi.com/starch/files/index.html

i got it, it worked! css with no tables is cool!

Nice job! CSS is the way to go.

The site looks really good too.

only if it were a word document, lol!

now let's talk form fields, lol....i'm adding one to #right1...i just uploaded the page, and you'll see the problem i'm having...


http://www.jacobjacobi.com/starch/files/index.html

Somehow extra spacing is added to the top and bottom...how do I get rid of that?

Snacky's advice will get you set up for the distance between your two right elements, I thought you might also like to see how to place the backgrounds in css, add:

background: #ffffff url('bg.gif') no-repeat scroll left bottom;

to both right1 and 2. #ffffff of course will be the background color. The url is from the directory that contains the css, not the page that it will dsiplay on. Of course no-repeat is obvious but you can also use repeat, repeat-x or repeat-y. Scroll will let the image follow the page as it is scrolled, you can also use no-scroll. Left is for the images horizontal position can also be center or right. Bottom is obvioulsy images vertical position, I know top and bottom will work across multiple browsers but I dont think thats true for middle. I think middle will actually cause the line to fail in most browsers. I like short hand for my css but there are other ways to do it as well.

Cheers,

Thanks faze!

What does the "left bottom" in that "no-repeat scroll left bottom" element do?

Also, I'm now trying to add another div element under #left, I took a stab at the code, but when I checked it, I missed...

#left {
width: 340px;
float: left;
padding: 0 10px 0;
}
#left2 {
width: 340px;
float: left;
padding: 10px 0 0 0;
}

Hey faze,

I tried and after I added no repeat, the images disappeared?

#right1 {
background-image: #ffffff url(../images/right1.gif) no-repeat left bottom;
width: 150px;
height: 100px;
float: right;
padding: 8;
}
#right2 {
background-image: #ffffff url(../images/right1.gif) no-repeat left bottom;
width: 150px;
height: 100px;
float: right;
clear: right;
margin: 10px 0 0 20px;
padding: 8;
}

Here's the code if that helps...

<div class="frame">
<div class="pageCopy">
<div id="left1"><span class="header2">Welcome to The Starched Shirt</span><br>
Serving the metro Atlanta area, The Starched Shirt is a full-scale drycleaning
delivery service. Just tell us where to pick it up, and we'll deliver it back
to you the very next day!</div>
<div id="right1"> <span class="header2">The Special</span><br>
Refer and friend and you both get 10% off your next order! Details... </div>
<div id="left2"><span class="header2">Join our mailing list</span><br>
Serving the metro Atlanta area, The Starched Shirt is a full-scale drycleaning
delivery service. Just tell us where to pick it up, and we'll deliver it back
to you the very next day!</div>
<div id="right2"> <span class="header2">Service Areas</span><br>
Check your zip for availability
<form name="form1" method="post" action="">
<input name="textfield" type="text" size="7" maxlength="7">
</form>
</div>
</div>

---------------------------------------------------------------------------------

.pageCopy {
background-color: #FFFFFF;
width: 500px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10pt;
color: #333333;
text-align: left;
margin: 0 auto;
padding-top: 20px;
}

.frame {
clear: both;
text-align: center;
}

#left1 {
width: 340px;
float: left;
padding: 0 10px 0;
}

#left2 {
width: 340px;
float: left;
padding: 10px 10px 0;
}

#right1 {
background-image: #ffffff url(../images/right1.gif) no-repeat scroll left bottom;
width: 150px;
height: 100px;
float: right;
padding: 8px;
}

#right2 {
background-image: #ffffff url(../images/right1.gif) no-repeat scroll left bottom;
width: 150px;
height: 100px;
float: right;
clear: right;
margin: 10px 0 0 20px;
padding: 8px;
}

Instead of background-image, try background. That should do the trick.

Nice site by the way

Thanks! That worked!

However, still got one problem, or 2 actually...

Check it out..
http://jacobjacobi.com/starch/files/index.html

The wording appears off in the 2nd pink box, also, the box is uncentered, it's supposed to be inline with the top box and only 10 pixels apart?

Hi Plane,

It looks like only the second right got the margin left tag, or the 20px. For the shorthand version of margin the first number is the top and the next three are the other sides going clockwise from the top. Try changing either the second right to margin: 10px 0; or adding margin: 0 0 0 20px; to the first and see if that helps.

I'm on for a while tonight so feel free to im me if you get stuck.

Cheers,

Hey that worked! (the 10px 0)

However, the text still appears funky?

http://jacobjacobi.com/starch/files/index.html