css - Split screen in two div with flex

Css - Split screen in two div with flex

To create a split screen layout using two <div> elements with Flexbox, you can use the display: flex property on a container element and adjust the width of the child <div> elements to achieve the desired split. Here's how you can do it:

Basic Split Screen Layout

HTML Structure

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Split Screen with Flexbox</title> <link rel="stylesheet" href="styles.css"> </head> <body> <div class="container"> <div class="left-panel">Left Panel</div> <div class="right-panel">Right Panel</div> </div> </body> </html>

CSS Styles

Example CSS (styles.css):

/* Make sure the body and html take the full height */ html, body { height: 100%; margin: 0; } /* Flex container */ .container { display: flex; height: 100vh; /* Full viewport height */ } /* Flex children */ .left-panel, .right-panel { flex: 1; /* Each panel takes up equal space */ padding: 20px; box-sizing: border-box; /* Include padding and border in the element's total width and height */ } /* Customize each panel */ .left-panel { background-color: #f0f0f0; /* Light gray background */ } .right-panel { background-color: #e0e0e0; /* Slightly darker gray background */ }

Responsive Layout with Different Widths

If you want to customize the width of each panel, you can set different flex values or use percentages.

Example CSS for Custom Widths:

.container { display: flex; height: 100vh; /* Full viewport height */ } .left-panel { flex: 2; /* Takes 2 parts of the space */ padding: 20px; background-color: #f0f0f0; } .right-panel { flex: 1; /* Takes 1 part of the space */ padding: 20px; background-color: #e0e0e0; }

Alternatively, you can use percentage-based widths:

.container { display: flex; height: 100vh; /* Full viewport height */ } .left-panel { width: 60%; /* 60% of the container width */ padding: 20px; background-color: #f0f0f0; } .right-panel { width: 40%; /* 40% of the container width */ padding: 20px; background-color: #e0e0e0; }

Flexbox Alignment and Justification

Flexbox provides additional options to align and justify content if needed.

Example CSS for Centering Content:

.container { display: flex; height: 100vh; } .left-panel, .right-panel { flex: 1; display: flex; align-items: center; /* Center vertically */ justify-content: center; /* Center horizontally */ padding: 20px; box-sizing: border-box; } .left-panel { background-color: #f0f0f0; } .right-panel { background-color: #e0e0e0; }

Summary

  • Flexbox Container: Use display: flex on the container to create a flex context.
  • Equal Widths: Use flex: 1 to make child elements equal in width.
  • Custom Widths: Adjust flex values or use fixed percentages for different widths.
  • Full Height: Set height: 100vh on the container to make it full viewport height.
  • Alignment: Use align-items and justify-content for vertical and horizontal alignment of content.

This approach provides a responsive, flexible way to create a split-screen layout with two <div> elements using Flexbox.

Examples

  1. How to create a simple split screen layout with two divs using flexbox?

    Description: Use flexbox to create a simple two-column layout where each column takes up 50% of the screen width.

    Code:

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> .container { display: flex; height: 100vh; /* Full viewport height */ } .left, .right { flex: 1; /* Each div takes up 50% width */ padding: 20px; } .left { background-color: lightcoral; } .right { background-color: lightblue; } </style> </head> <body> <div class="container"> <div class="left"> Left side </div> <div class="right"> Right side </div> </div> </body> </html>

  2. How to split the screen into two divs with different widths using flexbox?

    Description: Use flex properties to set different widths for each div in a split screen layout.

    Code:

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> .container { display: flex; height: 100vh; /* Full viewport height */ } .left { flex: 2; /* Takes 2/3 of the width */ background-color: lightcoral; padding: 20px; } .right { flex: 1; /* Takes 1/3 of the width */ background-color: lightblue; padding: 20px; } </style> </head> <body> <div class="container"> <div class="left"> Wide side </div> <div class="right"> Narrow side </div> </div> </body> </html>

  3. How to create a split screen layout with two divs that stack on smaller screens?

    Description: Use media queries to stack the divs vertically on smaller screens while maintaining a horizontal layout on larger screens.

    Code:

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> .container { display: flex; height: 100vh; /* Full viewport height */ } .left, .right { flex: 1; padding: 20px; } .left { background-color: lightcoral; } .right { background-color: lightblue; } @media (max-width: 600px) { .container { flex-direction: column; /* Stack divs vertically on small screens */ } } </style> </head> <body> <div class="container"> <div class="left"> Left side </div> <div class="right"> Right side </div> </div> </body> </html>

  4. How to center content within each half of a split screen layout using flexbox?

    Description: Use flexbox properties to center the content horizontally and vertically within each div.

    Code:

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> .container { display: flex; height: 100vh; /* Full viewport height */ } .left, .right { flex: 1; display: flex; justify-content: center; /* Center horizontally */ align-items: center; /* Center vertically */ padding: 20px; } .left { background-color: lightcoral; } .right { background-color: lightblue; } </style> </head> <body> <div class="container"> <div class="left"> <p>Centered content on the left</p> </div> <div class="right"> <p>Centered content on the right</p> </div> </div> </body> </html>

  5. How to add a border between two divs in a split screen layout with flexbox?

    Description: Add a border between the two divs in the split screen layout.

    Code:

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> .container { display: flex; height: 100vh; /* Full viewport height */ } .left, .right { flex: 1; padding: 20px; } .left { background-color: lightcoral; border-right: 2px solid #000; /* Border between divs */ } .right { background-color: lightblue; } </style> </head> <body> <div class="container"> <div class="left"> Left side </div> <div class="right"> Right side </div> </div> </body> </html>

  6. How to add a gap between two divs in a flexbox split screen layout?

    Description: Use the gap property to add space between the two divs.

    Code:

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> .container { display: flex; height: 100vh; /* Full viewport height */ gap: 10px; /* Gap between divs */ } .left, .right { flex: 1; padding: 20px; } .left { background-color: lightcoral; } .right { background-color: lightblue; } </style> </head> <body> <div class="container"> <div class="left"> Left side </div> <div class="right"> Right side </div> </div> </body> </html>

  7. How to set different background images for each div in a split screen layout with flexbox?

    Description: Use CSS background properties to set different background images for each half of the split screen.

    Code:

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> .container { display: flex; height: 100vh; /* Full viewport height */ } .left, .right { flex: 1; background-size: cover; background-position: center; padding: 20px; } .left { background-image: url('left-bg.jpg'); /* Replace with your image */ } .right { background-image: url('right-bg.jpg'); /* Replace with your image */ } </style> </head> <body> <div class="container"> <div class="left"> <p>Left side with background image</p> </div> <div class="right"> <p>Right side with background image</p> </div> </div> </body> </html>

  8. How to make a split screen layout with flexbox where one div scrolls and the other is fixed?

    Description: Make one side of the split screen scrollable while keeping the other side fixed.

    Code:

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> .container { display: flex; height: 100vh; /* Full viewport height */ } .left { flex: 1; background-color: lightcoral; overflow: auto; /* Scrollable */ padding: 20px; } .right { flex: 1; background-color: lightblue; position: fixed; /* Fixed position */ width: 50%; right: 0; top: 0; height: 100vh; padding: 20px; } </style> </head> <body> <div class="container"> <div class="left"> <p>Scrollable content on the left</p> <p>More content...</p> <p>Even more content...</p> </div> <div class="right"> Fixed content on the right </div> </div> </body> </html>

  9. How to ensure two divs in a flexbox split screen layout are responsive?

    Description: Use responsive units and media queries to ensure that the layout adapts to various screen sizes.

    Code:

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> .container { display: flex; height: 100vh; /* Full viewport height */ flex-wrap: wrap; } .left, .right { flex: 1; padding: 20px; box-sizing: border-box; } .left { background-color: lightcoral; } .right { background-color: lightblue; } @media (max-width: 768px) { .left, .right { flex: 1 0 100%; /* Full width on smaller screens */ } } </style> </head> <body> <div class="container"> <div class="left"> Left side </div> <div class="right"> Right side </div> </div> </body> </html>

  10. How to create a split screen layout with equal height divs using flexbox?

    Description: Use flex properties to ensure that both divs in the split screen layout have equal height.

    Code:

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> .container { display: flex; height: 100vh; /* Full viewport height */ } .left, .right { flex: 1; display: flex; align-items: center; /* Center content vertically */ justify-content: center; /* Center content horizontally */ padding: 20px; } .left { background-color: lightcoral; } .right { background-color: lightblue; } </style> </head> <body> <div class="container"> <div class="left"> <p>Equal height left side</p> </div> <div class="right"> <p>Equal height right side</p> </div> </div> </body> </html>

More Tags

html-lists ppi padding unicode-escapes elementwise-operations quantum-computing admin build-automation httpserver provisioning-profile

More Programming Questions

More Chemical thermodynamics Calculators

More Livestock Calculators

More Animal pregnancy Calculators

More Various Measurements Units Calculators