In the section,article and nav ,I want the section to be in the middle of the page

Question

I have the page which has section, nav, article. The section contains nav and article. As of now the nav and article occupy the full page. But what I need is the article and nav should be in the center of the page. What I referred to is https://www.w3schools.com/html/html_layout.asp and developed the web page. My html code looks like this


    
        
            
                
            
            My application
        
    


    
        Choose the booking date:

My css looks like this

 /* Create two columns/boxes that floats next to each other */
      nav {
        float: left;
        width: 30%;
        height: 300px; /* only for demonstration, should be removed */
        background: #ccc;
        padding: 20px;
      }



      article {
        float: left;
        padding: 20px;
        width: 70%;
        background-color: #f1f1f1;
        height: 300px; /* only for demonstration, should be removed */
      }

      /* Clear floats after the columns */
      section:after {
        content: "";
        display: table;
        clear: both;
      }



      /* Responsive layout - makes the two columns/boxes stack on top of each other instead of next to each other, on small screens */
      @media (max-width: 600px) {
        nav, article {
          width: 100%;
          height: auto;
        }
      }

By refering this CSS Getting The Article Center have included margin-left: auto; margin-right: auto; in the 'section'

 section:after {
        content: "";
        display: table;
        clear: both;
margin-left: auto; 
margin-right: auto;

It didnt give me the expected output what i want. The expected output is: The nav and article should be in the middle of the page.






    
    
    
    
    
    
    
    

    




    
        
            
                
            
            My application
        
    


    
        Choose the booking date:

        
        
    
    
        
            
        
    






What I need is the choose the booking date(nav) and the article should be in middle leaving the space in the left and right. As of now, you can see it's the full width of the page

user_2424775 · Answer

You did right, just one mistake - you didn't account padding in your width. Please try.

 /* Create two columns/boxes that floats next to each other */
      nav {
        float: left;
        width: calc(30% - 40px);
        height: 300px; /* only for demonstration, should be removed */
        background: #ccc;
        padding: 20px;
      }



      article {
        float: left;
        padding: 20px;
        width: calc(70% - 40px);
        background-color: #f1f1f1;
        height: 300px; /* only for demonstration, should be removed */
      }

      /* Clear floats after the columns */
      section:after {
        content: "";
        display: table;
        clear: both;
      }



      /* Responsive layout - makes the two columns/boxes stack on top of each other instead of next to each other, on small screens */
      @media (max-width: 600px) {
        nav, article {
          width: 100%;
          height: auto;
        }
      }


    
        
            
                
            
            My application
        
    


    
        Choose the booking date:

user_9942418 · Answer

I'm sure that you do need the padding, so I'd suggest just removing the float: left; and width: 70%; in your article and let it fill the rest of the place automatically :

section {
  max-width: 100%;
}

nav {
  float: left;
  width: 30%;
  height: 300px;
  /* only for demonstration, should be removed */
  background: #ccc;
  padding: 20px;
}

article {
  padding: 20px;
  background-color: #f1f1f1;
  height: 300px;
  /* only for demonstration, should be removed */
}


/* Clear floats after the columns */

section:after {
  content: "";
  display: table;
  clear: both;
}


/* Responsive layout - makes the two columns/boxes stack on top of each other instead of next to each other, on small screens */

@media (max-width: 600px) {
  nav,
  article {
    width: 100%;
    height: auto;
  }
}


  
    
      My application
    
  


  
    Choose the booking date:

Admin · Answer

Thanks I have found the solutions for it. I have added the margin-left and margin-right auto in section after. But Now what I tried is I have added these two lines in the sections.

section {
       max-width: 80%;
       margin-right: auto;
       margin-left: auto;
     }

 I didn't do any changes other than this and it worked.

user_2424775 · Answer

I've added a separate variant with a flexbox. It's easy to implement and you need to worry about width and paddings.

 /* Create two columns/boxes that floats next to each other */
 section {
   display: flex;
   flex-direction: row;
 }
 
 nav {
   /* only for demonstration, should be removed */
   background: #ccc;
   padding: 20px;
   min-width: 30%;
 }

 article {
   padding: 20px;
   background-color: #f1f1f1;
   flex-grow: 1;
 }


 /* Responsive layout - makes the two columns/boxes stack on top of each other instead of next to each other, on small screens */
 @media (max-width: 600px) {

   section {
   flex-direction: column;
   }
 }


  
    
      
        
      
      My application
    
  


  
    Choose the booking date:
    
    
  
  
    
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et ligula orci. Quisque in diam quis risus pellentesque sagittis sed sit amet mauris. Nullam ante nulla, pulvinar sit amet efficitur vitae, porttitor et est. Donec bibendum massa feugiat aliquet rutrum. Maecenas et ante vitae dolor dapibus luctus. Sed eget risus nisi. Praesent ultrices velit eu nisi faucibus ultrices. Suspendisse in facilisis odio.
      
       Donec at odio sit amet nulla bibendum ornare pulvinar vitae nulla. Curabitur eu erat et nulla vehicula porta. Curabitur quis luctus magna. Nullam vestibulum pretium risus eget accumsan. Nullam commodo turpis massa, tincidunt tempus lacus maximus non. Pellentesque facilisis finibus urna ut volutpat. Etiam placerat urna at venenatis bibendum.

In the section,article and nav ,I want the section to be in the middle of the page

4 Answers