Reference no: EM131856114
I need 1 yellow flexbox to the left and then anohter yellow box next to the pitcures on the right with both the same height and width and same height has green flexbox but smaller width
<!DOCTYPE html>
<html>
<head>
<hr>
<hr width="50%" margin-left:45px;">
<a href="efnisyfirlit.html"> Efnisyfirlit </a>|
<a href="index.html"> myndnotkun </a>|
<a href="grindakerfi.html"> flexbox uppsetning </a>|
<a href="verkefni1.html"> Html Grindakerfi </a>|
<hr>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="grid.css">
<style type="text/css">
html,body{
height:100%;
margin:0;
padding:0;
border:0;
}
div{
margin:0;
border:0;
}
textarea {
margin:0;
border:0;
padding:0;
height:100%;
width:100%;
}
.content{
display:table;
width:10%;
border-collapse:separate;
height:80%;
}
.Col{
display:table-cell;
width:10%;
height:100%;
}
.Col{
display:table-cell;
width:10%;
height:10%;
}
#header,#footer{
height:10%;
position:relative;
z-index:1;
}
.content {
width: 94%;
padding: 3%;
background-color: #de8a84;
}
</style>
</head>
<body>
<div id="PageHeader">
</div>
<div id="header"><textarea style="background-color:orange;"></textarea>1600px mynd</div>
<div class="content">
</div>
<div id="header"><textarea style="background-color:orange;"></textarea>1600px mynd</div>
<div class="content">
<div id="center" class="Col" style="background-color:green; text-align:center; vertical-align:middle" >
<img src="batman_lel.jpg" >
<img src="drunk_russian_christ_HYb1Z.jpg" >
<img src="stingi.jpg" >
<img src="untitled.jpg" > </div>
</div>
<div id="footer"><textarea style="background-color:yellow;">Fótur</textarea></div>
</body>
</html>