this nested div question

Thread view:

Enable EMail Alerts

Start New Thread

Thread rating:

B McDonald - 28 Aug 2003 21:49 GMT

Hi. I am attempting to achieve the following layout:

/------------------------------------\

| text text text text text text text text |
| text text text text text text text text |
| ---------------------------------- |
| text text text | text text text |
| text text text | text text text |
| text text text | text text text |

\------------------------------------/

This is something of a unique block giving company info. So the style
defining it will not repeat.

Here's the HTML:

<div id="Block1">
<p>
text text text text text text text text
text text text text text text text text
</p>
<div id="Col1">
<p>
text text text
text text text
text text text
</p>
</div>
<div id="Col2">
<p>
text text text
text text text
text text text
</p>
</div>

And here's what I imagine for the CSS:

#Block1 {
background-color: #CCCC99;
etc;
}

#Block1 #Col1 {
etc;
}

#Block1 #Col2 {
etc.
}

But this doesn't work. I've tried a few variations and still I can't seem to
apply the style to the 2 inner columns.

Any ideas?

Brian

Reply to this Message

William Tasso - 29 Aug 2003 01:34 GMT

> Hi. I am attempting to achieve the following layout:
>
[quoted text clipped - 31 lines]
> </p>
> </div>

one </div> missing

> And here's what I imagine for the CSS:
>
[quoted text clipped - 15 lines]
>
> Any ideas?

I suspect the key is in the etc. Do you have a URL?

Signature

William Tasso - http://WilliamTasso.com

Reply to this Message

B McDonald - 29 Aug 2003 02:00 GMT

> I suspect the key is in the etc. Do you have a URL?

I don't have a URL. I'm localhosted.

Perhaps I should ask this question:

If I have a containing block, the style of which I may set using this CSS
rule:

#ContainingBlock1 {
/* rules */
}

How can I reference a div nested within a <div id="ContainingBlock">
element?

For example, <div class="Col1">?

#ContainingBlock div.Col1 {
/* rules */
}

doesn't work.

Brian

Reply to this Message

Brian - 29 Aug 2003 03:43 GMT

> If I have a containing block, the style of which I may set using this CSS
> rule:
[quoted text clipped - 5 lines]
> How can I reference a div nested within a <div id="ContainingBlock">
> element?

http://www.w3.org/TR/REC-CSS2/selector.html#descendant-selectors
http://www.w3.org/TR/REC-CSS2/selector.html#child-selectors

> For example, <div class="Col1">?
>
[quoted text clipped - 3 lines]
>
> doesn't work.

For your example, you forgot the "1" in the id name.

#ContainingBlock1 div.Col1 {
/* rules */
}

Signature

Brian
follow the directions in my address to email me

Reply to this Message

Mikko Rantalainen - 29 Aug 2003 10:19 GMT

B McDonald / 2003-08-28 23:49:

> Hi. I am attempting to achieve the following layout:
> [Broken ASCII graphics removed. Please, use fixed width font to draw these.]
[quoted text clipped - 4 lines]
> <div id="Col2">
> </div>

</div>

> And here's what I imagine for the CSS:
>
[quoted text clipped - 6 lines]
> etc;
> }

You don't need ancestor selectors here because the "Col1" id is by
definition unique and you can simply select it with "#Col1". I'd
also suggest to always use all lowercase for id and class names
because you'll end up doing a typo sooner or later and some browsers
are known to make difference on letter case.

Are you sure you link the style correctly? Does
* { border: solid thick red; }
correctly add borders to every element on the page?

Have you already visited http://validator.w3.org/ and checked both
markup and CSS?

In the future, please, add URL. If the page isn't on a public
server, then make it so.

Signature

Mikko

Reply to this Message

Johannes Koch - 29 Aug 2003 11:01 GMT

> B McDonald / 2003-08-28 23:49:
>
[quoted text clipped - 3 lines]
>> <div id="Col2">
>> </div>

[...]

>> #Block1 #Col1 {
>> etc;
>> }
>
> You don't need ancestor selectors here because the "Col1" id is by
> definition unique and you can simply select it with "#Col1".

Maybe the div with id="Col1" appears within a div with id="Block2" in
another document referencing the same CSS.

Signature

Johannes Koch
In te domine speravi; non confundar in aeternum.
(Te Deum, 4th cent.)

Reply to this Message

Mikko Rantalainen - 29 Aug 2003 20:07 GMT

>>>#Block1 #Col1 {
>>
[quoted text clipped - 3 lines]
> Maybe the div with id="Col1" appears within a div with id="Block2" in
> another document referencing the same CSS.

Then one shouldn't use id but class instead, IMHO. It might be that
there's only one such element per page, but the real intent of that
element isn't unique but instead that element belongs to a class of
elements.

After saing that, I must admit that you're absolutely right and there's
nothing in the spec forcing to select ids directly without ancestor
selectors. And I never claimed anything like that.

Signature

Mikko

Reply to this Message

Webmaster Forum / HTML, CSS, Scripts / CSS / August 2003

this nested div question