Here's the HTML/CSS code I'm working with:
.container
{
max-width: 900px;
margin: 0 auto;
margin-top: 30px;
}
.divisions
{
border: 1px solid Black;
}
.Fisrt-Line
{
height: 180px;
}
.First
{
background-color: Green;
width: 32.2%;
}
.Second
{
width: 65%;
background-color: White;
margin-left: 20px;
}
.Second-Line
{
margin-top: 20px;
background-color: Blue;
float: left;
width: 100%;
height: 180px;
}
.Third-Line
{
height: 180px;
width: 31.6%;
float: left;
margin-top: 20px;
}
.Third-2
{
margin-left: 20px;
background-color: Red;
}
.Third-3
{
margin-left: 20px;
}<html>
<head>
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<link href="Styles/StyleSheet.css" rel="stylesheet" />
</head>
<body class="container">
<div class=" divisions Fisrt-Line First">
1</div>
<div class=" divisions Fisrt-Line Second">
2</div>
<div class="divisions Second-Line">
3
</div>
<div class="divisions Third-Line">
4
</div>
<div class="divisions Third-Line Third-2">
5
</div>
<div class="divisions Third-Line Third-3">
6
</div>
</body>
</html>When I resize the browser window, the second and last divs move to the next line, but I want them to just become smaller without jumping to the next line.
How can I modify the code to keep those divisions from moving to the next line?