All geek questions in one place

How can I place some divs in the following order?

I have a main div container in the center of my webpage. It is already in place and contains various elements.

However, now I am trying to place a large content div (Div # 1) on the left, which occupies about 70% of the main Div container. What I can hardly do is get the CSS correctly if Div # 1, # 2, # 3 and # 4 are located as follows:

alt text

What should I do in this case for CSS regarding Div # 1 - # 4? Should I put Div # 1 to the left and set it as a percentage / fixed width? And the floating divs # 2 - 4 to the right?

Some recommendations with this will be appreciated!

+3
source share
2 answers

, 2 div "left" "right" .

div 1

div 2, 3 4 .

,

+5

, :

<?xml version='1.0' encoding='UTF-8'?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">   
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">     
    <head>      
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />   
        <title>Floating</title>
    <style type="text/css">
      *{
       margin:0;
       padding:0; 
      }
      .content{
        padding:10px;
        margin-top:50px;
        width:770px;
        margin-left:auto;
        margin-right:auto;
        border:1px solid black;
      }
      .content h1{
        text-align:center; 
      }

      .content h2{
        text-align:center; 
      }

      .content .left{
        width:600px;
        float:left; 
        border:1px solid black;      
      }

      .content .right{
        width:150px;
        float:right;
      }

      .content .right div{        
        margin-bottom:10px; 

        border:1px solid black;
      }
      .content .clear{
        clear:both; 
      }
    </style>
  <body>
    <div class="content">
      <h1>Main Container Div</h1>
      <div class="left">
        <h2>Div #1</h2>
      </div>
      <div class="right"> 
        <div><p>Div #2</p></div>
        <div><p>Div #3</p></div>
        <div><p>Div #4</p></div>
        <div><p>Div #5</p></div>
      </div>
      <div class="clear">&nbsp;</div>
    </div>
    </body>
</html>
+3

Source: https://habr.com/ru/post/1710598/

More articles:


All Articles