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

CSS Build a Simple Website Creating a Website Structure Working with Grids

marjetapunik
marjetapunik
907 Points
Posted by marjetapunik
marjetapunik
907 Points

Empty DIV

I made a site that consists of a grid (vertical and horizontal spaces).

In view websites we empty DIV does not take space and throws all elements on the left side one after another.

I have tried adding a min-height: 1px and adding &nbsp (space) in the element. But nothing works.

Could you advise what can I do?

Maor Tzabari
Maor Tzabari
1,762 Points
Maor Tzabari
Maor Tzabari
1,762 Points

I'm trying to understand what do you need, you want that the height will be 1px? What about the width? give me more information...

shahardekel
shahardekel
20,306 Points
shahardekel
shahardekel
20,306 Points

hard to tell without seeing the code. Could you post it, or link to an example?

3 Answers

Ben Spears
Ben Spears
19,148 Points
Ben Spears
Ben Spears
19,148 Points

It sounds like everything in the div has a float: left property. When everything within an element is floated, the element will collapse, because floating effectively removes the element from its parent container. You can either look into adding a clear-fix to the parent div. or make sure there is at least one thing in the div that is not floated.

Unsubscribed User
Unsubscribed User
5,512 Points
Unsubscribed User
Unsubscribed User
5,512 Points

Try specifying explicit widths and heights to the div along with a background and/or border in order for it to take shape.

<div class="cool-box"></div>

.cool-box { width: 50px; height: 50px; background: blue; }
marjetapunik
marjetapunik
907 Points
marjetapunik
marjetapunik
907 Points

It is not in EN language, so don't be affraid. I used this tutorial on making grid: http://j4n.co/blog/Creating-your-own-css-grid-system>

Text should be on the right half of a page.

[empty div - <div class="st-8">] // [div WITH TEXT- <div class="st-5">] // [empty div - <div class="st-2">]

My code is:

    <section id="onas">
            <div class="row">
                <div class="st-8">
                </div>
                <div class="st-5">
                    <p>Smo dru&#382ba za integrirano komunikacijo!</p>
                </div>
                <div class="st-2">
                </div>
            </div>
        </section>
    ```


```css
/* mreza = whole document*/

.mreza {
    width : 100%;
    max-width : 1200px;
}


.row:before, 
.row:after {
    content: "";
    display: table;
    clear:both;
    visibility: hidden;
}

/*st = vertical grid */

.st {
    float: left;
    min-height: 1px;
}

.st-2 {
    width: 13,32%;
    float: left;
    min-height: 1px;
}

.st-5 {
    width: 33,3%;
    float: left;
    min-height: 1px;
}

.st-8 {
    width: 53,28%;
    float: left;
    min-height: 1px;
}
    ```
shahardekel
shahardekel
20,306 Points
shahardekel
shahardekel
20,306 Points

Seems it's because you used a comma (,) instead of a dot (.) in your width values. Try to use 33.3% instead 33,3% for example. See fiddle here

hope that helps.