467,206 Members | 1,378 Online
Bytes | Developer Community
Ask Question

Home New Posts Topics Members FAQ

Post your question to a community of 467,206 developers. It's quick & easy.

Making empty divs appear side by side

I have the following divs:

<div style="background-image: url(images/house_01.jpg); width: 249px;
height: 346px;"></div>
<div style="background-image: url(images/house_02.jpg); width: 251px;
height: 346px;"></div>

Since by default, the display property is set to block, they show up on
different lines. Since each div contains half of a complete background
image, I need then to show up side-by-side. The thing is, when I set the
display to 'inline', the divs just collapse. Anyone know what the best
way to get around this is?

Thanks,
Aaron

P.S. I can't use normal images, since there is already going to be an
image in one of the divs that will appear to overlap the background
image (that's the look I need).
Jul 20 '05 #1
  • viewed: 9932
Share:
4 Replies
Aaron wrote:
I have the following divs:

<div style="background-image: url(images/house_01.jpg); width: 249px;
height: 346px;"></div>
<div style="background-image: url(images/house_02.jpg); width: 251px;
height: 346px;"></div>

Since by default, the display property is set to block, they show up on
different lines. Since each div contains half of a complete background
image, I need then to show up side-by-side. The thing is, when I set the
display to 'inline', the divs just collapse. Anyone know what the best
way to get around this is?


It depends what you want to do with the rest of the page, but I'd
suggest using the "position" property, probably with the value
"absolute". An alternative would be to combine the two images into a
single one with software such as IrfanView (free) or PMView (good but
not free).

HTH
Jul 20 '05 #2
Els
Aaron wrote:
I have the following divs:

<div style="background-image: url(images/house_01.jpg);
width: 249px; height: 346px;"></div>
<div style="background-image: url(images/house_02.jpg);
width: 251px; height: 346px;"></div>

Since by default, the display property is set to block,
they show up on different lines. Since each div contains
half of a complete background image, I need then to show up
side-by-side. The thing is, when I set the display to
'inline', the divs just collapse. Anyone know what the best
way to get around this is?


Use float:left on those divs and put them together in a div with
width:500px? Make sure you add a <div style="clear:both;"></div>
after the two divs, but inside the container, so that the
container actually will 'hold' the two inside.

--
Els http://locusmeus.com/
Sonhos vem. Sonhos vo. O resto imperfeito.
- Renato Russo -
Now playing: INXS - Suicide Blonde
Jul 20 '05 #3
Aaron wrote on 01 jul 2004 in
comp.infosystems.www.authoring.stylesheets:
I have the following divs:

<div style="background-image: url(images/house_01.jpg); width: 249px;
height: 346px;"></div>
<div style="background-image: url(images/house_02.jpg); width: 251px;
height: 346px;"></div>

Since by default, the display property is set to block, they show up
on different lines. Since each div contains half of a complete
background image, I need then to show up side-by-side. The thing is,
when I set the display to 'inline', the divs just collapse. Anyone
know what the best way to get around this is?


display:inline; does not collapse, at least not in IE6:

<div
style="border:green 1px dashed;
background-image:url(images/house_01.jpg);
width:249px;height:346px;display:inline;">
</div>
<div
style="border:red 1px dotted;
background-image:url(images/house_01.jpg);
width:251px;height:346px;display:inline;">
</div>

[borders added for conveniance, since I have no img]

--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)
Jul 20 '05 #4
Els
Evertjan. wrote:
Aaron wrote on 01 jul 2004 in
comp.infosystems.www.authoring.stylesheets:
I have the following divs:

<div style="background-image: url(images/house_01.jpg);
width: 249px; height: 346px;"></div>
<div style="background-image: url(images/house_02.jpg);
width: 251px; height: 346px;"></div>

Since by default, the display property is set to block,
they show up on different lines. Since each div contains
half of a complete background image, I need then to show
up side-by-side. The thing is, when I set the display to
'inline', the divs just collapse. Anyone know what the
best way to get around this is?
display:inline; does not collapse, at least not in IE6:


Only in quirksmode, and indeed, only in IE.
They collapse in Firefox or IE in Standardsmode.
<div
style="border:green 1px dashed;
background-image:url(images/house_01.jpg);
width:249px;height:346px;display:inline;">
</div>
<div
style="border:red 1px dotted;
background-image:url(images/house_01.jpg);
width:251px;height:346px;display:inline;">
</div>

[borders added for conveniance, since I have no img]


IE in standardsmode doesn't even show the borders, where
Firefox does.

--
Els http://locusmeus.com/
Sonhos vem. Sonhos vo. O resto imperfeito.
- Renato Russo -
Now playing: Jon Bon Jovi - Knockin on Heavens Door - acoustic
Jul 20 '05 #5

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

12 posts views Thread by Michael Ramey | last post: by
15 posts views Thread by red | last post: by
6 posts views Thread by Mel | last post: by
26 posts views Thread by meltedown | last post: by
1 post views Thread by Oliver Block | last post: by
jhardman
3 posts views Thread by jhardman | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.