Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

HTML

Posted by Jennifer Hughes
Jennifer Hughes
2,083 Points

General HTML question

Hello,

I am having a difficult time, or at least I think I am, understanding the "div" element. My understanding is that it's used to put elements together that you want in the same group.

Under this basic understanding, I will create a div element to wrap around certain elements, but when I then try and style that div class, the styling rarely works.

I guess what I am getting at is, can someone explain how the <div> works? Below is my HTML of one page, with <divs> included, even though I don't think I know exactly what purpose they're serving. Thanks in advance.

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8">
        <title>Jennifer Hughes</title>
            <link rel="stylesheet" href="css/normalize">
            <link href='http://fonts.googleapis.com/css?family=PT+Sans+Narrow:400,700|Droid+Serif:400,700|Open+Sans+Condensed:700,300' rel='stylesheet' type='text/css'>
            <link rel="stylesheet" href="css/style.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
  <header>
    <div class="group-content-container">
        <div class="group">
            <nav class="secondary-nav">
                <ul id="secondary-nav" class="group">
                    <li id="menu-item1"><a href="contact.html"id="secondary-nav">CONTACT</a></li>
                </ul>
            </nav>
        </div> <!--end of secondary-nav-->
            <h1 id="main-header">JENNIFER HUGHES</h1>
            <div class="primary-nav">
                <nav class="primary-nav">
                    <ul class="main-nav">
                        <li><a href="index.html"class="selected">Home</a></li>
                        <li><a href="about.html" class="menuitem">About</a></li>
                        <li><a href="portfolio.html" class="menuitem">Portfolio</a></li>
                        <li><a href="blog.html" class="menuitem">Written Words</a></li>
                    </ul>
                </nav>
            </div><!--end of header-->
</header>
<div class="main-container">
    <p id="me">
        <img src="images/me.jpg" alt="photo of me" class="align-center">
    </p>
</div>
<footer>
    <p id="copyright">&copy; 2014 JennHughesDesign.</p>
</footer>
</body>
</html>
Juan Gallardo
Juan Gallardo
1,568 Points

I don't understand what is your specific question. Did you want an overview of when to use a <div>? or did you want help troubleshooting something

Rich Bagley
Rich Bagley
25,869 Points

Hi Jennifer,

Do you have an example of a style that doesn't work for one of your divs please and we can take a look at why?

Thanks

-Rich

6 Answers

Juan Gallardo
Juan Gallardo
1,568 Points
Juan Gallardo
Juan Gallardo
1,568 Points

Basic anaology

Think of a <div> as a burrito. You need to wrap ingredients (other elements) but you could wrap them in various ways. And sometimes you can eat them a la cart. In other words, you don't NEED them per se. But they help keep things neat.

Basically you can use a div to wrap sections of related content and this way you can write less CSS classes and prevent CSS that conflicts each other.

Your issue

The reason that your styling is not taking place is because your classes are overriding each other. And you are not using CSS inheritance for example

You can better target things when you give the div a class and then use inheritance. for example.

CSS

footer .coolDivWithNavigation ul li a {
    color: #333;
}
Erik McClintock
Erik McClintock
45,783 Points
Erik McClintock
Erik McClintock
45,783 Points

Jennifer,

Your understanding of what the div is used for is correct; a div creates a 'division' in the code that groups together like elements and is generally used to format parts of your page structure. There are a variety of reasons that you could be seeing difficulty in successfully styling elements that you have grouped in your div, and to really help there, we would need to see an example of the HTML and CSS that you were having trouble with. Something to keep in mind, though: when you apply styles to your div, you're applying styles to a block-level container element. Thus, certain styles that you try to apply will need to be applied to the individual elements within your divs. For example, in the HTML you provided above, you have a nav wrapped in a div. To apply styling to the links within that nav, you would still want to target those links with the appropriate selectors; you wouldn't apply a 'text-decoration' property to the div itself, but to the links within. Additionally, you're applying the same classes and IDs to multiple elements, which could be overwriting some of your styling or causing things to look different than you're expecting/wanting. But, there again, we would need to see what you were trying to really help out there.

Erik

Aurelian Spodarec
Aurelian Spodarec
7,369 Points
Aurelian Spodarec
Aurelian Spodarec
7,369 Points

Hi,

If its about DIV tags, its groups them .

So lets say you want to build a website. With a header, content and footer.

It would look like you start by taking all in one div in my case so you can adjust it later one how you want but its not necessary i guess.

So i would use DIV tag to group element for header :

Navigation bar
Logo
search bar

On my content , i would wrap my all content below in a DIV like mainContent and :

Left bar:

Advertisement News

Content, where is the stuff that people look at for :

Articles etc..

Footer:

Navigation bar (optional) your copyrights name

. So now that we know what we want what go where , we can start building blocks with div .

So i would like this page to be lets say fixed at position of 1200px width and the heigh as long as its need to .

So now we have a 1200px wide box in a div bar that has all our content.

In it, we have header , 1200 px wide as we set the page and lets set it on 200px height . This is one .

Later we have content left bar and Main content .

