side by side divs without floats or absolute positioning

[TrojanWarBlade]

If I put two "img" tags one after the other in a web page I get the two images side by side.
If I create two divs they will appear one OVER the other.
OK, I guess you're gonna say that each div is the full width of the page but it happens even if I set the width.
Next idea I guess is to float them. Sorry guys, don't want to use them cos they have no depth and I want to center them. Floating left does not help center them!
I tried the obvious "Display: inline" style but that doesn't help.
Any ideas?


Trojan.

 

[Foamcow]

Divs are block level elements and so will always appear on a new line, just like heading tags or paragraph tags.

If you have 2 divs you want side by side and the pair of them centered then you can wrap them in a container div and center that.

Or else, experiment with margins

Foamcow Heavy Industries - Web design and ranting
Buy Languedoc wines in the UK

 

[Vragabond]

This seems like one of those moments when we would be better off knowing what you want to accomplish rather than knowing what you did to accomplish something.

 

[TrojanWarBlade]

I realise that divs are block elements but I'm no better off with spans.
I need the box model of a block level element (div) because of box sizing but I need to loose the "use max width" and "next line" characteristics of the div element.
I need something that will take the minimum width available rather than the whole page width to wrap up my boxes so that I can center them.


Trojan.

 

[TrojanWarBlade]

I want to create a batch of images that have labels underneath (and centered) each.
I want the images to be centered and to wrap if there are too many for the width.


Trojan.

 

[Vragabond]

Excuse me if I don't fully understand, but how would you center images if you want to have them as many in line as to fill the screen? Won't that make it more or less justified?

 

[kaht]

I think in his case his images are going to be varying widths. If you think about the way text will center itself in this instance:

<style type="text/css">

div {
   width:500px;
   text-align:center;
   margin:0 auto;
   border:1px solid black;
}

</style>

<div>
lkjsad flkasf lksadfj laskdfjlsdkfjladdkfjdfkadk jas fslskad jflk jsaflkf lakd jflaksdfj asdlkfj asdflkj adsfkjsd flaksf ladksfj lakdjflsdlkdjfldldfjldfjlkdfjlsdfjlkdjflajflaksdjflskajdflkjadlfkjaldfjlskdjflkj alskdfjlaskdfj ldfjlsdkfjldfj aldfjldkfjaldfjlafj
</div>

The text wraps at different points depending on how long a chunk of text w/o spaces is. It seems to me that you'd want inline elements for something like this.... Have you tried using <span>s?

-kaht

How much you wanna make a bet I can throw a football over them mountains?