Is there a way to achieve the layout shown in the image using only HTML and CSS?
I attempted rearranging the stacked elements for larger screens by:
#2: float: left
#1: display: inline-block
#3: float: right
However, this approach did not yield the desired results. Can anyone offer guidance on how to accomplish this?
To achieve a clean and efficient layout while staying up-to-date with the latest technology trends, consider using flexbox. Take inspiration from the implementation of the Holy Grail design pattern with flexbox. For illustration, check out the code snippet below, run it, and resize your browser window:
.HolyGrail {
display: flex;
min-height: 100vh;
flex-direction: column;
}
.HolyGrail-body {
display: flex;
flex: 1;
}
.HolyGrail-content {
background-color:orange;
order:1;
}
.HolyGrail-content, .HolyGrail-ads {
/* 12em is the width of the columns */
flex: 0 0 300px;
}
.HolyGrail-nav {
/* put the nav on the left */
flex:1;
order: -1;
background-color:green;
}
.HolyGrail-ads {
background-color:red;
order:3;
}
.HolyGrail,
.HolyGrail-body {
display: flex;
flex-direction: column;
}
@media (min-width: 768px) {
.HolyGrail-body {
flex-direction: row;
flex: 1;
}
.HolyGrail-content {
flex: 1;
}
.HolyGrail-content, .HolyGrail-ads {
/* 12em is the width of the columns */
flex: 0 0 300px;
}
.HolyGrail-nav {
order:2;
}
}<body class="HolyGrail">
<div class="HolyGrail-body">
<main class="HolyGrail-content">…</main>
<nav class="HolyGrail-nav">…</nav>
<aside class="HolyGrail-ads">…</aside>
</div>
<footer>…</footer>
</body>Recently, I implemented a "load more" button on my website's front page. The idea is for this button to load additional posts after every 15 posts. Despite having all the necessary code in place, clicking the button does not trigger any posts to load. ...
I have encountered an issue with a form that contains 2 fields: a hidden field and a multiple select. Upon form submission, the hidden field successfully reaches the django views.py file, but the selected values from the multiple select do not get transmit ...
While working with SVG, I had an issue where I added a <rect> element directly into the svg using html, and then created a new element (without namespace) <circle> with javascript. However, the <circle> element did not display in the svg ...
After making an AJAX call in VBScript, I am receiving the following HTML: <html> <body> <table width="100%" border="0" cellpadding="0" cellspacing="0"> <tbody> <tr> <td width="100%" ...
While browsing through the Bootstrap documentation and searching on stackoverflow, I came across a solution to create circular images using border-radius set at 50%. However, when I tried implementing it with my slightly oversized image, it ended up lookin ...
I am attempting to create a 3D rectangle (parallelepiped) that users can manipulate using arrow keys. The functionality works smoothly in Chrome, but I have noticed discrepancies in the transitions when testing in Firefox. Please take a look at this fiddle ...
How can I change the color of the top and bottom border of a tr when hovering over it? The issue I am facing is that the hover styles are being overridden by the tr above it. In my example below, only the bottom border is highlighting on the second and th ...
I am trying to vertically align my checkboxes so that each option appears on a separate line. I searched online and found suggestions to use vertical-align: middle, but that only changes the position of the label. I want each checkbox to be displayed on it ...
Thank you for taking the time to review my current code. The main issue I am encountering pertains to the responsiveness of the navbar. Whenever I zoom in or out, certain elements tend to lose their alignment and aesthetic appeal. Specifically, the navbar ...
Being new to AngularJS, I created a simple popup where users can add tasks and submit them. There is an "Add task" button that dynamically adds fields for users to enter details into. Below is the HTML markup for my popup: <div class="modal-heade ...
Recently, I came across a captivating video on YouTube demonstrating how to create a transitional gallery (http://www.youtube.com/watch?v=4sVTWY608go). Inspired by the tutorial, I attempted to implement a similar slider... However, I now have a new idea. ...
My goal is to achieve a design similar to the following image: Here's what I've accomplished so far: <ul class="flechalista"> <li><a href="#">2012</a> <ul class="flechalista"> <li>Enero</li> ...
I encountered an issue while nesting a table within a td element. The behavior differs between browsers: in Firefox, the nested table fills the entire cell from top to bottom, but in Edge and Chrome, it is centered within the td cell and does not occupy th ...
I am new to Java script and I am working on creating a web page that displays two random numbers every time it is refreshed. Depending on these numbers, specific text should be shown. These numbers are represented by images ranging from 0 to 5. Currently ...
After carefully reviewing the document, I noticed a unique track code that should be able to assist me. However, I am unsure about how to effectively utilize it in order to obtain the open rates and URL click rates. Regarding open rates: I am currently us ...
I am a beginner in the world of programming and I am attempting to make this feature work. My goal is to give the user the ability to select the radio station they want to listen to. Here is what I have come up with, but unfortunately it is not functioni ...
I'm facing an issue with the bootstrap progress bar on my website, especially on mobile devices where it goes off the screen. I want the current page marker on the progress bar to be centered on the screen while allowing the bar to extend beyond the s ...
I have been attempting to extract product data from a website that utilizes JavaScript to dynamically render HTML content. Despite using Selenium, implementing scrolling functionality to reach the end of the page, and allowing time for the page to reload, ...
I attempted to use cookies to store a value when the user clicks on a popup to close it, ensuring that the popup does not show again once closed. However, I am encountering an issue where the popup continues to open whenever I scroll, even after closing it ...
Closed. This question requires additional information for debugging purposes. It is not currently accepting answers. ...