Need help again with jewelry site - positioning of text and images

On my current jewelry site I cheated with a bunch of <br> codes to align text and images alternating left and right. I just copied and pasted these from the current site to the new design and it really looks bad. So I removed them. Even worse. I am thinking that I will have to set up the jewelry pages with rows so that everything aligns correctly. Am I thinking in the right direction?

current site -

new design -

One option for creating the effect you have on the old site is to place the image inside the associated paragraph and give that paragraph overflow: hidden;. E.g.

    <a href="images/fallnecklace6.png" data-lightbox="image-3"><img class="rtF" src="images/fallnecklace6thmb.png" alt="Fall Colors Polymer Clay Beaded Necklace"></a> 
    Here is another gorgeous example using polymer clay beads. I also used matching pearl beads, Bali style siver bead caps, silver spacer beads of different styles and sizes, Swarovski crystals, and seed beads.
p {overflow: hidden;}

This worked well. Thanks Ralph. Are there any other ways to do this? I just want to make sure that I have other ideas for how this can be accomplished for future reference.

I would give Ralph’s method two :tup: :tup: .

Off Topic:

Necklace page, top paragraph… I believe that the word “chocker” is supposed to be “choker”.


Fixed the misspelling…thanks. What if I don’t want the text wrapping around the photos, though. How would I handle that? That is why I was thinking rows or maybe 2 columns within the right column.

OK, I’ll prepare some examples of rows and columns. (They won’t be as elegant as Ralph’s, though :slight_smile: )

Maybe I will play around with the content container for the jewelry pages to see what I can come up with.

I’ll send you what I have worked up so far, in case they are useful.
I just noticed that you have changed the thumbs. The ones in this code are a mix of before and after. Oh, well :slight_smile: .
CSS is at the top of each page with notes.
With outlines, as usual.

2a. Ralph’s code added to your page.
2b. An easy modification of Ralph’s code to put the text and image into separate columns.

The following are my “busier” methods of doing the same things plus two more.

1a. 1a should render identically to Ralph’s 2a.
1b. 1b should render identically to 2b.
1c. Rows. Text and image appear in separate rows. Image can be positioned left, center, right.
1d. Columns. Text and image appear in separate columns. Image (or text) can be positioned top, middle, bottom. Middle is the default.

Thank you so much again ronpat. I appreciate all the work that you put into helping me. These examples are just what I needed to understand the different ways that this can be accomplished. I do have a question on the format of a couple of the CSS tags. I am getting better with my coding but still am not 100% sure of what I am doing.

.content > p and .content div p + p confuse me as to what they are accomplishing. The > and + are mathematical symbols to me. I do realize that math is necessary for web design but…

Again thank you for all your help.


I’m not very confident that this is a clear explanation of the > and + selectors, but hopefully it will help.

The > symbol is called the “child selector”. It addresses elements on the right side of the “greater than” symbol that are the immediate children of the element on the left side of the “greater than” symbol.
For example: .bracelets > p {…} applies styles to the paragraphs that are the immediate children of .bracelets but not to paragraphs that are in a sub div (“grandchildren” or descendant paragraphs). This is a very convenient way to target one level of nested selectors. This technique is very commonly used when styling drop down menus with sub menus.

<div class="bracelets">
    <p>This is the first "outside" paragraph</p>
        <p>This is a nested descendant paragraph, which is also a sibling of the second nested p</p>
        <p>This is another nested descendant paragraph, which is also a sibling of the first nested p, and they are adjacent</p>
    <p>This is the second "outside" paragraph</p>

The + symbol is the “adjacent sibling selector”. It targets objects on the right side of the “plus” symbol that are siblings of and immediately follow the selector on the left side.

For example: p + p targets the second and third p (both are preceeded by a p):