Arrange four elements on a page

user_9558050 0
Viewed 107

I need to place four elements something like this:

enter image description here

CSS:

code {  
  display: block;  
  text-align: center;
}

section {
  display: inline-block;
  text-align-last:center;
  width: 35%;
  margin: 1%;   
  padding: 1; 
}  

h1 {
    color: #626262;
    display: block;  
    text-align: center;
}

h2 {
    color: #626262;
    display: block;   
} 
#outer {
  margin-left: 20%;
} %, -50%);

HTML:

<div id = "outer">   
    <section>  
        <h2>ELEMENT 1</h2> 
    </section>

    <section>  
        <h2>ELEMENT 2</h2>    
    </section>

    <section> 
        <h2>ELEMENT 3</h2>    
    </section>

    <section> 
        <h2>ELEMENT 4</h2> 
    </section>
</div>

But on some platforms, such a page does not display correctly, tell me how to implement this task more correctly.

css html
2 Answers

You should use border: 2px solid #626262; for section and #outer div as

#outer {
  margin: auto;
  padding: 10px;
  text-align: center;
  border: 2px solid #626262;
}

And set first and third margin for closer

section:first-child, section:nth-child(3){
  margin: -6px;
}


code {  
  display: block;  
  text-align: center;
}

section {
  display: inline-block;
  text-align-last:center;
  border: 2px solid #626262;
  width: 35%;
  margin: 0px;   
  padding: 15px 0 15px 15px; 
}  

section:first-child, section:nth-child(3){
  margin: -6px;
}

h1 {
    color: #626262;
    display: block;  
    text-align: center;
}

h2 {
    color: #626262;
    display: block;   
} 
#outer {
  margin: auto;
  padding: 10px;
  text-align: center;
  border: 2px solid #626262;
}
<div id = "outer">   
    <section>  
        <h2>ELEMENT 1</h2> 
    </section>

    <section>  
        <h2>ELEMENT 2</h2>    
    </section>

    <section> 
        <h2>ELEMENT 3</h2>    
    </section>

    <section> 
        <h2>ELEMENT 4</h2> 
    </section>
</div>

user_49645690

I kindly recommend you to use css flexbox and css grid or whatever you want. And your code should look like this. Thanks

.main-div{
  display:flex;
  justify-content:center;
  
}
section {
  text-align-last:center;
  width: 35%;
  border:2px #000000 solid; 
  padding: 30px;
}  

h2 {
    color: #626262;
    display: block;   
} 
#outer {
  width:70%;
  margin:auto;
  border:2px #000000 solid; 
  padding:80px;
} 
<div id = "outer"> 
  <div class="main-div">
    <section>  
        <h2>ELEMENT 1</h2> 
    </section>

    <section>  
        <h2>ELEMENT 2</h2>    
    </section>
  </div>
  <div class="main-div">
    <section>  
        <h2>ELEMENT 3</h2> 
    </section>

    <section>  
        <h2>ELEMENT 4</h2>    
    </section>
  </div>
</div>

user_124947070
Related