CSS Liquid Layout #2.1 (Some help modifying)

[Morales2k]

Greetings everyone,

I recently stumbled upon this layout and must admit that its the first one that I manage to understand... before this, CSS (tableless) layouts were alien jargon to me.

With that n00bness in mind, I took the challenge of modifying it myself... but apparently I messed it up big time.

The URL to look at the source is mse-designs dot com/demo.

What I really need is to extend the left column to the bottom... however, even after giving height:100% to all top containers (divs) it would not happen...

I hope someone can help me out on this... Before I get second thoughts on building my father's business website lmao.

[ddadmin]

Warning: Please include a link to the DD CSS code in question, in this case: http://www.dynamicdrive.com/style/la...1-fixed-fluid/

I gather you're asking how to have the green left column in the demo extend all the way to the bottom of the page? This is a well known problem/ limitation in CSS as of CSS 2.x. Adding "height:100%" doesn't address it. There are a few different solutions to this problem, so you may want to do a search on Google. Also, take a look at the CSS equal columns height script here on DD.

[Morales2k]

.... Therefore, the solution is to go with a FIXED layout? Google searches on the CSS topic are too broad. No way to narrow down to specifics, and I don't think I have time to spend all day site-jumping in search of solutions for this particular issue, I expected that being this the place where the layout was developed, I could get insight on what possible solution I could use to make it happen. Apparently it is as you say... browser interpretation of css has always been kind of cumbersome... No idea why there is no (or little) support for css 3 ... it is more advanced in every way... i guess we will have to wait for html 5 to go mainstream... or something similar... Thanks anyways Mr. Admin, the bit when u say that using "height:100%" will not address the issue, is more or less all I needed to know... I was going crazy thinking I was doing something wrong... but I see now, that to get that effect I will easily get it on a table layout... sure i loose the stylish hype of the table-less css layout... but what else can I do!?

[boogyman]

No idea why there is no (or little) support for css 3

There are two main reasons why CSS3 isn't widely supported. The first is that the spec hasn't been finalized, its still in its workgroup mode, basically meaning it's in the last stages of BETA. The second main reason is that once it becomes finalized it typically takes a full browser released to be implemented, which on average run about 2 years or so. cough cough IE will be like 5 lol

i guess we will have to wait for html 5 to go mainstream... or something similar

you will run into the same troubles here. The HTML5 spec is also in the workgroup phase, and since it is actually introducing new tags, it is very unlikely that you can truly start working with HTML5 until well after its become an official spec.

With that said, there are many obstacles that are unique to the internet, mainly because something can be implemented and distributed in the fashion that it does. Until IE6 pretty much becomes obsolete and only a handful of people are using it (right now its still very popular, despite IE7 and the impending release of IE8) there are going to be issues that force developers to create this ad-hoc modifications and/or extraneous code to deal with some of the glitches in the software.

Thanks anyways Mr. Admin, the bit when u say that using "height:100%" will not address the issue, is more or less all I needed to know... I was going crazy thinking I was doing something wrong... but I see now, that to get that effect I will easily get it on a table layout... sure i loose the stylish hype of the table-less css layout... but what else can I do!?

I may have mis-interpreted your quote there, but it sounds as if you are going to junk the standards concept just because you are unable to find out the solution to your question?

Incase you didn't know the spec, the default height and width of any element is comprised of the sum of its contents unless otherwise stated. What that means is that the block of code you wish to extend to the bottom of the layout is not appearing because the content doesn't reach that far. There is a solution to this problem, however it requires an image, and it can simply be a 1px by 1px image of the colored background you wish to use, or it can be an image that you repeat on the y-axis. To learn more about this feature, I refer to Alist Aparts Faux Columns

I hope you decide not to abandon your transition to standards compliant designing, and if you need help / tutorials on any issues please feel free to continue to post and one of our experts will do their best to not only answer your question, but help you to understand the theory behind it

P.S. CSS was alien code to me the first 2 years I started to develop with it, so you are not alone

[Morales2k]

Thanks for your post. Well, that goes for showing how much I really know about the development stages of HTML or CSS LOL. I was simply thinking with my fingers on my earlier post... lol.

Now, on the transition to standards... I solved it by switching the css to fixed height. You see... the issue was produced on the left column. When the content area had contents that surpassed the height of the left column, the left column would not stretch as far down as the content area. SO, here is what I did... On each page, I am including a header.php, leftside.php and footer.php pages that contain the div layout so I dont have to repeat myself coding it over and over... (im sure this is not novelty among developers to want to reduce workload lol). So splitting the layout in half on the spot where I insert main content for each page, I include everything, around my content on each content page. The detail where I insert my 'fix' is that on each content page, I have a php variable called height, and i use it on the style attribute of the div that is not expanding through. Depending on my content I will set different px value to that var that is inserted on the style tag... this way each page will look just as I want it to... more or less... and so far ... it is working ok on my trials... so there was not really a lot I had to modify. My css modifications are valid as per w3c css 2.1 validator... so I t hink I'm good !

Thanks for all your input guys!

[boogyman]

Well, that goes for showing how much I really know about the development stages of HTML or CSS

dont worry there are a number of professionals whom don't know that HTML5 and CSS3 are still in development

and btw... I am still learning the full development cycle myself, for instance, before this last week, I didnt' know that the blockquote element requires at least 1 other block level element before any output text can be given.
Eric Meyer is the one that informed me of that fact at a conference last week, so even us "professionals" are still learning... thats the nature of the web-development industry... there are always new technologies coming out and the term "you learn something new every day" has never applied more to a profession then web design/development

[Morales2k]

Heh! I'm afraid I've never used <blockquote> before... but then again... I am relatively young to web development... I'm 2 business websites fresh... like 4 hobbyist sites ... and that does not really make me a developer... but I surely developed some stuff. One thing that PHP has done for me is opening my eyes to the open source world of collaboration. This is where I have learned most of what little I know. Since I did not hit college for web design or development, much less any language... I self taught what I know. Practice makes perfect, and why would I go to college to study something that I will have to continually self-teach for the rest of my life to keep my knowledge current!? So I began self teaching it on the first place.

Thanks again for your polite comments.