I’ve had several requests to show how nested <div> tags can help design a page. In this instance I’m going to build a welcome page that resembles the one below.

Things You’ll Learn
  • Identifiers
  • Complex Selectors
  • Floats and Clears
  • Child Selectors
  • Background image positioning

Capture140There are a couple of things to note here:

  • I will be building a responsive page – to some extent. It will not be fully responsive like a v11/Foundation-based page would be. In my next post, I will take the code for this page and turn it in to a completely responsive, Foundation-based page.
  • I won’t use the same images since I only have this page as a screenshot.

So, let’s get started.

First thing’s first – I have to add the basics, the text, to the page. Right now it’s just 6 <p> tags and an associated <ul> for each.

Capture141

Before I do anything else, I have to start adding some divs. Here’s how to decide what should be in a <div> tag. First, think of <div> tags as containers. By default, browsers don’t add any styles or properties to a <div>. We have to add those.

If we look at the original design, there are 2 rows of 4 categories. This means that we need 2 container <div> tags, one to surround each row of categories…and then each category should be in its own <div>. I want each category to have its own <div> so I can style them properly. One thing I don’t want is to have to set the properties for each <p> tag, each <ul>, that would be AWFUL.

In all, we’re talking 10 <div> tags here – but don’t panic, it’s not too scary, I promise.

I’ll add the inside <div> tags first.

To do this, I need to highlight everything that needs to be in that container and click the Group icon in the Home tab of the ribbon.

Capture144When the Create Group window opens, I find and select ‘div’ and click OK.

Capture148

This results in a <div> tag surrounding the content I selected.

Capture149Repeat this step for the remaining 5 categories. Here’s the resulting XML Editor view alongside the code view:

Capture150Notice that I haven’t applied any styles yet. That is by design. I’m going to show you how to ‘cheat’ and apply styles to everything without creating a bunch of new classes! It’s seriously nifty!

Now, I’m going to surround the each set of four categories in a <div> tag. Do the same process as above – select all four categories and click the Group icon.

Capture152NOW I get to add some styles! Whoop! Whoop! First, I’m going to create a class for the outer <div>, the one that contains the 4 smaller ones. It’ll be div.category_group. Be sure to assign that new class to the two big <div> tags. Now for some basic properties. I want the div.category_group to extend across the page for now (width: 100%)…and I don’t want anything else floating to the right or the left of it (thus, the clear:both setting).

div.category_group
{
    width: 100%;
    clear: both;    
}

And I need each category item to float to the left. To make this happen, I’m not going to create a new class for the <div> tags, I’m going to create a complex selector that selects all <div> tags inside of the larger <div>. This relieves me of having to remember to apply a class to those nested <div> tags. It looks like this:

div.category_group div
{
    float: left;    
}
Finding identifiers and complex selectors in the Stylesheet Advanced View is pretty easy:

Capture162

 

Here’s what things look like via the Preview:

Capture154It’s super ugly – but it’s moving in the right direction. I have 2 rows of 4 categories each with just those few rows of CSS code. Now I need to style the <p> that identifies each category. Again, I’m going to use a complex selector.

div.category_group div p:first-child
{
    font-size: 16pt;
    font-weight: bold;
    text-align: center;
    color: #696969;
}

Let’s talk about that for a second. What I’ve done is tell CSS that I want it to find the first <p> tag inside any <div> that is located inside of the div.category_group…and style it the way I’ve indicated: centered, bold, grey, and 16pt. Any other <p> tags inside of that <div> will not be affected. However, if I add a <p> tag above that category label, then that new <p> will take the style, not the original label. Here’s a preview:

Capture155Better – but I’m not there yet. If you notice, the width of the nested <div> tags are all over the place. I need to set that so it looks better. I go back to the complex selector that selects the inside, nested <div>.

div.category_group div
{
    float: left;
    width: 25%;
}

All I’ve done is told the code to find <div> tags inside of the larger <div> and set the width to each one to 25%. Here’s the new look.
Capture156Wow, so much better! I need to center the <ul> tags inside each div and remove the bullets. Again, complex selectors to the rescue. First, the centering:

div.category_group ul
{
    text-align: center;
}

And now removing the bullets:

div.category_group ul li
{
    list-style-type: none;
}

And the results:

