I am having problems with a design. I have 3 images that make up a bar. Like the one above this with the topic name. Theres an image for the left, and right corners, and the center image that gets repeated in width.

Now, I set both images to have an inline-block element, so one element does not take up the whole box.

Heres an example, with block display: (Ignore the dots)
--------------Page---------------
[ Title......................................]
[ Other elements........................]

Heres an example, with inline-block display:
--------------Page---------------
[ Title ]
[ Other elements... ]

I then float each element to the left, so it should appear like this:

--------------Page---------------
[ Left Corner ] [ Center Corner ] [ Right Corner ]

However, they do not appear. The divs do not have any content in them, but when I add content in them, it starts to show. I sort of figured it how, but knowing it is inline-block display, so it needs text in it for it to be displayed or it does not display.

My question is: How can I workaround this? I did used to know how it was done, but I cannot do it now.

Thanks.

_________________
Remember to search the forums, and external resources such as Google, before posting your problem. I am open to answer your questions, if you private message me.

Created by Will

As far as my experiences have proved, any "empty" elements will not be displayed, regardless of it's display style property.

To work around it you could always try placing a null (�) character in the element? Not elegant, but should work.

_________________
Salus populi suprema lex esto.

Wrong. Adding a div with the ID of image will display with the CSS properties width and height being set. You do not need to put content inside a div for it to display. My problem is, I am trying to stack the divs next to each other.

_________________
Remember to search the forums, and external resources such as Google, before posting your problem. I am open to answer your questions, if you private message me.

Created by Will

Oh right, sorry, i must not of understood the question. Presuming i understand your question now: you'll need to set explicit height and width lengths (i.e. Not the default 'auto').

_________________
Salus populi suprema lex esto.

take a look at http://www.w3schools.com/css/css_positioning.asp this should help give the answer your looking for. if not, shoot me the code your trying to use, and I'll see what I can figure out to get it the way you want to display.

_________________


"Let the fun Begin!"

http://southnorthgarden.com/
http://forksinternational.com

HTML/XHTML/CSS

using float:left; is not my deal...
try adding this:

position:absolute;
z-index:2;

if im not mistaken it should appear...

and replace you "float:left;" with this "left:0px"

_________________
Languages learning progress:

C <70%>
C++ <20%>
Java <2%>

Markup learning progress:

Html <80%>
CSS <85%>
Javascript <10%>