Hi Gang,
Man, do I feel like a novice with CSS....
Here is the html that Drupal is spewing out. I want the two fields: field-field-body and field-field-rashi to be two columns with the right column having a colored background.
Here is the html
<div class="content">
<div class="field field-type-text field-field-body"> <div class="field-items"> <div class="field-item odd"> <p>Text in the left column goes here.</p><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur quis augue sed diam aliquam venenatis. Ut est justo, facilisis non, eleifend id, mattis sed, nunc. Proin sed dolor ac est semper ultricies. Vivamus faucibus massa at elit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Mauris eget eros. Aenean mattis. Maecenas sagittis, est id porta commodo, mauris nibh gravida elit, et elementum odio lacus nec erat. Nunc at dui. Proin tincidunt bibendum magna. Maecenas in ipsum sit amet tellus vehicula fermentum. Praesent tincidunt lectus quis ligula. Nullam elementum rhoncus lectus. Duis ligula. Integer porta. Donec vitae velit vel ipsum ullamcorper iaculis. Integer et tortor. Integer vel nisl.</p> <p>Sed rhoncus tempor ipsum. Cras metus lectus, congue sit amet, gravida et, cursus at, eros. Suspendisse vitae elit ut libero dictum euismod. Maecenas egestas felis eu ipsum. Etiam diam. Nunc at lorem in massa ultrices pellentesque. Nulla aliquet tempus dolor. Ut viverra, diam sed sollicitudin euismod, pede ante posuere purus, non pretium eros nisi sit amet felis. Aliquam erat volutpat. Aenean in nunc. Pellentesque adipiscing adipiscing lacus. Sed risus. Nam rhoncus congue dolor. Donec vel purus ac purus luctus ultricies. Ut luctus, velit nec hendrerit mattis, justo risus scelerisque velit, nec varius dui eros vitae mauris. Morbi sem.</p> <p>Vestibulum mauris erat, vehicula ac, egestas ut, porttitor id, mi. Vestibulum at sem aliquet libero ultrices vulputate. Suspendisse quis diam at velit venenatis viverra. Fusce vel nisi non lectus feugiat eleifend. Etiam tortor arcu, ullamcorper quis, consequat at, tempus vel, elit. Integer vestibulum eros ut neque. Etiam pellentesque fringilla nisi. Pellentesque pretium lacus. Mauris a nunc. Vestibulum ultricies, pede ac congue tincidunt, arcu mi ullamcorper magna, at interdum turpis lectus vel ante. Ut nec tortor. Etiam at est non lorem faucibus egestas. In adipiscing iaculis ipsum. In lobortis elementum metus. Integer sem metus, semper porttitor, sollicitudin at, consectetur id, nisl. Nullam justo tellus, tristique interdum, auctor posuere, laoreet vitae, diam. Aenean nec dolor. Proin non ligula. Aliquam lobortis, est nec accumsan tincidunt, elit lectus sollicitudin leo, aliquam sodales massa ligula id ipsum. Morbi adipiscing risus nec dolor.</p>
<p>Donec ut ante. Etiam laoreet adipiscing massa. Ut in nisl ac magna pretium adipiscing. Aenean cursus ligula quis justo. Donec elementum, massa eleifend cursus fermentum, sapien urna interdum justo, sit amet aliquet lectus massa bibendum leo. Curabitur bibendum mollis tellus. Proin porttitor volutpat justo. Maecenas urna odio, volutpat at, tempor non, mattis a, urna. Nam et tellus rhoncus sapien facilisis varius. Proin faucibus tristique enim. Maecenas sagittis lectus ut nisi.</p> <p>Quisque vel dui. Cras tempus. Sed adipiscing. Vivamus tristique semper pede. Etiam porta. Cras condimentum lectus. Phasellus non neque ac nisi pellentesque tempus. Aenean eleifend urna sit amet nisl. Nunc justo nunc, tristique ut, fringilla ac, lobortis rhoncus, metus. Sed molestie nunc non purus. Nam dui mauris, sagittis ut, luctus et, tincidunt sit amet, diam.</p> </div> </div> </div> <div class="field field-type-text field-field-rashi"> <div class="field-items"> <div class="field-item odd"> <p>Text in the right column with the colored background, goes here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur quis augue sed diam aliquam venenatis. Ut est justo, facilisis non, eleifend id, mattis sed, nunc. Proin sed dolor ac est semper ultricies. Vivamus faucibus massa at elit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Mauris eget eros. Aenean mattis. Maecenas sagittis, est id porta commodo, mauris nibh gravida elit, et elementum odio lacus nec erat. Nunc at dui. Proin tincidunt bibendum magna. Maecenas in ipsum sit amet tellus vehicula fermentum. Praesent tincidunt lectus quis ligula. Nullam elementum rhoncus lectus. Duis ligula. Integer porta. Donec vitae velit vel ipsum ullamcorper iaculis. Integer et tortor. Integer vel nisl.</p>
<p>Sed rhoncus tempor ipsum. Cras metus lectus, congue sit amet, gravida et, cursus at, eros. Suspendisse vitae elit ut libero dictum euismod. Maecenas egestas felis eu ipsum. Etiam diam. Nunc at lorem in massa ultrices pellentesque. Nulla aliquet tempus dolor. Ut viverra, diam sed sollicitudin euismod, pede ante posuere purus, non pretium eros nisi sit amet felis. Aliquam erat volutpat. Aenean in nunc. Pellentesque adipiscing adipiscing lacus. Sed risus. Nam rhoncus congue dolor. Donec vel purus ac purus luctus ultricies. Ut luctus, velit nec hendrerit mattis, justo risus scelerisque velit, nec varius dui eros vitae mauris. Morbi sem.</p> <p>Vestibulum mauris erat, vehicula ac, egestas ut, porttitor id, mi. Vestibulum at sem aliquet libero ultrices vulputate. Suspendisse quis diam at velit venenatis viverra. Fusce vel nisi non lectus feugiat eleifend. Etiam tortor arcu, ullamcorper quis, consequat at, tempus vel, elit. Integer vestibulum eros ut neque. Etiam pellentesque fringilla nisi. Pellentesque pretium lacus. Mauris a nunc. Vestibulum ultricies, pede ac congue tincidunt, arcu mi ullamcorper magna, at interdum turpis lectus vel ante. Ut nec tortor. Etiam at est non lorem faucibus egestas. In adipiscing iaculis ipsum. In lobortis elementum metus. Integer sem metus, semper porttitor, sollicitudin at, consectetur id, nisl. Nullam justo tellus, tristique interdum, auctor posuere, laoreet vitae, diam. Aenean nec dolor. Proin non ligula. Aliquam lobortis, est nec accumsan tincidunt, elit lectus sollicitudin leo, aliquam sodales massa ligula id ipsum. Morbi adipiscing risus nec dolor.</p> <p>Donec ut ante. Etiam laoreet adipiscing massa. Ut in nisl ac magna pretium adipiscing. Aenean cursus ligula quis justo. Donec elementum, massa eleifend cursus fermentum, sapien urna interdum justo, sit amet aliquet lectus massa bibendum leo. Curabitur bibendum mollis tellus. Proin porttitor volutpat justo. Maecenas urna odio, volutpat at, tempor non, mattis a, urna. Nam et tellus rhoncus sapien facilisis varius. Proin faucibus tristique enim. Maecenas sagittis lectus ut nisi.</p> <p>Quisque vel dui. Cras tempus. Sed adipiscing. Vivamus tristique semper pede. Etiam porta. Cras condimentum lectus. Phasellus non neque ac nisi pellentesque tempus. Aenean eleifend urna sit amet nisl. Nunc justo nunc, tristique ut, fringilla ac, lobortis rhoncus, metus. Sed molestie nunc non purus. Nam dui mauris, sagittis ut, luctus et, tincidunt sit amet, diam.</p> </div> </div> </div> </div>
Here is my current attempt at the css
.field-field-body div div {
width: 60%; float: left; padding: 0 2% 0 0; }}
div.content div.field-field-rashi div.field-item { width: 35%; float: left; color: red; padding: 0 0 0 2%; background-color: #EADCC2; }
I can tell from Firebug that the first declaration is getting applied, but not the second. So the float is working but the background color isn't. Ideally I'd like to have the two columns stay separate, no matter how much text is in either column. Do I do that with minimum-height declarations? I just find CSS mysterious sometimes. Thanks for the help. You can check out the sample node at http://fasttrackcoachacademy.com/node/9 if you want.
Thanks much,
Shai