How to center div containing 2 floats?

HTML & CSS
1

Hi - well finally my first wordpress page is nearly done!

http://www.greensmoothie.com/1gs/

And I’m stuck at images-captions again. If you could scroll down page to the first line of 2 photos of people, my questions are:

(1) Is there a way to center this containing div so the 2 images floating inside will be centered in the middle of page? Without using a table?

(2) If there’s a way to do it without table, then is there a way to keep the caption within the image width? Something along the lines of Paul’s:

td.imgwrap {width:1%} /keeps cap within img width/

(which you’ll see in my css). So I can delete the inline style for caption width?

To be more flexible with images + captions, I’d like to not use Gary’s “.photo pre” method - it’s the 2nd line of photos. I’m hoping to just use my regular css like “flt” (floatleft) with wordwrap.

(3) At the very bottom of the page, where it says:

“Powered by WordPress, Theme by Val Archer”

do you think I should also say “with help from sitepoint.com forums” and link here? Or will that bring too many newbies here? If everyone’s welcome, then I’d like to add the link.

thanks! - Val

2

Hi Val,

I’m not sure how these questions have changed since the answers we gave you before.:slight_smile:

Unless you want to drop support for IE6 and 7 then the only way to do what you want (automatically) without using a table is this method that I showed you before and uses an expression for ie6 and 7.

The above method will also center the blocks in the available space also which answers your other question.

If you need to support IE6 and 7 then a table is still the easiest solution and can also be centred using margin:auto.

3

Try this and make adjustments where necessary



    
    <div style='text-align:center; width:800px; margin:1em auto;'>
    	
    	<div style='float:left; text-align:left; width:365px; margin:1em 1em 1em auto; background:#fff none'>

	        <img src="index-001_files/dan-team.jpg" alt="Dan + family" width="365" height="183" />
	    		<p style='width:88&#37;; margin:1em auto'>
				Pastor Dan Schaefer, his wife Diane, and daughters Tamara and Melody run this beautiful
                               site from rural Michigan. Call
				989-689-0005 (EST). Dan custom-makes our GoGreen
				Sprouter with foodgrade materials. When not drowned in
				Sprouter parts, he loves doing pastoral work in prisons.
		     	</p>	
		     	
			</div>
			
			
    	<div style='float:left; text-align:center; width:365px; margin:1em auto 1em 2em; background:#fff none'>
    		
	    		<img src="index-001_files/val-sm.jpg" alt="Val Archer" width="124" height="183" style='margin:0em auto'/>
	    		<p style='width:88%; margin:1em auto'>
		    		Val Archer in South Africa built the first GoGreen Sprouter. 
		    		Val writes this site. Read 
		     		<a href="http://www.greensmoothie.com/1gs/help.html">
		     			About Us
		     		</a>.
		     	</p>	
		     	
  		</div>
  
    </div>

.

Screen-dump: http://www.graabr.com/lSQOUb/

.

4

That will only work for fixed size containers which I believe Val wanted to get away from as she has added inline styling to make it work.:slight_smile:

If the images were different sizes then auto margins on the parent are of no use unless the parents width is also changed.

5

Here we go - try this with no fixed image widths or heights:


    <div style='text-align:center; width:99.98&#37;; margin:0em auto'>

			<h6 style='float:left; width:16.5%; height:200px;margin:3em auto'>
				div spacer goes here
			</h6>
    	
    	<div style='float:left; text-align:left; width:33%; height:200px'>

	        <img src="index-001_files/dan-team.jpg" alt="Dan + family"/>
	    		<p style='width:88%;margin:1em auto'>
					 	Pastor Dan Schaefer, his wife Diane, and daughters Tamara 						and Melody run this beautiful site from rural Michigan. Call
						989-689-0005 (EST). Dan custom-makes our GoGreen
						Sprouter with foodgrade materials. When not drowned in
						Sprouter parts, he loves doing pastoral work in prisons.
		     	</p>	
		     	
			</div>
			
			
    	<div style='float:left; width:33%; height:200px'>
    		
	    		<img src="index-001_files/val-sm.jpg" alt="Val Archer"/>
	    		<p style='width:88%; margin:1em auto'>
		    		Val Archer in South Africa built the first GoGreen Sprouter. 
		    		Val writes this site. Read 
		     		<a href="http://www.greensmoothie.com/1gs/help.html">
		     			About Us
		     		</a>.
		     	</p>	
		     	
  		</div>
    </div>

Screen-dump

.

6

I think you misunderstood :slight_smile: (or I have ;))

