Задать вопрос
  • Как можно адаптировать right sidebar?

    @Astro4 Автор вопроса
    <!DOCTYPE html>
    <html>
    
    <head>
    
    <meta charset="UTF-8"/>
    <title> Верстка </title>
    <link href="Verstka.css" rel="stylesheet" type="text/css"/>
    
    
    
    </head>
    
    <body>
      <header>
    <div class="top">
        <h1> Немецкая овчарка <h1>
    </div>
        
      </header>	
      
      <div class="midle">
      <div class="left_sidebar"> Немецкая овчарка — порода собак, изначально использовалась в качестве пастушьей и служебно-розыскной собаки.
    
    Немецкая овчарка была получена в результате селекции и скрещивания некоторых разновидностей гуртовых собак Центральной и Южной Германии. Различают гладкошёрстную и длинношёрстную разновидности.
    
    В наше время немецкие овчарки занимаются выставочной карьерой, охраной, а также являются собаками для семьи.</div>
    
      <div class="content"> <img src="nemetskaya-ovcharka8.jpg" width="400" height="300"> </div>
      
      <div class="right_sidebar"> Немецкая овчарка универсальна. Она одинаково хорошо может служить собакой-компаньоном, 
      охранной, защитной, сыскной, служебной и караульной собакой. Успешно используется в животноводстве как пастушья собака. 
      Чаще других пород используется на службе в армии, в полиции, для охраны государственных границ. Хорошо выдрессированная 
      немецкая овчарка незаменима при задержании преступника. Используется для сопровождения слепых. Прекрасно ладит с детьми.
      </div>
      </div>
    
      
      <footer>
      
     <div class="podval">
        <div>
    	<div>
    	  <h3> Информация была взята из википедии. </h3>
    	</div>
        </div>
     </div>	  
      
      </footer>
     
      
      
      </body>
      
      
      </html>


    .top{
    	background:green;
    	text-align:center;
    }
    .content{
    	float:left;
    	width:35%;
    	height:auto;
    	 
    }
    .left_sidebar{
    	float:left;
    	width:25%;
    	height:auto;
    }
    .right_sidebar{
    	float:right;
    	width:25%;
    }
    .podval{
    	clear:left;
    	width:100%;
    	background:blue;
    }
    .midle{
    	width:100%;
    	height:auto;
    }
    .content img
    {
    	padding-left:50px;
    }
    html, body,h1{margin: 0;}
    @media screen and (min-width: 320px) and (max-width: 2000px){     
    .top{
    	
    }
    .left_sidebar{
    	
    }
    .right_sidebar{
    	
    }
    .podval{
    	
    }
    .midle{
    
    	
    }
    .content img{
    	
    }