The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Correct CSS for this box style
JUI43555
post Mar 31 2023, 09:44 PM
Post #1


Member
***

Group: Members
Posts: 44
Joined: 6-March 23
From: Perth
Member No.: 28,833



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

IPB Image

This post has been edited by JUI43555: Mar 31 2023, 09:45 PM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
coothead
post Apr 1 2023, 04:48 AM
Post #2


Advanced Member
****

Group: Members
Posts: 194
Joined: 12-January 23
From: chertsey, a small town 25 miles south west of london, england
Member No.: 28,743



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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Apr 1 2023, 07:52 AM
Post #3


.
********

Group: WDG Moderators
Posts: 9,630
Joined: 10-August 06
Member No.: 7



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?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
coothead
post Apr 1 2023, 10:37 AM
Post #4


Advanced Member
****

Group: Members
Posts: 194
Joined: 12-January 23
From: chertsey, a small town 25 miles south west of london, england
Member No.: 28,743



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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
2 User(s) are reading this topic (2 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 28th March 2024 - 12:41 PM