aaaugh, this is driving me up the wall!

[lilymc]

I'm trying to do a completely CSS (table-less) site, and imo whoever invented CSS needs to be kicked in the butt.

Ok, just kidding about that last part.

I've been trying all sorts of tutorials and sample layouts, and I'm still running into problems, like a box/content div going underneath the one next to it, instead of to the side of it. Or text running outside of the div and into other divs (what the heck is the purpose of a div if it doesn't enclose something, like a border should?)

And all sorts of other problems. I did get it to look somewhat decent in Firefox, but then when I tested it in IE, it was all wrong again. :a:

PLEASE help.

I'm very tempted to just go back to tables, to not further subject myself to any more headaches.

< / rant >

[lilymc]

If someone can take a look at this code for me... and see if you notice anything wrong. I've tried this a few different ways.

The way it is now, there is no margin or padding between the 2 main content areas, they're right up next to eachother. But when I add padding to the right side of the left area, the right box goes down to the bottom of the left box, instead of staying where it should.

(I know this is very basic stuff, but i'm used to dealing more with HTML)



body {
text-align: center;
font-family: Verdana, Arial, Helvetica, sans-serif;
background-image:url(../images/fig-background.jpg);
background-repeat: repeat-x;
background-color: #F4F1E0;
margin: 0;
font-size: 12px;
}

#wrapper {
width: 930px;
margin: 0 auto;
text-align: left;
}

#header {
height: 375px;
padding: 0;
margin: 0;
}

#left {
float: left;
width: 50%;
padding-bottom: 8px;
padding-top: 20px;
background-color: #FFFFEC;
}

#content {
width: 50%;
float:right;
padding-bottom: 8px;
padding-top: 20px;
}

#footer {
clear:both;
width: 100%;
height: 70px;
margin: 0 auto;
text-align:center;
background-color: #352216;
}
thanks to whoever can help.

[borrob]

seems quite logical to me:
if left = 50% plus padding and content =50% content cannot be fitted on the same line because it exceeds the 100% WIDTH ON THE SCREEN AND WILL BE PUT ON THE NEXT LINE...

[lilymc]

I figured it would do that with set numbers, but I figured with percentages it wouldn't be as restricted. (and as you can see, I was using a combination of percentages and pixels)

But apparently not. I'm pretty sure I tried it a few different ways, but I'll try it again. And btw, it wasn't only doing that this particular time, it does that all the time and that is just one of the many things... as I said before the divs don't seem to be a true border for anything, as it is with tables.

Thanks for replying. There was no need to shout though.

[thebloodpoolkid]

Do you have a working example we can look at? or post your HTML?

[borrob]

Didn't want to shout ( sorry about that ) hit the capslock without noticing....

[lilymc]

Do you have a working example we can look at? or post your HTML?

Thanks for replying... That particular problem is solved though. borrob was right, it went over the 100%, so that's why it was going down to the next line.

I guess I didn't know if the padding was included in the percentage or in addition to it. Because I've seen all sorts of crazy codes, with margins/paddings of high numbers, or negative numbers, etc, and i'm not used to that.


Didn't want to shout ( sorry about that ) hit the capslock without noticing....

Ok, no worries. :)