Nested divs need to be inline, not block

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="background-color: #B5302B; width: 334px;"></div>
<div style="width: 19px;"><img src="images/innercorner.gif"></div>
<div style="background-color: #B5302B; width: 100%;"></div>
</div>

Any help would be appreciated.

Thanks,
Aaron

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="background-color: #B5302B; width: 334px;"></div
div style="width: 19px;"><img src="images/innercorner.gif"></div
div style="background-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="background-color: #B5302B; margin: 0; padding: 0;"><img
src="images/innercorner.gif" alt="??" style="margin-left: 334px;"></div>

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

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" <dorward (AT) yahoo (DOT) com> wrote

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="background-color: #B5302B; width: 334px;"></div
div style="width: 19px;"><img src="images/innercorner.gif"></div
div style="background-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="background-color: #B5302B; margin: 0; padding: 0;"><img
src="images/innercorner.gif" alt="??" style="margin-left: 334px;"></div

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