CSS: Lining up Page Elements Horizontally - Montana Webmaster

CSS: Lining up Page Elements Horizontally

I don’t want these two Amazon book listings on my site to stack vertically. I want them side-by-side. I can do that with CSS.

TOOLS I NEED

  1. Software to upload and download files. I will use WinSCP.
  2. Software to work on WordPress style.css file. ***
  3. User name and password to website.

SITE REFERENCE

WHAT I NEED TO KNOW

The first thing I need to know is why did those boxes stack vertically? If I go to View Source on the page, I can see that the two Amazon ads are in <iframe>. An iframe will take the full width of the container it’s in. In this case, the iframe will take the full width of the sidebar. Effectively, the rule is width: 100%;

The second thing I need to know is that I don’t want to change every iframe I ever put on the whole site, so I need to restrict my changes to iframes in the sidebar. This will determine which CSS selectors I need to use.

The third thing I need to know is how the file structure of WordPress works so I can find and add to the correct file. In this case, the file is wp-content/themes/MontanaWebmaster/style.css. WordPress is very predictable. If you know how to do a task in one WordPress site, you can do that task in most WordPress sites.

*** To be Continued

 

*** There are other ways to work on the CSS in your WordPress site, but that is a discussion for a different post.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.