By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
437,677 Members | 1,798 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 437,677 IT Pros & Developers. It's quick & easy.

Nested divs need to be inline, not block

P: n/a
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
Jul 20 '05 #1
Share this Question
Share on Google+
3 Replies


P: n/a
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/>
Jul 20 '05 #2

P: n/a
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*******************@news.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="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/>

Jul 20 '05 #3

P: n/a
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="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

Jul 20 '05 #4

This discussion thread is closed

Replies have been disabled for this discussion.