Printable Version of Topic

Click here to view this topic in its original format

HTMLHelp Forums _ Cascading Style Sheets _ Correct CSS for this box style

Posted by: JUI43555 Mar 31 2023, 09:44 PM

Hi, what is the correct .CSS / HTML for this layout?
Thanks.

IPB Image

Posted by: coothead Apr 1 2023, 04:48 AM

HTML

CODE

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

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>Untitled document</title>

<link rel="stylesheet" href="screen.css" media="screen">

</head>
<body>
<h1>Page Description</h1>
   <div id="content-container">
      <div id="side-content">
         <div>
          <h2>Et molestie</h2>
          <p>
           Et molestie ac feugiat sed lectus vestibulum mattis ullamcorper. Posuere sollicitudin aliquam ultrices sagittis.
          </p>
         </div>
         <div>
          <h2>Dui ut ornare</h2>
          <p>
           Dui ut ornare lectus sit amet est placerat. Ante in nibh mauris cursus mattis molestie a iaculis at.
          </p>
         </div>
      </div>
      <div id="main-content">
          <h2>Lorem ipsum</h2>
         <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Metus dictum at tempor commodo ullamcorper. Et molestie ac feugiat sed lectus vestibulum mattis ullamcorper. Posuere sollicitudin aliquam ultrices sagittis. A condimentum vitae sapien pellentesque habitant morbi. Velit euismod in pellentesque massa placerat. Vel pretium lectus quam id leo. Eget est lorem ipsum dolor sit amet consectetur. Orci ac auctor augue mauris augue neque gravida. Donec ultrices tincidunt arcu non sodales neque sodales ut. Pellentesque habitant morbi tristique senectus et netus et malesuada. Dui ut ornare lectus sit amet est placerat. Ante in nibh mauris cursus mattis molestie a iaculis at. Velit sed ullamcorper morbi tincidunt ornare massa eget egestas purus.
         </p>
      </div>
   </div>

</body>
</html>

screen.css

CODE

body {
   background-color: #d9d9d9;
   font: normal 1em / 1.5  sans-serif;
}
h1 {
   font-size: 1.5em;
   font-weight: normal;
   text-align: center;
}
#content-container {
   display: flex;
   flex-direction: row;
   gap: 0.5em;
   max-width: 60em;
   padding: 1em;
   margin: auto;
   background-color: #a29d99;
}
#side-content,
#side-content div,
#main-content {
   flex: 1;
}
#side-content {
   display: flex;
   flex-direction: column;
   gap: 0.5em;
}
#side-content div,
#main-content {
   padding: 1em;
   border: 1px solid #000;
   background-color: #d9d9d9;
}

coothead

Posted by: Christian J Apr 1 2023, 07:52 AM

I'd say there is no single correct way.

The HTML may depend of the content of each box area. For example, which box is for the menu, header, footer, main content? Also, do the boxes make up the entire page layout, or is there more content outside (such as the H1 element in coothead's example)?

The CSS may depend on how you want the boxes to react in different viewport sizes (like desktop or mobile), amounts of content, or user zoom/font sizes. For example, should the boxes just resize while retaining their layout, or should they rearrange themselves into a different one?

Posted by: coothead Apr 1 2023, 10:37 AM

Hi there JUI43555,

QUOTE

. The CSS may depend on how you want the boxes to react in different viewport sizes

If you do find that your three boxes are becoming to narrow for comfort
when reducing the page width, then append this snippet to the stylesheet...

CODE

@media ( max-width: 34em ) { /* adjust the value to suit your requirements */
#content-container {
flex-direction: column;
}
}

coothead