CSS help needed - makind a fluid/liquid layout

[Pedro]

CSS help needed - makind a fluid/liquid layout - SOLVED

Hey everybody
hope someone can help me with this...

http://www.cubobrasil.com.br/sampaopen2009/

I wanted to make the boxes to the sides appear, no matter the resolution of the user

so I tried makind 3 divs, one for each part (left, container, right), and setting their width to 19%, 62% and 19% respectively, to make the total 100%

but it doesn't seem to be working as I planned :/

also, I wanted to center the boxes vertically. I found an example online, and tried to use, but if I set the height to 100% instead of a fixed value, it just doesn't work

the part to make that is the #outer... until the end of the #inner

so, if you could help me, I'd greatly appreciate

thanks in advance

Pedro

 

[hr.mohr]

There are A LOT of tutorials on this subject, but it's a pain to get all browsers to play nice at the same time. I like the stuff on http://www.alistapart.com/ and this book: http://www.zeldman.com/dwws/

When using strict mode you might have to set height on html and body to 100% to get 100% height on div's. Another trick is to use auto margin

 

[teller]

I usually end up saying to hell with it and using at least one table for layout. CSS just isn't robust enough IMO.

 

[JBCM627]

Ick, what a mess. This CSS is possibly the messiest I've ever seen... mixing padding, margins, %'s, positioning, floating, aligning, display, browser-specific css... just for those boxes on the side? No wonder it doesn't work. I'd honestly clear it all out and start over.

I'll take a more detailed look and see if I can get it to work...


..And don't use tables for layout, css will be more than "robust" enough.

 

[teller]

Ick, what a mess. This CSS is possibly the messiest I've ever seen... mixing padding, margins, %'s, positioning, floating, aligning, display, browser-specific css... just for those boxes on the side? No wonder it doesn't work. I'd honestly clear it all out and start over.

I'll take a more detailed look and see if I can get it to work...


..And don't use tables for layout, css will be more than "robust" enough.

I knew someone wouldn't like that...it's just that CSS doesn't even have vertical centering as part of the spec...or does it?

 

[Pedro]

Ick, what a mess. This CSS is possibly the messiest I've ever seen... mixing padding, margins, %'s, positioning, floating, aligning, display, browser-specific css... just for those boxes on the side? No wonder it doesn't work. I'd honestly clear it all out and start over.

I'll take a more detailed look and see if I can get it to work...


..And don't use tables for layout, css will be more than "robust" enough.

yeah, sorry about that it was all fixed sizes, and I tried to "convert" it to a liquid layout...
but I don't know enough css to do that, apparently

but...the padding is because of the cube image at the #main div

 

[pjk]

I agree with JBC, just restart. 9 times out of 10 it is easier to restart than trying to find what is going wrong with each piece. Doing what you want should actually be pretty easy. Start from scratch and go from there. I can help you with it, just let me know where you get stuck. If nothing else, you can always find a pre-made template and modify it from there, that way you don't have to start from scratch. It also helps if you validate it as you go so you don't have too many mistakes at the end.

 

[JBCM627]

Yeah, I'm looking at it some more - padding and borders can interfere when you try and size something, because they can increase the size (depending on browsers). So if the container is 62% in width, putting a 20px border on it will make it 62%+40px wide.

And css does have a vertical-align:middle, but it can be hard to use effectively.

 

[Pedro]

Yeah, I'm looking at it some more - padding and borders can interfere when you try and size something, because they can increase the size (depending on browsers). So if the container is 62% in width, putting a 20px border on it will make it 62%+40px wide.

And css does have a vertical-align:middle, but it can be hard to use effectively.

oh, maybe that's the reason why 19 + 62 + 19 is not summing up to 100

I've uploaded a new version...is almost as I want (at least on my browser), but the right one is a bit lower than the left one, for some reason

oh, and I validated my css file, and it says it's valid! lol

 

[JBCM627]

I think for some reason the title is interfering... not sure why, though.

If you combine the title and container divs into another larger "wrapper" div and style/position that, that may fix it. You can set the width of that to 62% and the blocks on the side to 19% because then you don't have to worry about padding/borders (and remove the 62% on the container div). This should fix the v-align problem too.

 

[Pedro]

oh, let me try it

*tries*

well, the width seems to be fixed (except for that little space to the right, even setting the #rightpart margin-right to 0)

I have margin-top set to 25%, and by some reason it seems to be exactly in the middle O_o

but the right one is still lower...



oh, and here's the original page, if it helps with something: http://andreasviklund.com/files/demo/andreas05/

 

[JBCM627]

On the wrapper, just do float:left instead of margin:left... that fixes it for me. (Thanks for firebug )

Also, if you wanted spacing between the announcements and the wrapper, add padding to the #leftpart.p and #rightpart.p

 

[Pedro]

On the wrapper, just do float:left instead of margin:left... that fixes it for me. (Thanks for firebug )

Also, if you wanted spacing between the announcements and the wrapper, add padding to the #leftpart.p and #rightpart.p

ha! genius

thanks a lot, Jim

what resolution are you using? could you take a screenshot, please?

I'm afraid in lower resolutions the text won't fit into 19%...

 

[JBCM627]

On the wrapper, just do float:left instead of margin:left... that fixes it for me. (Thanks for firebug )

Also, if you wanted spacing between the announcements and the wrapper, add padding to the #leftpart.p and #rightpart.p

ha! genius

thanks a lot, Jim

what resolution are you using? could you take a screenshot, please?

I'm afraid in lower resolutions the text won't fit into 19%...

No problem. Looks good in FF3/IE7 too

Try making the font size a % too? Or, overflow:hidden. My resolution is 1680x1050; it looks like it works down to 1125px in width.

 

[Pedro]

No problem. Looks good in FF3/IE7 too

Try making the font size a % too? Or, overflow:hidden. My resolution is 1680x1050; it looks like it works down to 1125px in width.

I don't know how to make the font size %...

I added the overflow, but I'm not sure what it does

I need someone with low resolution to test it...

oh, and now I have a new problem...there are 2 pages which use a different css, with no cube image ("Inscrição" and "Lista de Inscritos")
I tried adjusting them too, the text appears to the left and right, but no box around it O_O

oh, never mind...just found out that by some reason I deleted the box class from the 2nd css

Ha! Looks sweet now. I just need to find sponsors to fill those boxes

 

[JBCM627]

I don't know how to make the font size %...

font-size: .85em;? Not sure if that works...

Nope, never mind that part.

I need someone with low resolution to test it...

Resize the window?

I tried it in 800x600, it looks fine with that now.

 

[Pedro]

I don't know how to make the font size %...

font-size: .85em;? Not sure if that works...

Nope, never mind that part.

I need someone with low resolution to test it...

Resize the window?

I tried it in 800x600, it looks fine with that now.

great