hello, thanks for reading this. i have read so many templates and CSS tutorials. i can take one apart and put it back together. i can edit one if you give it to me. i like understanding. it frustrates me that i can edit a 2 or 3 column design and make is something different but i cant do one from scratch. i have read tons of things on google. i just want a basic simple elegant understanding. i am building a joomla template. a very simple one. i need 2 columns one to the left about 20 percent of the page and the other fills the rest of the space. I can make this work but if the content of my right column is more than my left the it will go back to the left margin. so i try to fix this and the content still splits but is forced to the right. the funny thing is i have done this on another template but i think i have done it the same way. i really just want to understand and be done in the simplist way. my play site is bj.dreamhosters.com/joomla you will note that the right column is forced over. the problem lies if you click downloads. you will see the header split from the content. i am not sure why. thank you so much.
Here this should clearup your understanding of how floats work. http://www.w3.org/TR/REC-CSS2/visuren.html
thanks. that was a good read. so my question is this in Figure D. how can i keep the text from flowing back under the floated image. I have done this on one site by simply containing it in a div and when i try it again it doesn't work.
I would put both the image and the text into seperate divs and float the image to the left. What do you mean you put it in a div but then it did not work?
Say you have two columns. Float the first one left and give it a width. The second one will now be on the right side but as you say the text in it will continue below the first one. You solve this by giving the second columns a margin-left equal to the width of the left columns. Try it out.
yes i agree with that. however i have seen some cases where just floating both left will accomplish the same way. which way is best?
Neither and both. Each method has positives and negatives for any given design. Use whichever you like, unless it bites you, then use the other. CSS is a powerful presentation language. Many of the jobs you have for it can be done in multiple ways. Because of interactions, one method may be more appropriate than another in a given case. An example of multiplicity may be found in the problem of clearing or enclosing float elements. There are five basic methods[1], each with variations of its own: Use the overflow property, three variations; Use the display property, two variations; Use the float property, two variations; Clear from within (the Aslett clearfix hack), three variations; and Clear from below, three variations. All modern browsers can use all the methods. IE, being an obsolete, non-compliant, bug-ridden PoS, usually needs us to be aware of its shortcomings; which are easily patched. None of those methods will work for every case, but for every case, at least one will work. It's up to the coder to understand the css specs, and how to apply them. The same applies to layouts, and the 'best' way to implement them. cheers, gary [1] See 'enclosing float elements', for a demo.