Capture157 It’s almost there! I need to add some icons now. For this example, I used free icons from flaticon.com. However, if you need icons for a production project, you’ll need to have the icons made in-house or buy some online.

Instead of adding the image directly in each <div> via an <img> tag, I’m going to add the image as a background image to each <div> tag. The problem here is that if we added it to

div.category_group div{}

Then all the divs would have the same image…and that is definitely not what I want. To solve this problem, I’m going to use IDs. The trick with IDs is that you can only use an ID once per HTML page.  That will not be an issue here.

I’ll create the following IDs:

  • #appearance
  • #settings
  • #performance
  • #users
  • #plugins
  • #codes
  • #tools
  • #dashboard

And then I need to add each ID to the appropriate <div> tag.

<div id="settings">
                <p>Manage Settings</p>
                <ul>
                    <li>Reading</li>
                    <li>Writing</li>
                    <li>General Settings</li>
                </ul>
            </div>

I follow this pattern for all 8 category divs.

Here’s how I apply an image to a <div> tag’s background:

#settings
{
    background-image: url('../Images/settings48.png');
}
#appearance
{
    background-image: url('../Images/hand14.png');
}

Now, I don’t know about you – but I think the build below has some issues…

Capture158Clearly, I have some work to do. I’m going to make sure the image only appears once and  appears in the center above the label. Note that I’m not applying these properties individual IDs making classes for each <div>. Instead, I’m going to add the CSS to position the image properly in the complex selector for the nested div.

div.category_group div
{
    float: left;
    width: 25%;
    background-repeat: no-repeat;
    background-size: 32px;
    background-position: center 0;

}

The result is this.
Capture159I’m much closer – just have to make space for the image above the label. To do that, I’m simply going to add some padding to the nested div. Remember, padding adds space inside an item, margin adds space outside. Thus, the use of padding here.

div.category_group div
{
    float: left;
    width: 25%;
    background-repeat: no-repeat;
    background-size: 32px;
    background-position: center 0;
    padding-top: 30px;
}

BEHOLD the beauty of CSS!!!!

Capture161

Download Files

There’s a lot to learn here…so please ask questions via the comments. I’m expecting a few – don’t let me down!

6 Responses to “Working with Nested Divs”

  1. John Espirian January 27, 2016

    Thanks for a really good guide to harnessing the power of CSS in Flare. I’d suggest classes rather than the ids that were used to specify the background images, just to avoid potential specificity issues down the line. I assume you haven’t jumped straight to the Foundation-based version because you wanted first to explain how the CSS works, which is probably a good approach. Foundation grids are pretty straightforward once you get the hang of them, though I’ve only ever used them a couple of times on real Flare projects.

  2. Laura January 27, 2016

    I specifically used IDs in this example because classes are ‘generally’ reserved for styles you want to use over and over. The positioning, etc of those images is specific to this example only – thus IDs instead of classes. However, classes could certainly be used instead.

    And I went with discussing nested divs for a number of reasons: first, not everyone can build HTML5 output and nested divs would work with older browsers and webhelp. Additionally, Foundation can be a bit intimidating – albeit my code isn’t exactly beginner-level stuff.

    Thank you for commenting! Stand by for the Foundation version of this page.

  3. John Espirian January 27, 2016

    Thanks for the explanation, Laura – all very sensible. I look forward to seeing the follow-up post.

  4. Laura January 27, 2016

    John, can you send me an explanation of how the IDs would become a problem down the road? Maybe I’m looking too narrowly at IDs here.

  5. John Espirian January 27, 2016

    If you were strict with your code so that your IDs were used solely for the purpose stated here, there wouldn’t be a problem. You just need to be mindful that any properties in an ID-based rule are going to win pretty much every specificity contest, so any competing rules in a less powerful selector are going to be ignored.

    I’ve seen CSS ‘creep’ so that ID rules grow over time, and then they can’t be overridden easily, which is a pain. I think this is why the CSS purists would recommend leaving the big guns of IDs out of the equation whenever possible.

    No doubt you’re too orderly of mind to fall foul of this!

  6. Laura January 27, 2016

    Ah, you are FAR too generous with your assumptions. If there’s a way for me to screw up my code, I’ll find it! I totally agree that ‘code creep’ is real – and that, for that reason, I should have used classes instead of IDs. Thanks for the guidance (and for saving me from myself)!

Leave a Reply?

Recent Posts