Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

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

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

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

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

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.

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

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

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.