You have widths on all the containers (99.8%,16.5%,33%, 88% etc). If the images are wider than those containers then what? If I understood correctly you could not have any widths on those elements as the width is defined by the image that is in place (which could vary in width) and the process needs to be automatic as shown in the demo I posted above.

Of course I’m guessing that Val wanted an automatic process so I may be wide of the mark anyway :slight_smile:

7

I would be tempted to set all image widths to 99.98% and they will shrink slightly inside the parent divs.

Perhaps it may be better to wait until Val returns with more expicit information.

.

8

Yes, I may be barking up the wrong tree :slight_smile:

9

Hi Paul - I love that page, thanks for the <ul> tip - I don’t recall it :slight_smile: John’s initial solution works for me. Fixed size containers are fine so long as I can make them a % … I left out the auto margins as you mention, and yes it still works fine without them :slight_smile:

>If the images are wider than those containers then what?

I check in 800x600 mode and if it works there (fixed image size fits within the div %) - then I just hold thumbs + hope it works in mobile phones too.

Hi John - I love this! It gives me easy quick control over the image position and caption width/position with just a few lines of css! Works perfectly in IE6/7. And the logic of it will work for multiple images all over my site. Thank you!

Amazingly, it also solves another need of mine, to have image-with-caption in one box, and have text-only (no image) in a parallel box. I was using a table for that but now I’ll switch to your solution.

AND I can leave out inline styling totally - keep it all in the css.

It’s so cool, I can’t stop hovering the blue firebug boxes over it to see again + again how cool it looks :slight_smile: It’s just what I was looking for.

Check it out: http://localhost/1gs/

I gave the containing div a width of 100%, then each child div its own % - in this case 60% + 40% - and then defined the <p> of the caption.

So it looks like this, all of this css I had already as I use it often:

.lft {text-align:left}
.flft {float:left}
.cnt {text-align:center}
.hcnt {margin:0 auto} /h=horizontal, easy for me to remember/
.ptop20 {padding-top:20px}
.p10 {padding:10px}
.w100 {width:100%} /similarly, w90, w60, w40/
.cap {font:0.7em “Lucida Sans Unicode”,Verdana,sans-serif; color:black; line-height:1.5} /captions/

<div class=“clearfix ptop20 w100”>
<div class=“flft cnt w60”>
<img src=" />
<p class=“cap p10 lft”>
text
</p>
</div>
<div class=“flft cnt w40”>
<img src=" />
<p class=“cap p10 lft w60 hcnt”>
text
</p>
</div>
</div>

Now I’m going to eat my supper at the bottom of Africa, my cat’s been crying for his dinner for nearly 2 hours :slight_smile:

thank you! - til tomorrow, Val

10

sorry, forgot to upload the new css + post to wordpress online - was working on my hard drive. The link works now!

11

Hi Val,

Glad to be of help and to get some feedback.

>>> If the images are wider than those containers then what?
I would be tempted to set all image widths to 99.98% and they will shrink slightly inside the parent divs.

.

12

Hi John - I added another row with image-caption on left and text-only on right so you can see how well your solution works for me, at:

at http://www.greensmoothie.com/1gs/

Sadly, since both children are floated, I can’t vertically align the one against the other. I have to adjust with top margin.

A few last questions :slight_smile:

(1) >set all image widths to 99.98%

I don’t understand? Each image has its set width in ratio to its height. I cut it to the size I want (in relation to surrounding text) in a photo editor. The same image can be different sizes on different pages.

(2) You use width 99% for a reason don’t you, on the container? Rather than my 100%. I forget, what’s that reason? Something to do with an IE6/7 bug…

(3) I just checked in 800x600 and Paul’s right, in this case the images are wider than the div, but they don’t break at all, by that I mean the second div doesn’t fall down to next row. That’s all I really care about.

I guess I don’t need to worry that the divs overlap? The only fallout I can see is that in resolution above 800x600, the caption on the left image is wider than the image, and at 800x600 it’s narrower, which I’m ok with.

(4) The “text-align:center” you have on the containing div, is there a reason for that? Now that I have it set at full-width and each child as a percentage of full, I don’t need to keep text-align:center do I? Because it doesn’t do anything?

(5) What does the “none” mean in your ‘background:#fff none’?

thanks! - Val

I resonate with John’s solution because it does what I’ve been doing for 12 years in tables - so it’s very quick for me. I have all the ol’ html of my <table>'s site right there in text editor, I see what percent widths + what alignments I used, and just stick the same css inside the new divs. Nothing for me to think about! I can morph into a zombie…

It reflects my old table structure – except now <table> and <tr> are one <container div> and <td>s are the <child divs> - with the ability to do alignments inside td/div the way I’m used to in tables - a unique align for each of image + caption.

