Thursday, November 15, 2018

Columned Lists Through CSS

I needed an easy way to have a list that a client could update that would display a three columns. Using a table was causing extra spaces to show up when changes were made. The pages were being edited in the Joomla Content Editor which is an awesome tool, but somehow spaces were being added.

Ryan Fidler, schooled me on CSS3’s Column Count which solved it all. This lesson was posted on W3Schools.com.

http://www.w3schools.com/cssref/css3_pr_column-count.asp

Responsive image not resizing proportionately.

Working a redesign the image on the home page were responding to the the size of the browser, but only the width was changing. Found this article on the web that solved my problem.

http://www.456bereastreet.com/archive/201306/how_to_proportionally_scale_images_that_have_dimension_attributes/

The CSS for the img was:

img {      max-width: 100%;
}

img {
max-width: 100%;
height: auto;
}

I hope this helps someone else.

Keeping Parent Div From Collapsing When Floating Elements Inside it.

I had a div with the id of footer. I needed to float three other divs ( div1, div2, and div3) inside this footer div. When I floated div2 and hit refresh in the browser to see my results the parent div (footer) collapsed.

A quick search brought me to this following link that fixed the problem.

http://stackoverflow.com/questions/218760/how-do-you-keep-parents-of-floated-elements-from-collapsing/11597829#11597829

The part i needed was to set the parent div to “overflow:auto;”