We set the left bar e.g. 400 px and the content , where articles are we set it 800 px so its 1200px .

later we set footer with e.g. height of 80px.

I hope this is not messy , and understable.

Heres another think to see if this helps more

http://scr.hu/2icp/00u4v

Aurelian Spodarec
Aurelian Spodarec
7,369 Points

What Erik McClintock said too xd , i just had loaded page and i wrote then and uh heh he wrote before me :D

Jennifer Hughes
Jennifer Hughes
2,083 Points
Jennifer Hughes
Jennifer Hughes
2,083 Points

Thanks everyone for your input thus far. Here is an example where I don't think the <div> is working.

I am trying to set the max-width, max font-size, and line length, so the content adjusts based on the user's screen size. I've used .wrap as the div class.

I did put `<div class="wrap> on each of my HTML pages. I assumed that is needed if I want each page to pick up the rule.

Ok, here goes:

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8">
        <title>Jennifer Hughes</title>
            <link rel="stylesheet" href="css/normalize">
            <link href='http://fonts.googleapis.com/css?family=PT+Sans+Narrow:400,700|Droid+Serif:400,700|Open+Sans+Condensed:700,300' rel='stylesheet' type='text/css'>
            <link rel="stylesheet" href="css/style.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<div class="wrap">
    <body>
     <header>
        <div class="group-content-container">
            <div class="group">
                <nav class="secondary-nav">
                    <ul id="secondary-nav" class="group">
                        <li id="menu-item1"><a href="contact.html"id="secondary-nav">CONTACT</a></li>
                    </ul>
                </nav>
        </div> <!--end of secondary-nav-->
            <h1 id="main-header">JENNIFER HUGHES</h1>
            <div class="primary-nav">
                <nav class="primary-nav">
                    <ul class="main-nav">
                        <li><a href="index.html"class="selected">Home</a></li>
                        <li><a href="about.html" class="menuitem">About</a></li>
                        <li><a href="portfolio.html" class="menuitem">Portfolio</a></li>
                        <li><a href="blog.html" class="menuitem">Written Words</a></li>
                    </ul>
                </nav>
            </div><!--end of header-->
</header>
        <img src="images/me.jpg" alt="photo of me" class="align-center">
<footer>
    <p id="copyright">&copy; 2014 JennHughesDesign.</p>
</footer>
</div>
</body>
</html>

/*********************
GENERAL
**********************/

* {box-sizing: border-box;}

.wrap {
    margin: 0 auto;
    max-width: 58%;}

body    {
    margin: 0px;
    font-family: 'Open Sans Condensed', sans-serif;
    background-color:#F9FADD;
    font-size: 1.125em;
}

#secondary-nav {
    text-align: right;
    color:; #332f29;
    font-size: .666em;
    margin-right: 25px;
}


h1 {
    font-size: 4em;
    text-transform: lowercase;
    font-family: 'Open Sans Condensed', sans-serif;
    background-color: #FB1B40;
    color:#D4CEAC;
    text-align: center;
    width: 650px;
    margin-left: auto;
    margin-right: auto;
    border-radius: 75px;}


footer {
visibility: hidden;}    

/*********************
HOME PAGE
**********************/

img {
    width: 778px;
    height: 547px;
}

img.align-center {
    display: block;
    margin: 0 auto;}

/*********************
HYPERLINKS
**********************/

li .menuitem
 {color: #332f29;}


ul {list-style-type: none;}

li .selected {
    color:#8fa68e;
}

nav li {
    list-style-type: none;
    font-size: 1.111em;
    display: inline-block;
    margin-right: 50px;
}

li.publications {
    display: block;
}

a.publications {
    text-decoration: none;
    font-size: 1em;
    line-height: 2.4em; 
}

a:hover {color:#d4ceac;}

a {text-decoration: none;}

.main-nav
    {text-align: center;
    padding: 25px;
    margin-top: -50px;
    width: 800px;
    margin-right: auto;
    margin-left: auto;
    }

.booklink {font-weight: bold;}

/*********************
ABOUT
**********************/
p {
    margin-left: 35px;
    height: 40%;
    width: 40%;
    font-family: sans-serif;
    line-height: 1.4em;
}

p#aboutme {margin: 10px auto;}

/*********************
PORTFOLIO
**********************/

h2 {
    margin-left: 75px;
    font-size: 1.666em;
    text-decoration: underline;

}

.main-content {
    margin-left: 120px;}

li .publications {
    font-weight: bold;
    color: #332f29;
}

.column1of2 {
    float: left;
    margin: 25px;
    width: 600px
}

.column2of2{
    float:left;
    margin: 25px;
    width: 600px;
}

#webpara {
    font-family: sans-serif;
    width:600px;
}

/*********************
BLOG
**********************/ 
#blogpara {
    font-family: sans-serif;
    width: 250px;
    text-align: center;
}

p#blogpara {
    margin: auto;
}

/*********************
MEDIA QUERIES
**********************/ 


@media screen and (max-width: 599px){
body {
    font-size: 1em;
}
.wrap {
    max-width: 85%
}
}
@media screen and (max-width: 980px){
.wrap {
    max-width: 600px;
}
}
Rich Bagley
Rich Bagley
25,869 Points
Rich Bagley
Rich Bagley
25,869 Points

Hi Jennifer,

Not sure if this is what's causing your problems but I noticed you have:

<div class="wrap">
    <body>

whereas this would need to be:

<body>
    <div class="wrap">

The closing tags appear to be correct.

Can you see if this makes any difference to your problem please?

Thanks

-Rich

Jennifer Hughes
Jennifer Hughes
2,083 Points
Jennifer Hughes
Jennifer Hughes
2,083 Points

Rich,

Thanks for the tip. That seems to have worked some, but it isn't exactly doing what I am after. Perhaps I am going down the wrong path to begin with.

I am trying to make my page work for different screens sizes. When I shrink my screen, I want the body to adapt to the smaller screen size so I can still see everything within the body. Do you know how to do this? Again, here is my HTML and CSS.

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8">
        <title>Jennifer Hughes</title>
            <link rel="stylesheet" href="css/normalize">
            <link href='http://fonts.googleapis.com/css?family=PT+Sans+Narrow:400,700|Droid+Serif:400,700|Open+Sans+Condensed:700,300' rel='stylesheet' type='text/css'>
            <link rel="stylesheet" href="css/style.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<div class="wrap">
    <body>
     <header>
        <div class="group-content-container">
            <div class="group">
                <nav class="secondary-nav">
                    <ul id="secondary-nav" class="group">
                        <li id="menu-item1"><a href="contact.html"id="secondary-nav">CONTACT</a></li>
                    </ul>
                </nav>
        </div> <!--end of secondary-nav-->
            <h1 id="main-header">JENNIFER HUGHES</h1>
            <div class="primary-nav">
                <nav class="primary-nav">
                    <ul class="main-nav">
                        <li><a href="index.html"class="selected">Home</a></li>
                        <li><a href="about.html" class="menuitem">About</a></li>
                        <li><a href="portfolio.html" class="menuitem">Portfolio</a></li>
                        <li><a href="blog.html" class="menuitem">Written Words</a></li>
                    </ul>
                </nav>
            </div><!--end of header-->
</header>
        <img src="images/me.jpg" alt="photo of me" class="align-center">
<footer>
    <p id="copyright">&copy; 2014 JennHughesDesign.</p>
</footer>
</div>
</body>
</html>

/*********************
GENERAL
**********************/

.wrap {margin: 0 auto;}

body    {
    margin: 0px;
    font-family: 'Open Sans Condensed', sans-serif;
    background-color:#F9FADD;
    font-size: 1.125em;
}

#secondary-nav {
    text-align: right;
    color:; #332f29;
    font-size: .666em;
    margin-right: 25px;
}


h1 {
    font-size: 4em;
    text-transform: lowercase;
    font-family: 'Open Sans Condensed', sans-serif;
    background-color: #FB1B40;
    color:#D4CEAC;
    text-align: center;
    width: 650px;
    margin-left: auto;
    margin-right: auto;
    border-radius: 75px;}


footer {
visibility: hidden;}    

/*********************
HOME PAGE
**********************/

img {
    width: 778px;
    height: 547px;
}

img.align-center {
    display: block;
    margin: 0 auto;}

/*********************
HYPERLINKS
**********************/

li .menuitem
 {color: #332f29;}


ul {list-style-type: none;}

li .selected {
    color:#8fa68e;
}

nav li {
    list-style-type: none;
    font-size: 1.111em;
    display: inline-block;
    margin-right: 50px;
}

li.publications {
    display: block;
}

a.publications {
    text-decoration: none;
    font-size: 1em;
    line-height: 2.4em; 
}

a:hover {color:#d4ceac;}

a {text-decoration: none;}

.main-nav
    {text-align: center;
    padding: 25px;
    margin-top: -50px;
    width: 800px;
    margin-right: auto;
    margin-left: auto;
    }

.booklink {font-weight: bold;}

/*********************
ABOUT
**********************/
p {
    margin-left: 35px;
    height: 40%;
    width: 40%;
    font-family: sans-serif;
    line-height: 1.4em;
}

p#aboutme {margin: 10px auto;}

/*********************
PORTFOLIO
**********************/

h2 {
    margin-left: 75px;
    font-size: 1.666em;
    text-decoration: underline;

}

.main-content {
    margin-left: 120px;}

li .publications {
    font-weight: bold;
    color: #332f29;
}

.column1of2 {
    float: left;
    margin: 25px;
    width: 600px
}

.column2of2{
    float:left;
    margin: 25px;
    width: 400px;
}

#webpara {
    font-family: sans-serif;
    width:600px;
}

/*********************
BLOG
**********************/ 
#blogpara {
    font-family: sans-serif;
    width: 250px;
    text-align: center;
}

p#blogpara {
    margin: auto;
}

/*********************
MEDIA QUERIES
**********************/ 


@media screen and (max-width: 599px){
body {
    font-size: 1em;
}
.wrap {
    max-width: 85%
}
}
@media screen and (max-width: 980px){
.wrap {
    max-width: 600px;
}
}