Jump to content

curriculum structure in html5/css3?


impts

Recommended Posts

So, what's the easiest way to create a structure like the attached photo? Can anyone sketch something to explain? I tried with flexbox and grid but I had a hard time as I needed to keep spaces between each black border field. the red borders would be the column and inside the black area.

print.png

Link to comment
Share on other sites

It seems pretty straightforward to me. There are three columns with a fixed width each.

The boxes within the columns are trivial because block elements automatically stretch horizontally to fit their container. You can space them vertically with margins if necessary.

You haven't proposed a design for mobile devices or even medium sized screens, though, which is going to make your website difficult to use on phones and smaller laptops.

<!DOCTYPE html>
<html>
  <head>
    <title>Website layout</title>
<style>
  html,body {
    margin: 0;
    padding: 0;
  }
  body {
    display: flex;
    justify-content: center;
  }
  main, .sidebar1, .sidebar2 {
    border: 1px solid red;
    box-sizing: border-box;
    flex: 0 0 auto;
  }
  .sidebar1, .sidebar2 {
    width: 300px;
  }
  main {
    width: 900px;
  }
</style>
  </head>
  <body>
    <div class="sidebar1">
      <div style="height:300px; border: 1px solid #000;">
        Test
      </div>
      <h3>Content</h3>
      <h3>Content</h3>
      <h3>Content</h3>
      
      <h3>Content</h3>
      <p>Text Text Text Text Text Text Text </p>
      <h3>Content</h3>
      <p>Text Text Text Text Text Text Text </p>
      
    </div>
    <main>
      <h3>Content</h3>
      <p>Text Text Text Text Text Text Text </p>
      <h3>Content</h3>
      <p>Text Text Text Text Text Text Text </p>
      <h3>Content</h3>
      <p>Text Text Text Text Text Text Text </p>
      <h3>Content</h3>
      <p>Text Text Text Text Text Text Text </p>
      <h3>Content</h3>
      <p>Text Text Text Text Text Text Text </p>
    </main>
    <div class="sidebar2">
      <p>Text Text Text Text Text Text Text </p>
      <p>Text Text Text Text Text Text Text </p>
      <p>Text Text Text Text Text Text Text </p>
    </div>
  </body>
</html>


 

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...