CODEWITHSUNDEEP
htmlcssresponsive
McDuck4
McDuck4

Reputation: 662

column is below eachother

I cannot understand why my col4 is comming below eachother, and not in a row. The Sec 1 and Sec 2 should be beside eachother. I have tried to define all my col width in my css. What am I missing here?

Fiddle

HTML

<!DOCTYPE html>
<html>
<head>
    <title>| Fishing |</title>
    <link type="text/css" rel="stylesheet" href="css/build.css"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<body>
    <div class="main-header" role="main">

    </div>
    <div class="row">
        <div class="col12">
            <h2>Report</h2>
        </div>
    </div>
    <div class="row" role="section">
        <div class="col4">
            <h4>Sec 1</h4>
        </div>
        <div class="col4" role="section">
            <h4>Sec 2</h4>
        </div>
    </div>

</body>
</html>

CSS

html, body {
        margin: 0px;
        padding: 0px;
        font-size: 40px;
    }

    .main-header {
        background: url(../img/bg.jpg) no-repeat center center fixed; 
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
        height: 500px;
        margin-bottom: 20px;
        overflow: hidden;
    }

    /* Rows */
    .row{
      margin-left:-15px;
      margin-right:-15px;
     }
    .row{:after{
      content:'';
      display:block;
      clear:both
    }
    /* General properties of columns */
    .col{
      padding: 0rem;
      float:left; 
    }

    /* Column Definition */
    .col1{
      width:8.33333333%
    }

    .col2{
      width:16.66666667%
    }

    .col3{
      width:25%
    }

    .col4{
      width:33.33333333%
    }

    .col5{
      width:14.666667%
    }

    .col6{
      width:50%;
    }

    .col7{
      width:58.33333333%
    }

    .col8{
      width:66.6666667%
    }

    .col9{
      width:75%
    }

    .col10{
      width:83.33333333%
    }

    .col11{
      width:91.6666666%
    }
    .col12{
      width:100%;
    }

Upvotes: 0

Views: 211

Answers (1)

Denat Hoxha
Denat Hoxha

Reputation: 945

First, you have a syntax error:

.row{:after{
  content:'';
  display:block;
  clear:both
}

should be:

.row:after{
  content:'';
  display:block;
  clear:both
}

Also, you defined a style for .col, but they won't be applied to the columns because they need to have the col class additional to their col4 classes, e.g.:

<div class="col col4">
     <h4>Sec 1</h4>
</div>

Upvotes: 2

Related Questions