html - How to divide a page in three vertical sections?

Html - How to divide a page in three vertical sections?

To divide a page into three vertical sections, you can use a combination of HTML and CSS. One common approach is to use a flex container with three child elements representing each section. Here's an example:

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Three Vertical Sections</title> <style> body { margin: 0; padding: 0; display: flex; height: 100vh; } .section { flex: 1; border: 1px solid #ddd; /* Optional: Add borders for visualization */ padding: 20px; box-sizing: border-box; } </style> </head> <body> <!-- Three Vertical Sections --> <div class="section"> <!-- Content for the first section --> <h2>Section 1</h2> <p>This is the content of section 1.</p> </div> <div class="section"> <!-- Content for the second section --> <h2>Section 2</h2> <p>This is the content of section 2.</p> </div> <div class="section"> <!-- Content for the third section --> <h2>Section 3</h2> <p>This is the content of section 3.</p> </div> </body> </html>

Explanation:

  • The body has margin: 0 and padding: 0 to remove default spacing.
  • display: flex is used to create a flex container.
  • height: 100vh ensures that the body takes up the full viewport height.
  • Each .section div has flex: 1, which means each section takes up an equal portion of the available space.
  • border, padding, and box-sizing are optional styling properties. You can customize them based on your design requirements.

This example creates a page with three equal-width vertical sections. Adjust the content and styling within each section to meet your specific needs.

Examples

  1. "html three column layout with flexbox"

    • Code Implementation:
      <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> body { display: flex; height: 100vh; margin: 0; } .section { flex: 1; /* Your styles for each section */ } </style> </head> <body> <div class="section">Section 1</div> <div class="section">Section 2</div> <div class="section">Section 3</div> </body> </html>
    • Description: Utilizes flexbox to create a three-column layout, where each section takes up an equal amount of space.

  2. "html three vertical sections with grid layout"

    • Code Implementation:
      <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> body { display: grid; grid-template-columns: 1fr 1fr 1fr; height: 100vh; margin: 0; } .section { /* Your styles for each section */ } </style> </head> <body> <div class="section">Section 1</div> <div class="section">Section 2</div> <div class="section">Section 3</div> </body> </html>
    • Description: Implements a three-column layout using the CSS Grid layout, where each section is defined to take an equal fraction of the available space.

  3. "html three vertical sections with fixed widths"

    • Code Implementation:
      <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> body { height: 100vh; margin: 0; } .section { width: 33.33%; float: left; box-sizing: border-box; /* Your styles for each section */ } </style> </head> <body> <div class="section">Section 1</div> <div class="section">Section 2</div> <div class="section">Section 3</div> </body> </html>
    • Description: Creates three vertical sections with fixed widths using the float property and box-sizing: border-box;.

  4. "html three vertical sections with percentage widths"

    • Code Implementation:
      <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> body { height: 100vh; margin: 0; } .section { width: 33.33%; display: inline-block; /* Your styles for each section */ } </style> </head> <body> <div class="section">Section 1</div> <div class="section">Section 2</div> <div class="section">Section 3</div> </body> </html>
    • Description: Divides the page into three vertical sections with equal percentage widths using display: inline-block;.

  5. "html three vertical sections with header and footer"

    • Code Implementation:
      <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> body { display: flex; flex-direction: column; height: 100vh; margin: 0; } header, footer { height: 50px; /* Adjust header and footer heights as needed */ background-color: #f1f1f1; } .section { flex: 1; /* Your styles for each section */ } </style> </head> <body> <header>Header Content</header> <div class="section">Section 1</div> <div class="section">Section 2</div> <div class="section">Section 3</div> <footer>Footer Content</footer> </body> </html>
    • Description: Introduces a header and footer with fixed heights and uses flexbox to create three vertical sections that occupy the remaining space.

  6. "html three vertical sections with different widths"

    • Code Implementation:
      <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> body { height: 100vh; margin: 0; } .section1 { width: 25%; float: left; box-sizing: border-box; /* Your styles for Section 1 */ } .section2 { width: 50%; float: left; box-sizing: border-box; /* Your styles for Section 2 */ } .section3 { width: 25%; float: left; box-sizing: border-box; /* Your styles for Section 3 */ } </style> </head> <body> <div class="section1">Section 1</div> <div class="section2">Section 2</div> <div class="section3">Section 3</div> </body> </html>
    • Description: Defines three vertical sections with different widths using the width property.

  7. "html three vertical sections with sidebar"

    • Code Implementation:
      <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> body { display: flex; height: 100vh; margin: 0; } .sidebar { width: 20%; /* Adjust sidebar width as needed */ background-color: #f1f1f1; } .content { flex: 1; /* Your styles for the main content */ } </style> </head> <body> <div class="sidebar">Sidebar Content</div> <div class="content">Main Content</div> </body> </html>
    • Description: Incorporates a sidebar with a specified width, using flexbox to create three vertical sections.

  8. "html three vertical sections with middle section wider"

    • Code Implementation:
      <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> body { display: flex; height: 100vh; margin: 0; } .section1, .section3 { width: 25%; /* Your styles for Section 1 and Section 3 */ } .section2 { flex: 1; /* Your styles for Section 2 */ } </style> </head> <body> <div class="section1">Section 1</div> <div class="section2">Section 2</div> <div class="section3">Section 3</div> </body> </html>
    • Description: Creates three vertical sections where the middle section (Section 2) takes up the remaining space, making it wider.

  9. "html three vertical sections with responsive design"

    • Code Implementation:
      <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> body { display: flex; flex-wrap: wrap; height: 100vh; margin: 0; } .section { width: 100%; /* Full width on small screens */ box-sizing: border-box; /* Your styles for each section */ } @media (min-width: 600px) { .section { width: 50%; /* Two sections on medium screens */ } } @media (min-width: 900px) { .section { width: 33.33%; /* Three sections on large screens */ } } </style> </head> <body> <div class="section">Section 1</div> <div class="section">Section 2</div> <div class="section">Section 3</div> </body> </html>
    • Description: Implements a responsive design using media queries to adjust the width of sections based on the screen size.

  10. "html three vertical sections with dynamic content"

    • Code Implementation:
      <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> body { display: flex; height: 100vh; margin: 0; } .section { flex: 1; /* Your styles for each section */ } </style> </head> <body> <div class="section"> <!-- Content for Section 1 --> </div> <div class="section"> <!-- Content for Section 2 --> </div> <div class="section"> <!-- Content for Section 3 --> </div> </body> </html>
    • Description: Creates three vertical sections with dynamic content, allowing you to add your own content within each section.

More Tags

nonblocking flowtype msg sizewithfont macos unit-testing amazon-cognito hammingweight symfony-1.4 android-support-library

More Programming Questions

More Statistics Calculators

More Genetics Calculators

More Stoichiometry Calculators

More Other animals Calculators