I like that the container + children don’t need special labels (like imgwrap which I’ll forget). All they need is at least one of 14 css rules, namely:

  • 8 for width - .w30, 40, 50, 60, 70, 80, 90, 100(99.98?)

  • 2 for center-position + text-align - .cnt, hcnt, and perhaps I can get vcnt {vertical-align:middle} and Paul’s vbtm {vertical-align:bottom} to work some day. I’m a bit frustrated I don’t have control over the vertical positions as I did in <td>

  • 4 for side-position + text-align - lft, flft, rgt, frgt (f=float).

When I need margin or padding, I add it to the css on as-needed basis, with m for margin + p for padding. And top, rgt, btm, lft. Most are reusable often, e.g. 10 or 20 px.

so mtop20 = margin-top:20px, and p20 = padding:20px. I hope it’s ok that I have about 5 classes on each, that this won’t slow the browser down.

I like to use em for fonts, and px for margin/padding, and limitless for line-height, so when it’s zoomed in or out, it stays looking the way I want.

Paul - I did study your page carefully but I’m not sure if it’ll give me the flexibility I need so I decided to try John’s first, and it works pretty perfectly except for the image-wider-than-div you predicted :slight_smile: - and seemingly no control over horizontal position.

What happened historically is that the first time I came to convert this page into css, I was scared of floats so I’d made a blanket decision never to use them inside my writing box! So I used a table to align a text block vertically against a box with image+caption (today’s example at http://www.greensmoothie.com/1gs/ - but now redone in divs)

Then along the way you gave me clearfix.

Then the other day Ralph mentioned in the thread where he showed me how to do the h2 sub-headers (with background color + leaf-on-left) at:

http://www.sitepoint.com/forums/showthread.php?p=4514765#post4514765

Ralph: “A floated container encloses floated content by default. So floating a container is a valid way to clear floated contents. The reason why it works to float the container here is that the block-level content above and below it (that is, the paragraphs) is width 100%.”

And I misread that as: “A container encloses floated content by default”! And suddenly it clicked for me that all I have to do is stick the floats in a container box labeled clearfix and they’ll never float out and nothing will get in. Since I mis-read what he said, I don’t know now if this is true!

But anyway this misreading of Ralph totally lifted my fear of floats. So it was easy to take the next step of abandoning tables altogether, and switching to floated divs.

thank you! - Val

13

It would refer to the other shorthand properties such as the background-image etc. It is unnecessary anyway because the shorthand “background” will reset all properties that aren’t specified to their defaults anyway - for which background-images will be none anyway. Just use background:#fff.

Paul - I did study your page carefully but I’m not sure if it’ll give me the flexibility I need so I decided to try John’s first, and it works pretty perfectly except for the image-wider-than-div you predicted :slight_smile: - and seemingly no control over horizontal position.

We seem to be talking at cross purposes here and I apologise to John because it was me that got the wrong end of the stick. The differences are Chalk and cheese :slight_smile:

I was under the impression that you wanted vertical and horizontal alignment that was automatic and needed no action by you to perform which my example does. It is totally flexible - needs no widths or extra classes and works if the images are any size and will always match captions with the images.

On the other hand you are happy applying widths to the elements and changing the widths to suit whatever image you have in place so you don’t actually need an automatic process so I misunderstood.

In your current example for instance if you change this image for an image say half (or double its size) then you would also have to change the parents size and the caption size to fit or it would break. For each image you place in the page you will need to adjust the sizes accordingly.

However that seems to be what you want to do and you are happy to do that then that is fine also. It’s just not what I was doing :wink:

14

Hi Paul - yes you’re right most of the time I can’t use an automatic process! I see automatic is what I asked for (“is there a way to keep the caption within the image width?”) but when I play with your code, I see automatic is not what I need :slight_smile: I’m grateful I asked for the wrong thing because your example is great for doing it automatically!

This page gives an indication of the control I need over individual images + captions:

http://www.greensmoothie.com/pic-water.html

With your automatic code, I see I can adjust image position, e.g. <li style=“margin-right:60px;”> but 2 things I can’t seem to do is (a) have a text-only box (no image) and (b) keep image + caption separate, e.g. I can’t do this with your example:
<img /><br style=“text-align:left”>caption text.</br>

I don’t even know if it’s possible in xhtml to give br a style. But giving image and caption separate <p>'s didn’t work, so I tried to see if it would work on the <br>.

Also I tried to get one image to vertically align against the other, with this on the right smaller image: <li style=“vertical-align:middle !important;”> but it didn’t work. They both obey the ul li rule vertical-align:bottom.

BUT nevertheless your <ul> DOES seem to act like <tr>. It keeps the images in the same box. Is it possible you could stick ul into John’s code for me?

I’m thinking along these lines. If I have an img in a td, and I want a caption tied to the img, I stick the img in a table inside the td.

Here - taking the 2nd example at http://www.greensmoothie.com/1gs/ with image on left in, say, div1-lft, and text-box on right in div1-rgt - I have a floated image in div1-lft. If I want to vertically align that image in div1, then surely all I need do is stick it in a div2 inside div1?

BUT I also need div1-lft, to be the same height as div1-rgt, so I can vertically align div1-lft against div1-rgt.

Can you do something like:

<ul>
<li> - can we omit <li> and just have <ul> at the top+bottom?
<div1-lft>
<div2-floated image>
</div2>
<p>caption text</p> - does it go here? Or before </div2>?
</div1-lft>
</li> (omit?)

<li> (omit?)
<div1-rgt>
<p>text</p>
</div1-rgt>
</li> (omit?)
</ul>

This would give me vertical alignment, wouldn’t it?

In the first row of 2 images, I can’t understand why the right box overlaps the left in 800x600 mode. Why doesn’t the right box of 40% float against the left box of 60%? Why does it float away from the right side of container and over into the left box, when 60+40=100? The 2 images add up to only 489px. I have 558px available for that 100% width box.

At all other resolutions, it acts correctly, and the right box floats against the left box, not into it.

thank you! - Val

15

P.S. and of course the container box would stay, so it’s:

<div-container, width 100%>
<ul>…
</ul>
</div>

16

With your automatic code, I see I can adjust image position, e.g. <li style=“margin-right:60px;”> but 2 things I can’t seem to do is (a) have a text-only box (no image) and (b) keep image + caption separate, e.g. I can’t do this with your example:
<img /><br style=“text-align:left”>caption text.</br>

You would need to lose the break altogether and replace it with a span.

e.g.


<span>caption text.</span

Then in CSS you would set the span to display block and set the text-alignment and padding etc that you require.

Also I tried to get one image to vertically align against the other, with this on the right smaller image: <li style=“vertical-align:middle !important;”> but it didn’t work. They both obey the ul li rule vertical-align:bottom.

vertical-align only applies to inline elements on the same single line. It does not apply to images in separate floats as they are not on the same single line and it does not apply to block level elements like divs.

If you had two images within one float then they could be arranged with vertical-align but only in respect to each other. It will not vertically align them in respect of the containing div. Only tables/cells (or display:table) can vertically align block content (or using the hacks I added for IE in my demo).

This was an older demo to test vertically alignment but doesn’t have the automatic captions that my other demo has.

In the first row of 2 images, I can’t understand why the right box overlaps the left in 800x600 mode.

I’m not sure what you mean here as I don’t see an overlap exactly unless this is a specific browsers issue that you are seeing. Ie6 will of course drop the element to a new line underneath as it gets too small.

17

Hi Val,

I find it hard to follow your exact requirements and thought that if it is possible for you to:

  1. find another webpage with images and text
  2. supply a range of images and text to fit on the page.

.

18

Hi Paul - thank you for the vertical-align info. Now I’m clear :slight_smile: Also for the span tip.

I think I won’t learn display:table at this time because I vaguely recall you saying it doesn’t work universally. I see the only time it’s in my css is when Gary used it for the photo pre thing, and I won’t be using that any more.

>I’m not sure what you mean here as I don’t see an overlap exactly unless this is a specific browsers issue that you are seeing

Funny, when I switch to a screen resolution of 800x600, the right box overlaps the left box. In FF I can see the overlap with web-developer “display block size”. And in other browsers I can see it’s happening because the right image is squashed up against the left, while there’s space on the right of the right image.

It’s not serious, I don’t mind if in 800x600 only, the right box looks to me like it’s floating over to the left.

Thanks for pointing out the IE6 drop! Guess I’ll fix that…

Hi John - don’t worry, I gave up the idea of vertical align. It was just me musing whether it’s possible to do it between <ul>'s… I’ll live without it! I find your code very adaptable to all my needs.

My problem’s solved, thank you deeply to both Paul and John!

I’m very grateful I’m now doing all my images in divs rather than tables, because on mobiles a div can drop, whereas a table forces horiz. scroll.

all the best, Val

19

Display:table and the related values don’t work in IE7 and down :).

THere are so many links posted here, could you post the one where the overlap occurs? :slight_smile:

20

Hi Val,

I have uploaded your file and set the CSS outine property for DVS and P’s:
http://johns-jokes.com/downloads/sp/greensmoothie/index-001.php

.