McDuck4 McDuck4 - 7 months ago 12
HTML Question

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%;
}

Answer

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>