I am creating a sidebar menu composed by 3 divs, these 3 divs should expand in “width” 100% of the menu width but they don’t. I have checked to make sure that all tags/divs are closed and make sure that are all displayed as grid and put on each width 100% but still they don’t expand to 100% width of their container. Why is that and how to fix it?
Here is my code:
JavaScript
x
88
88
1
*,2
html {3
margin: 0;4
border: 0;5
box-sizing: border-box;6
color: #fff;7
font-family: pc_seniorregular;8
font-weight: 400;9
}10
11
.mobile,12
.tablet,13
.laptop {14
display: none;15
}16
17
body {18
height: 100vh;19
width: 100vw;20
overflow: hidden;21
background-color: #16202a;22
/* border: 5px solid blue; */23
}24
25
div,26
menu,27
header,28
footer {29
border: dotted 2px yellow;30
display: grid;31
height: 100%;32
width: 100%;33
}34
35
.desktop {36
height: 100%;37
width: 100%;38
/* border: 5px solid greenyellow; */39
}40
41
.dash-desk-wrap {42
grid-template-columns: 1fr 4fr;43
height: 100%;44
width: 100%;45
/* border: 5px solid red; */46
}47
48
49
/* SIDEBAR */50
51
52
/* SIDEBAR */53
54
55
/* SIDEBAR */56
57
.dash-desk-sidebar {58
display: grid;59
grid-template-rows: 0.7fr 7fr 1fr;60
height: 100%;61
width: 100%;62
border: 5px dotted blue;63
}64
65
.dash-desk-side-logo {66
border: 3px dotted beige;67
}68
69
.dash-desk-side-list {70
border: 3px dotted red;71
}72
73
.dash-desk-side-social {74
border: 3px dotted green;75
}76
77
78
/* MAIN */79
80
81
/* MAIN */82
83
84
/* MAIN */85
86
.dash-desk-main-wrap {87
grid-template-rows: 0.5fr 1fr 4fr 0.5fr;88
}JavaScript
1
52
52
1
<!DOCTYPE html>2
<html lang="en">3
4
<head>5
<meta charset="UTF-8">6
<meta http-equiv="X-UA-Compatible" content="IE=edge">7
<meta name="viewport" content="width=device-width, initial-scale=1">8
<link rel="stylesheet" href="styles.css">9
<link href='http://fonts.googleapis.com/css?family=Lato:400,700' rel='stylesheet' type='text/css'>10
<title>Base Template</title>11
</head>12
13
<body>14
<div class="mobile">15
<h1>mobile</h1>16
</div>17
<div class="tablet">18
<h1>tablet</h1>19
</div>20
<div class="laptop">21
<h1>laptop</h1>22
</div>23
<div class="desktop">24
<div class="dash-desk-wrap">25
<!-- SIDEBAR -->26
<!-- SIDEBAR -->27
<!-- SIDEBAR -->28
<menu class="dash-desk-sidebar">29
<div class="dash-desk-side-logo">30
<p>Logo</p>31
</div>32
<div class="dash-desk-side-list">33
<p>Side</p>34
</div>35
<div class="dash-desk-side-social">36
<p>Social</p>37
</div>38
</menu>39
<!-- MAIN -->40
<!-- MAIN -->41
<!-- MAIN -->42
<div class="dash-desk-main-wrap">43
<header></header>44
<div></div>45
<div></div>46
<footer></footer>47
</div>48
</div>49
</div>50
</body>51
52
</html>Advertisement
Answer
Either make the menu class as div
JavaScript
1
11
11
1
<div class="dash-desk-sidebar">2
<div class="dash-desk-side-logo">3
<p>Logo</p>4
</div>5
<div class="dash-desk-side-list">6
<p>Side</p>7
</div>8
<div class="dash-desk-side-social">9
<p>Social</p>10
</div>11
</div>or make a div below menu uwing the same.