create nested div for monopoly

Question

I want to create monopoly board game.

this first part of my design.

top row of the game is like this:

this is css and html part.

when I add street name first col after parking goes down

when I add red box everything broken like this

I use float left , but it wont work is my css wrong? this is my html part:

 <div class="top-streets">
        <div class="parking">parking</div>
        <div class="horizantal">
            <div class="price">
                220$
            </div>
            <div class="street-name-top">
                Strand
           </div>
            <div class="red-kart , horizantal-min"/>
        </div>
        <div class="horizantal">
            <div class="price">
                220$
            </div>
            <div class="street-name-top">
                Kentaky Avenue
            </div>
            <div class="red-kart , horizantal-min"/>
        </div>
        <div class="horizantal">
            <div class="price">
                220$
            </div>
            <div class="street-name-top">
                FLEET STREET
            </div>
            <div class="red-kart , horizantal-min"/>
        </div>
        <div class="horizantal">
                <div class="price">
                    240$
                </div>
                <div class="street-name-top">
                    TRAFLEGAR SQUARE
                </div>
            <div class="red-kart , horizantal-min"/>
        </div>
    </div>

and this is my css:

.parking
{
    width: 150px;
    height: 150px;
    border: 1px solid #000000;
    float: left;
}

.top-streets
{
    background-color: aliceblue;
    width:850px;
    height:180px;
    display: inline-block;
}
.horizantal {
     background-color: aquamarine;
     position: relative;
     border: 1px solid #000000;
     width: 100px;
     height: 150px;
     display: inline-block;
     /*float: left;*/
     text-align:center;
    top: 0px;
    /*margin-left: 100px;*/
    /*vertical-align: top;*/
 }
.street-name-top{/* Firefox */
    -moz-transform: rotate(180deg);
    position:  relative;
    width: 100px;
    height: 50px;
    top:60px;
}
.price{/* Firefox */
    -moz-transform: rotate(180deg);
    top:10px;
    position: relative;
    text-align:center;
    width: 100px;
    height: 20px;
}
.horizantal-min {
    width: 100px;
    height: 20px;
    border-top: 2px solid #000000;
    position: relative;
}
.red-kart{
 background-color: red;
    position: absolute;
    bottom:0px;
}

whats wrong? I want to be strong in base of web design, and after being strong in concept use helper frameworks. should I use any other way or framework? please help me

Answer 1

I think the main obstacle you have run into here is that your have a few div tags that you do not close properly.

Specifically <div class="red-kart , horizantal-min"/>

Quoting from a great answer:

In HTML 5, <foo /> means <foo>, the start tag. It is not a "self-closing tag".

and further on

Using the slash in a non-void element tag is invalid, but browsers parse it as the start tag anyway, leading to a mismatch in end tags.

This mismatch of tags is what was probably the root problem to the styling issues.

After correcting the markup, it is a lot easier to wrangle the CSS. I've made a few modifications to the CSS that you can see in this fiddle.

Changelog:

• removed display: inline-block;
• uncommented float: left;
• removed commented out styles
• changed background-color to the shorthand background
• changed colors to short form - #000000 to #000
• replaced -moz-transform with -webkit-transform and transform - Firefox no longer requires the prefixed version.
• removed px unit after 0's - because nothing is nothing no matter what unit it is.

The markup:

<div class="top-streets">
    <div class="parking">PARKING</div>
    <div class="horizantal">
        <div class="price">
            220$
        </div>
        <div class="street-name-top">
            STRAND
        </div>
        <div class="red-kart horizantal-min"></div>
    </div>
    <div class="horizantal">
        <div class="price">
            220$
        </div>
        <div class="street-name-top">
            KENTAKY AVENUE
        </div>
        <div class="red-kart horizantal-min"></div>
    </div>
    <div class="horizantal">
        <div class="price">
            220$
        </div>
        <div class="street-name-top">
            FLEET STREET
        </div>
        <div class="red-kart horizantal-min"></div>
    </div>
    <div class="horizantal">
        <div class="price">
            240$
        </div>
        <div class="street-name-top">
            TRAFLEGAR SQUARE
        </div>
        <div class="red-kart horizantal-min"></div>
    </div>
</div>

The CSS:

.parking {
    width: 150px;
    height: 150px;
    border: 1px solid #000;
    float: left;
}
.top-streets {
    background: aliceblue;
    width: 850px;
    height: 180px;
}
.horizantal {
    background: aquamarine;
    position: relative;
    border: 1px solid #000;
    width: 100px;
    height: 150px;
    float: left;
    text-align: center;
}
.street-name-top {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
    position: relative;
    width: 100px;
    height: 50px;
    top: 60px;
}
.price {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
    top: 10px;
    position: relative;
    text-align: center;
    width: 100px;
    height: 20px;
}
.horizantal-min {
    width: 100px;
    height: 20px;
    border-top: 2px solid #000;
    position: relative;
}
.red-kart {
    background: red;
    position: absolute;
    bottom: 0;
}

Tooling:

• Certain IDEs and text editors have the ability to check the syntax and will display errors if your HTML is malformed, some might require a plugin to enable or enhance these features.
• There are online tools available, e.g. https://validator.w3.org/
• Firefox view-source is my go to method - if you open up an HTML document in Firefox, right click, select "view-source", you'll see the document with some basic syntax highlighting. The thing to look for are those things in red text. Sometimes it will be just a single character that is red, as it is for the markup <div class="red-kart , horizantal-min"/>, where only the / is red. When you hover over these red characters, there will be a tooltip with some more information as to why it is marked red.