How to put the block in place?

I

Ivan2016-05-31 16:26:56

css

Ivan, 2016-05-31 16:26:56

<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<div id="mainblock">
<div class="block1">

</div>
<div class="block2">

</div>
<div class="block3">

</div>
<div class="block4">

</div>
</div>
</body>
</html>

* {
margin: 0px;
padding; 0px;
}
#mainblock {
overflow: hidden;
}
.block1 {
clear: both;
display: inline-block;
width: 100%;
height: 50px;
background: yellow;
}
.block2 {

display: inline-block;
float: left;
width: 20%;
height: 800px;
background: orange;
}
.block3 {
float: left;
display: inline-block;
width: 800px;
height: 800px;
background: blue;
}
.block4 {
clear: both;
display: inline-block;
width: 100%;
height: 150px;
background: green;
}

It is necessary that the blue block stands to the right of the orange one. When you change the width of the page, it should not slide down.

Reply

Answer the question

In order to leave comments, you need to log in

1 answer(s)

N

novrm, 2016-05-31
@novrm

.block3 {
float: left;
display: inline-block;
width: 80%; /* вместо width: 800px; */
height: 800px;
background: blue;
}