CSS Help Thread?

[TristanLuigi]

borders, padding etc makes the elements wider than 50% of the page

I'm perfectly aware of that. I tried using * { } to set all of that to zero and it still was misaligned.

The actual page is https://948eb80984457b49ad6e2bd6d33c441d0b275460.googledrive.com/host/0B3XHendkSpxwZ3J3ZEJSVDdUc1k/fusioncorp/fusioncorp.html
cuz for some reason he pic the entire page in a frame

It's GDrives. It allows you to host websites using Google Drive.

[Ad Bot]

[Headcrab Zombie]

I'm perfectly aware of that. I tried using * { } to set all of that to zero and it still was misaligned

yeah but you still have borders, and those add width...
disable the borders and the divs are suddenly right
if you want borders of 2px, try setting the width of the divs to something like calc(50% - 2px);

[TristanLuigi]

yeah but you still have borders, and those add width...
disable the borders and the divs are suddenly right
if you want borders of 2px, try setting the width of the divs to something like calc(50% - 2px);

I'll try that.

[Headcrab Zombie]

actually that should be 50% - 4px, since you have 2px on each side

[Headcrab Zombie]

no why are you changing the outer wrapper width stop
wrapper width 100%
inner panel width calc(50% - 4px)
padding

These are the changes I made and it looks fine now
outer wrapper panel inline style: width:100%

.panel{
 padding:0px;
 width: calc(50% - 4px);
}

or

.panel{
 padding:10px;
 width: calc(50% - 24px);
}

[Anybody]

what is this calc? such luxury much ease wow

[TristanLuigi]

actually that should be 50% - 4px, since you have 2px on each side

Yeah, I realized, but through trial and error it looks like it needs to be - 24px. I think that has to do with the 10px padding (10 + 10 + 2 + 2 = 24).

HOLY stuff IT WORKED
YOU ARE A SAVIOR

EDIT: Post written before your post above.

[Headcrab Zombie]

EDIT: Post written before your post above.

well actually the edit I put in after this post was just the part after "or" with padding

[TristanLuigi]

well actually the edit I put in after this post was just the part after "or" with padding

no I wrote that post before you even made that post
anyway now the text is extending the cells and screwing with the formatting, is there any way to just clip off the extra space? overflow:hidden doesn't appear to work

[Taboo]

what is this calc? such luxury much ease wow

We can't all be web dev pros like you.

[Foxscotch]

calc();

im in love

[Taboo]

im in love

Don't forget: CSS is in fact more of a language than HTML.

[Headcrab Zombie]

Don't forget: CSS is in fact more of a language than HTML.

It's not "more" of a language, it's just a completely different type of language

[pefu19]

just add margin:0; padding:0; to the main container (body, html). also, 100% width is actually 100% width of the page, but 100% height is another story, and its really loving annoying.

[TristanLuigi]

100% height is another story, and its really loving annoying.

oh god
I haven't actually gotten that to work yet but it's because the top box doesn't shrink correctly, I think the size is locked to be too big because of the image. Even overflow:hidden; doesn't work even though it did for the other panels.