Creating a layout similar to Facebook can be achieved by utilizing HTML and CSS, specifically using flexbox to structure

Question

Creating a layout similar to Facebook can be achieved by utilizing HTML and CSS, specifically using flexbox to structure

I am looking to create a website layout similar to Facebook, with the following features:

A fixed or sticky header and no footer
3 div elements, where div1:div2:div3 = 1:2:1
3 scroll bars to control each div... Scroll-1 and scroll-3 will be inside div-1 and div-3 respectively to control their content. Scroll-bar-2 will be on the right side of the main body to control the content of div-2.
A fully fixed page without any extra scroll bars, testing by adding lorem1000 in each div

I would appreciate your assistance in creating this layout. Thank you in advance.

Here is the HTML code that I have written:

<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="css/style.css">
    <title>test</title>
</head>

<body>
    <nav>
        <h1>This is nav</h1>
    </nav>
    <div class="row">
        <div class="col-3">lorem1000</div>
        <div class="col-5">lorem1000</div>
        <div class="col-3">lorem1000</div>
    </div>
</body>
</html>

I would really appreciate your help in achieving this layout goal. Thank you in advance. https://i.sstatic.net/Ufvrd.png

html css flexbox frontend

Answer 1

Answer №1

After reviewing the photo of your idea and examining your html

Implementing css grid

By using css grid, you can simplify the code by applying styles only to the parent element :)

In this scenario, use the class names you previously defined (.col-3, .col-5)

I have used these classes to distribute the width equally into sections (fr). The sidebars account for 3 fractions of the screen space each, while the mainDiv takes up 5 fractions... making the mainDiv wider than the sidebars.

This layout is responsive, allowing you to adjust the values of fr as needed (ensuring the first and last values are the same, with the middle value larger than the sidebars).

  display: grid;
  grid-template-columns: 3fr 5fr 3fr;

body {
  height: 100vh;
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 0.5rem;
}

.row {
  gap: 0.5rem;
  display: grid;
  grid-template-columns: 3fr 5fr 3fr;
}

nav,
.row>div {
  border-radius: 0.3em;
  border: 1px solid rgb(0, 51, 255);
}

.col-3 {
  overflow: scroll;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8>
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <nav>
    <h1>This is nav</h1>
  </nav>
  <div class="row">
    <div class="col-3">sideBar</div>
    <div class="col-5">mainContent</div>
    <div class="col-3">sideBar</div>
  </div>
</body>

</html>

Answer 2

After reviewing the photo of your idea and examining your html

Implementing css grid

By using css grid, you can simplify the code by applying styles only to the parent element :)

In this scenario, use the class names you previously defined (.col-3, .col-5)

I have used these classes to distribute the width equally into sections (fr). The sidebars account for 3 fractions of the screen space each, while the mainDiv takes up 5 fractions... making the mainDiv wider than the sidebars.

This layout is responsive, allowing you to adjust the values of fr as needed (ensuring the first and last values are the same, with the middle value larger than the sidebars).

  display: grid;
  grid-template-columns: 3fr 5fr 3fr;

body {
  height: 100vh;
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 0.5rem;
}

.row {
  gap: 0.5rem;
  display: grid;
  grid-template-columns: 3fr 5fr 3fr;
}

nav,
.row>div {
  border-radius: 0.3em;
  border: 1px solid rgb(0, 51, 255);
}

.col-3 {
  overflow: scroll;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8>
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <nav>
    <h1>This is nav</h1>
  </nav>
  <div class="row">
    <div class="col-3">sideBar</div>
    <div class="col-5">mainContent</div>
    <div class="col-3">sideBar</div>
  </div>
</body>

</html>

Answer 3

Answer №2

Utilizing grid, I positioned the container with a relative setting, which serves as the container for the left, middle, and right divs. The left and right divs have a specific height and are set to sticky position to maintain their place.

* {
    margin: 0;
    padding: 0;
}

nav {
    width: 100%;
    background-color: black;
    color: white;
    position: fixed;
    z-index: 10;
}

nav ul {
   display: flex; 
}

main {
    position: relative;
    top: 5.4rem;
}

main .container {
    display: grid;
    grid-template-columns: 18vw auto 20vw;
    column-gap: 2rem;
    position: relative;
}

main .container .left {
    height: 88.5vh;
    position: sticky;
    top: 5.4rem;
    overflow-y: auto;
}

main .container .right {
    height: 88.5vh;
    position: sticky;
    top: 5.4rem;
    overflow-y: auto;
}

This block represents my HTML structure:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>socialmedia</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <nav>
        <ul>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
        </ul>
    </nav>
    <main>
        <div class="container">
            <div class="left">
                <h1>Left</h1>
                <!-- Left content here -->
            </div>
            <div class="middle">
                <h1>
                    <!-- Middle content goes here -->
                </h1>
            </div>
            <div class="right">
                <h1>Right</h1>
                <!-- Right content here -->
            </div>
        </div>
    </main>
</body>
</html>

Answer 4

Utilizing grid, I positioned the container with a relative setting, which serves as the container for the left, middle, and right divs. The left and right divs have a specific height and are set to sticky position to maintain their place.

* {
    margin: 0;
    padding: 0;
}

nav {
    width: 100%;
    background-color: black;
    color: white;
    position: fixed;
    z-index: 10;
}

nav ul {
   display: flex; 
}

main {
    position: relative;
    top: 5.4rem;
}

main .container {
    display: grid;
    grid-template-columns: 18vw auto 20vw;
    column-gap: 2rem;
    position: relative;
}

main .container .left {
    height: 88.5vh;
    position: sticky;
    top: 5.4rem;
    overflow-y: auto;
}

main .container .right {
    height: 88.5vh;
    position: sticky;
    top: 5.4rem;
    overflow-y: auto;
}

This block represents my HTML structure:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>socialmedia</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <nav>
        <ul>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
        </ul>
    </nav>
    <main>
        <div class="container">
            <div class="left">
                <h1>Left</h1>
                <!-- Left content here -->
            </div>
            <div class="middle">
                <h1>
                    <!-- Middle content goes here -->
                </h1>
            </div>
            <div class="right">
                <h1>Right</h1>
                <!-- Right content here -->
            </div>
        </div>
    </main>
</body>
</html>

Creating a layout similar to Facebook can be achieved by utilizing HTML and CSS, specifically using flexbox to structure

Answer №1

Implementing css grid

Answer №2

Similar questions

Transitioning Between Div Elements Using Jquery

Make sure that the equal sign is never utilized at the beginning of a form input field

Surprising pause in the menu transition animation

Is there a way to apply dual linear-gradients to both the left and right borders simultaneously?

the combination of class and type functions as a jquery selector

Make menu links stretch to match parent's width

How can I send an HTML document from a WebApi 2 action using the IHttpActionResult interface?

Drop-down Navigation in HTML and CSS is a popular way to create

Is there a way to showcase SVG and PNG images retrieved from a database simultaneously?

Floating with Flex in Bootstrap 4: A seamless way to achieve

Access the Android mobile application by using a JavaScript click event

Having trouble getting a background image with tint to display properly in Bootstrap

The horizontal alignment of a jQuery div is off-center

Statement featuring session parameter for querying

Utilizing background images in CSS to enhance bootstrap icons

Trigger Audio Playback in Javascript

Adjust the backdrop for the currently chosen tab

Automatically refreshing the canvas whenever the value of an HTML element is modified in Javascript

Ways to navigate to a tabbed section that is currently inactive

Creating specific CSS classes for individual slides in a basic slider framework