Question

I’m a bit of a noob when it comes to HTML and CSS but here goes…

Not sure what it’s called but in the following example how do i write CSS so ONLY the paragraph tag withing each of the elements is styled? For example how would you write CSS to make only

paragraph’s within wrapper>content to float left

and

paragraph’s within wrapper>sideContent to float right? All other paragraphs should be unaffected.

<div id="wrapper">
    <div id="content">
        <p>lorem ipsum...</p>
    </div>
    <div id="sideContent">
        <p>lorem ipsum...</p>
    </div>
    <div>
        <p>lorem ipsum...</p>
    </div>  
</div>

Not sure if this is valid but something along the lines of:

#wrapper #content p
{
  float: left;
}

#wrapper #sideContent p
{
  float: right;
}

Btw – What is this technique called?

Answer 1

Your CSS is valid for what you say you want to do. However, doing it this way will make the p within #content float inside the #content div (same for the p within #sideContent), they are not going to float on each side of the other paragraph. #content and #sideContent will still behave like normal divs and the second one will appear beneath the other.

What you most likely want is to float the divs themselves:

#content
{
  float: left;
}

#sideContent
{
  float: right;
}

Notice the lack of p and the #wrapper is not necessary since both divs should be unique anyway (since you gave them an id).