The layout that my client wants has 2 columns currently. Text on the left and images on the right on the main content area. The images are to be aligned with each paragraph of text. Is it best to have 2 columns or keep it as one column and use CSS to move the images over to the right of the text? I think 2 columns would be best but I am open to suggestions. Thanks.

kohoutek
—
2012-10-13T02:39:43Z —
#2

I'd use a single column for it since the image complements the text (if I understood you correctly) and isn't an aside or otherwise disattached from the paragraphs. I'd use a float instead of marking up the text and image separately in two different divisions.

ralphm
—
2012-10-13T03:51:16Z —
#3

I also would be inclined to have one column and just float the images to the right, although there are a few things to consider, such as:

are the images aligned as you want in the image? I'd suggest having them all sitting level with the top of the paras beside them, or the floating idea will be trickier

Based on those points, it might be better to divide the content into horizontal sections with text and image floated in different directions.

cgacfox
—
2012-10-13T04:05:38Z —
#4

Can I set a width on the horizontal rule such as div class hr for the html and css would be hr width 610px. Would that work? I can try it and see but just checking first.

cgacfox
—
2012-10-13T04:08:06Z —
#5

I also have noticed that when I designed the site, the content section has a white border around the outside so instead of a small image for the background I now have 3. content_top, content_mdl, and content_btm to keep the effect. The content-mdl is not repeating on the y axis. I am sure I have all opening and closing divs correct. I will upload the code again so everyone can see what is going on.

cgacfox
—
2012-10-13T04:18:03Z —
#6

Never mind got it....had to add an overflow: hidden; on the content_mdl section.

ralphm
—
2012-10-13T04:19:27Z —
#7

cgacfox said:

Can I set a width on the horizontal rule such as div class hr for the html and css would be hr width 610px. Would that work? I can try it and see but just checking first.

Yes, it should work, although I don't like using the hr for that—as it's really a semantic element rather than intended for styling a page. Much nicer to use CSS borders etc.

As for the other issue, indeed, we need to see the live version.

cgacfox
—
2012-10-13T04:28:55Z —
#8

So instead of using hr how would I use the border? I would want it to be 610px wide. I don't think I have ever used that before.

ralphm
—
2012-10-13T04:34:48Z —
#9

The border will be as wide at the element it's applied to, so that's a case for wrapping the paragraphs in their own div, giving it a width and floating it left. E.g.

I am having a problem now with the images floating on the right. I would like them to be in line with each section but the middle image and bottom images are not cooperating. Please take a look at the code and see what I can fix in order to get them aligned with the sections. Thanks. http://foxdenwebsolutions.com/wingsofhope/index.html.

cgacfox
—
2012-10-13T19:04:18Z —
#12

This is probably not the best way to do it, but I created 3 different rtFs. This seems to work for now unless someone has a better idea.

cgacfox
—
2012-10-13T22:31:47Z —
#13

I don't know if it is because I am tired and need to step away from this site, or I am just really confused. I am having trouble getting the footer content to look right. On the image from the beginning of this thread, the footer will have 3 left nav links, 4 center nav links, and 3 right nav links. There will be image links to the FB and Twitter pages. Below that will be the copyright info and below that the designed by info. I don't know if I set up too many classes but I am getting confused as to what controls what. I have uploaded the new code to my site. http://foxdenwebsolutions.com/wingsofhope/index.html. Please let me know what I have done incorrectly. Thanks.

ralphm
—
2012-10-13T23:10:20Z —
#14

cgacfox said:

I am having a problem now with the images floating on the right.

The <p> around the middle image has a big top margin on it.

cgacfox said:

I am having trouble getting the footer content to look right.

Start by florating those <ul>s at the top of the footer.

ronpat
—
2012-10-14T12:32:40Z —
#15

A couple of revised images for you in case you are interested.Note that the heights are slightly different.

ronpat
—
2012-10-14T17:23:23Z —
#16

I opted for floats, too, until you sought vertically centered content within two columns of one row (as shown in the client's picture). That requirement prompted, this all-too-conventional layout suggestion.

Followed the same pattern in part of the footer with the expectation that it won't fly, as the footer content is not yet finalized. Simplicity, symmetry and centering are strong suits of table-cells. The low/no math feature is a plus.

Colorful outlines on this page are for layout testing and structural clarity. All are commented in css; some are "commented out" at the moment.

There is a styled <hr> tag on this page just to demonstrate that it can be done easily and occupies all of 4 characters on a line of html. The <div class=""></div> methods looks better IMHO, though. "Semantics" seems like an inappropriate argument in this case.

This is a "boxy" approach that I often use because it is stable and incredibly easy to add another line of content (cut-n-paste-n-change-the-text-n-pic); no math.

The original images plus the two that I added are required. All css is on the demo page. (It's been whacked, too.)

Thanks ronpat. I am checking your code against mine to see where I failed. I find it interesting that you used table elements in order to work the footer content. I will see if I can successfully integrate some of your code into mine. I do appreciate the help.

ronpat
—
2012-10-14T20:06:10Z —
#18

Never say "failed". My suggestion is "different". Layout-wise, use the techniques that work best for you. There are a few "improvements" in this demo such as the assignment of the page background-images and the code in the lists; plus, the common features of the "rows" resulted in a single classname instead of three different classes in several places. A good bit of simplification. More was possible. Things to consider when writing a page.

cgacfox
—
2012-10-14T20:11:41Z —
#19

Yes I was wondering if I had way too many classes going. That was what was confusing me. You simplified it.

ronpat
—
2012-10-14T20:56:31Z —
#20

FYI: if you want to add space above the top row, you can add a little padding to the top of the content_container: