impts Posted January 19, 2022 Share Posted January 19, 2022 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. Link to comment Share on other sites More sharing options...
Ingolme Posted January 19, 2022 Share Posted January 19, 2022 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 More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now