How to make adaptability?

A

Afafks1231321321652020-04-25 17:26:01

css

Afafks123132132165, 2020-04-25 17:26:01

I did adaptability according to the lesson in YouTube. But the elements do not stretch to the entire page.
html code:

<!DOCTYPE html>
<html>
<head>
  <title>Site</title>
  <link rel="stylesheet" type="text/css" href="style.css"></link>
</head>
<body>
  <div id = 'wrapper'>
  	<div id = "main">!</div>
  	<div id = "sidebar">!</div>
  </div>
</body>
</html>

css code:

html,body{
  padding: 0;
  margin: 0;
  color: white;
}

#wrapper{
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
}

#main{
  width: 63.63636363636364%;
  float: left;
  background-color: #FFA500;
}

#sidebar{
  width: 36.36363636363636%;
  float: right;
  background-color: #1D2432;
}

jsfiddle: https://jsfiddle.net/Afafks/xz4jd9ft/

Reply

Answer the question

In order to leave comments, you need to log in

3 answer(s)

A

Arseny, 2020-04-25
@Afafks123132132165

Everything works for you, but your YouTube lesson was 5 years late.
By the way, this is called rubber, not adaptive.

D

drawnofmymind, 2020-04-25
@drawnofmymind

media queries - https://developer.mozilla.org/en/docs/Web/CSS/Medi...

N

nturm32, 2020-04-26
@nturm32

This is rubber, not a responsive site. In adaptive it is necessary to use media queries.
Your version does not stretch to full width, because there is a width limit max-width: 1100px;