473,320 Members | 1,930 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,320 software developers and data experts.

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
4 10199
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 vão. 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 vão. O resto é imperfeito.
- Renato Russo -
Now playing: Jon Bon Jovi - Knockin on Heavens Door - acoustic
Jul 20 '05 #5

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

12
by: Michael Ramey | last post by:
Hi, I've have two divs, that are laid out side-by-side. (I'm floating the first div to the left) I need to set up css on these two divs so that the second div is vertically aligned to the...
15
by: red | last post by:
How do I center two side by side divs ? I've been writing css pages for a while but there's one thing tha still eludes me. I can center a div with margin auto. I can place two divs side by side...
6
by: Mel | last post by:
i need to have as many as 5 divs side by side on the same line without a break. if browser displays a horizontal scrollbar, its ok with my users and they can resize it. something like the...
26
by: meltedown | last post by:
I have 2 left floating divs on a page. Sometime the left side is larger, sometimes the right side is larger. I want the page to have a margin at the bottom of whichever div is the largest. If I...
5
by: tlyczko | last post by:
Hello, I've searched on toggling divs and didn't really find what I was looking for, I saved a bunch of different threads. I have a form with several different text boxes for things like dates,...
1
by: Oliver Block | last post by:
Hello, I am using JavaScript to create a div element as container for severeal other div elements (children). I want those children to appear side-by-side within the container, so I've set the...
1
by: judacris | last post by:
I've seen the threads here about molding 2 divs in a centered fashion. but I can't seem to solve this thing. my blogger blog is functioning well on my site for now, but the blog feed (left) and...
2
by: Liam Gibbs | last post by:
Hello everyone, This will be my third time posting this, but for some reason, my message isn't get through to the newsgroup, even after hours of waiting. So here goes again. I'm having huge...
3
jhardman
by: jhardman | last post by:
I'm almost to the point of using tables to position my elements. That is how bad this is. So here's the rundown. I have an old page (created by someone else) that I was trying to update to...
0
by: DolphinDB | last post by:
The formulas of 101 quantitative trading alphas used by WorldQuant were presented in the paper 101 Formulaic Alphas. However, some formulas are complex, leading to challenges in calculation. Take...
0
by: Vimpel783 | last post by:
Hello! Guys, I found this code on the Internet, but I need to modify it a little. It works well, the problem is this: Data is sent from only one cell, in this case B5, but it is necessary that data...
0
by: jfyes | last post by:
As a hardware engineer, after seeing that CEIWEI recently released a new tool for Modbus RTU Over TCP/UDP filtering and monitoring, I actively went to its official website to take a look. It turned...
0
by: ArrayDB | last post by:
The error message I've encountered is; ERROR:root:Error generating model response: exception: access violation writing 0x0000000000005140, which seems to be indicative of an access violation...
1
by: PapaRatzi | last post by:
Hello, I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...
0
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
0
by: Shællîpôpï 09 | last post by:
If u are using a keypad phone, how do u turn on JavaScript, to access features like WhatsApp, Facebook, Instagram....
0
by: af34tf | last post by:
Hi Guys, I have a domain whose name is BytesLimited.com, and I want to sell it. Does anyone know about platforms that allow me to list my domain in auction for free. Thank you
0
by: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.