No edit summary |
No edit summary |
||
| Line 1: | Line 1: | ||
#content { | #content { | ||
max-width: 1200px; | max-width: 1200px; | ||
width: 100%; | width: 100%; | ||
margin: 20px auto; | margin: 20px auto; | ||
| Line 20: | Line 7: | ||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); | box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); | ||
border-radius: 8px; | border-radius: 8px; | ||
display: flex; | display: flex; | ||
flex-direction: row; /* Arrange children horizontally */ | flex-direction: row; /* Arrange children horizontally */ | ||
gap: 20px; | gap: 20px; | ||
} | } | ||
#top { | #top { | ||
flex: 1; | flex: 1; | ||
background-color: # | background-color: #f8f8f8; | ||
padding: 20px; | padding: 20px; | ||
border-radius: 8px; | border-radius: 8px; | ||
} | } | ||
#article { | #article { | ||
flex: 2; | flex: 2; | ||
background-color: #e8e8e8; | background-color: #e8e8e8; | ||
padding: 20px; | padding: 20px; | ||
border-radius: 8px; | border-radius: 8px; | ||
display: flex; | |||
flex-direction: column; /* Stack children vertically */ | |||
justify-content: space-between; /* Push footer to the bottom */ | |||
} | } | ||
#footer { | #footer { | ||
text-align: center; | text-align: center; | ||
margin-top: | margin-top: auto; /* Push footer to the bottom of #article */ | ||
font-size: 0.9em; | font-size: 0.9em; | ||
color: #666; | color: #666; | ||
} | } | ||
Revision as of 21:03, 14 December 2024
#content {
max-width: 1200px;
width: 100%;
margin: 20px auto;
background-color: #ffffff;
padding: 20px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
border-radius: 8px;
display: flex;
flex-direction: row; /* Arrange children horizontally */
gap: 20px;
}
#top {
flex: 1;
background-color: #f8f8f8;
padding: 20px;
border-radius: 8px;
}
#article {
flex: 2;
background-color: #e8e8e8;
padding: 20px;
border-radius: 8px;
display: flex;
flex-direction: column; /* Stack children vertically */
justify-content: space-between; /* Push footer to the bottom */
}
#footer {
text-align: center;
margin-top: auto; /* Push footer to the bottom of #article */
font-size: 0.9em;
color: #666;
}