Nested divs need to be inline, not block

[Aaron]

Hi,

I'm trying to use style sheets instead of tables for layout, but I'm not
sure on how to do something...
I have a div (100% width) containing 3 other divs. Each needs to be lined
up next to one another inside the first div. Whenever I nest these divs
inside the first, it always treats each of them like a block element and
puts them on the next line down. If I try to define 'block: inline' for
each of them, the ones without images disappear, and if I try to define this
for just the div with the image, it does nothing.

Here's the code I'm using:

<div style="height: 19px; width: 100%;">
<div style="backgrou nd-color: #B5302B; width: 334px;"></div>
<div style="width: 19px;"><img src="images/innercorner.gif "></div>
<div style="backgrou nd-color: #B5302B; width: 100%;"></div>
</div>

Any help would be appreciated.

Thanks,
Aaron

[David Dorward]

Aaron wrote:

I have a div (100% width) containing 3 other divs. Each needs to be lined
up next to one another inside the first div. Whenever I nest these divs
inside the first, it always treats each of them like a block element and
puts them on the next line down. If I try to define 'block: inline' for
each of them, the ones without images disappear, and if I try to define
this for just the div with the image, it does nothing.

Here's the code I'm using:

<div style="height: 19px; width: 100%;">
<div style="backgrou nd-color: #B5302B; width: 334px;"></div>
<div style="width: 19px;"><img src="images/innercorner.gif "></div>
<div style="backgrou nd-color: #B5302B; width: 100%;"></div>
</div>

The problem here is that you are using generic containers to do something
other then contain something (and that width doesn't apply to non-replaced
inline elements).

I'd do something along the lines of:

<div style="backgrou nd-color: #B5302B; margin: 0; padding: 0;"><img
src="images/innercorner.gif " alt="??" style="margin-left: 334px;"></div>

--
David Dorward <http://dorward.me.uk/>

[Aaron]

That helped alot, David...thanks! I have one more area I'm stumped...I have
the following code:

<div style="width: 100%;">
<div style="height: 800px; width: 339px; background: #B5302B
url(week01/images/innerright.gif) repeat-y right;"></div>
<h1>Heading text</h1></div>

I'm trying to get the heading text to show up to the right of the div
containing the y-tiling background image. Right now, the heading appears
below the div, since the div is a block element. But when I set the display
of the div to inline, it disappears. Is there simple way to achieve this?

Thanks,
Aaron

"David Dorward" <do*****@yahoo. com> wrote in message
news:c0******** ***********@new s.demon.co.uk.. .

Aaron wrote:

I have a div (100% width) containing 3 other divs. Each needs to be lined up next to one another inside the first div. Whenever I nest these divs
inside the first, it always treats each of them like a block element and
puts them on the next line down. If I try to define 'block: inline' for
each of them, the ones without images disappear, and if I try to define
this for just the div with the image, it does nothing.

Here's the code I'm using:

<div style="height: 19px; width: 100%;">
<div style="backgrou nd-color: #B5302B; width: 334px;"></div>
<div style="width: 19px;"><img src="images/innercorner.gif "></div>
<div style="backgrou nd-color: #B5302B; width: 100%;"></div>
</div>

The problem here is that you are using generic containers to do something
other then contain something (and that width doesn't apply to non-replaced
inline elements).

I'd do something along the lines of:

<div style="backgrou nd-color: #B5302B; margin: 0; padding: 0;"><img
src="images/innercorner.gif " alt="??" style="margin-left: 334px;"></div>

--
David Dorward <http://dorward.me.uk/>

[Andrés Sedano]

Aaron wrote:

Hi,

I'm trying to use style sheets instead of tables for layout, but I'm not
sure on how to do something...
I have a div (100% width) containing 3 other divs. Each needs to be lined
up next to one another inside the first div. Whenever I nest these divs
inside the first, it always treats each of them like a block element and
puts them on the next line down. If I try to define 'block: inline' for
each of them, the ones without images disappear, and if I try to define this
for just the div with the image, it does nothing.
I't 'display: inline' and you should put your CSS code outside the
elements ;-)

Here's the code I'm using:

<div style="height: 19px; width: 100%;">
<div style="backgrou nd-color: #B5302B; width: 334px;"></div>
<div style="width: 19px;"><img src="images/innercorner.gif "></div>
<div style="backgrou nd-color: #B5302B; width: 100%;"></div>
</div>

Any help would be appreciated.

Thanks,
Aaron