Here is an example of my HTML structure:
<div id="wrapper">
<div id="a">a</div>
<div id="b">b</div>
<div id="c">c</div>
<div id="d">d</div>
</div>
When viewing on desktop, I want the divs to be displayed next to each other, which is simple.
However, on mobile, I would like a table-like layout that looks similar to this:
The b, c, and d divs have flexible heights, so I need div "a" to adjust accordingly. Is it possible to achieve this without using a separate wrapping div?
Absolutely, you have the capability to achieve this entirely using flexbox. It's important to establish a width for the first div at smaller viewport sizes beforehand and be prepared with the appropriate media query when needed.
#wrapper {
height: 100vh;
width: 90vw;
border: 1px solid grey;
display: flex;
flex-direction: column;
flex-wrap: wrap;
margin: 10px auto;
}
#wrapper div {
flex: 1 0 auto;
border: 1px solid white;
background: lightblue;
text-align: center;
}
#a {
flex-grow: 1;
height: 100%;
flex-basis: 50%;
}
@media screen and (min-width: 640px) {
#a {
height: auto;
flex-grow: none;
flex-basis: auto;
}
}<div id="wrapper">
<div id="a">a</div>
<div id="b">b</div>
<div id="c">c</div>
<div id="d">d</div>
</div>Utilize flexbox specifically for desktop layouts:
* { box-sizing: border-box; }
body { margin: 0; }
#a { background: tomato; }
#b { background: forestgreen; }
#c { background: dodgerblue; }
#d { background: orange; }
#wrapper {
overflow: hidden;
position: relative;
}
#wrapper > div {
float: left;
width: 50%;
margin-left: 50%;
padding: 5px;
}
#wrapper > #a {
position: absolute;
height: 100%;
margin-left: 0;
}
@media all and (min-width: 768px) {
#wrapper {
display: flex;
}
#wrapper > div {
margin-left: 0;
}
#wrapper > #a {
position: relative;
height: auto;
}<div id="wrapper">
<div id="a">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl.</div>
<div id="b">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat. Duis semper. Duis arcu massa, scelerisque vitae, consequat in, pretium a, enim. Pellentesque congue. Ut in risus volutpat libero pharetra tempor. Cras vestibulum bibendum augue. Praesent egestas leo in pede. Praesent blandit odio eu enim. Pellentesque sed dui ut augue blandit sodales. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam nibh.</div>
<div id="c">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius.</div>
<div id="d">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat. Duis semper.</div>
</div>My simple HTML page consists of only one image: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Anz ...
Can anyone help me with my navbar issue? I want it to stay on top of the page, but there's a huge gap between the top of the page and the nav bar. I've tried running a JS file, but it doesn't seem to fix the problem. Any ideas on how to make ...
I am trying to figure out the best way to create a container with three columns of content. I can't decide if using bootstrap or CSS Grid would be most effective. Instead of having distinctly separate columns, I would like one continuous column that ...
I'm looking to keep one column sticky in a two-column grid setup. My goal is to create a vertical navigation bar that's specific to a particular div within a single-page site, with a fixed horizontal navbar across the entire page. However, I&apos ...
// Closing Button for Main Navigation $('button#collapse-button').click(function () { $('nav#main-nav').toggleClass('closed'); }); $(window).on('scroll', function () { if ($(wind ...
I have successfully developed a fadein/fadeout slider that automatically transitions between images. However, I am now looking to implement the functionality to manually play the slider by clicking on next/prev buttons. HTML <section class="wrapper"&g ...
I am in possession of around one hundred simple SVG images, distributed among five different image folders. These images are currently retrieved on demand when they need to be displayed, which generally works well but occasionally results in flickering tha ...
Seeking guidance from CSS/Bootstrap experts as I navigate the world of web design. I'm struggling to ensure an image fits perfectly within a div without distortion, especially when dealing with varying sizes due to user uploads. I admire how Windows ...
I have created a HTML and CSS code snippet to showcase a FAQ page with questions and answers, but I want to add a toggle effect. The goal is for users to be able to click on a question and have the answer section expand below it. Below is the HTML code: ...
I have a query regarding ng2 smart table. I would like to replace buttons with icons for functionalities such as AddNew row, edit, delete, update, create, and cancel. Additionally, I am looking to include a checkbox in one of the columns in my table. Can ...
I find myself facing an unexpected challenge with whitespace appearing mysteriously within a list of dropdown items that I have created. Visually, it presents as follows: https://i.sstatic.net/olLDA.png The HTML code causing the issue (using bootstrap 4. ...
The Issue My goal is to remove scrollbars from all pages (which I achieved successfully), but keep one visible for a specific section of description. What I Attempted I tried adding the class .scroller and only displaying it for the <div> containi ...
I'm attempting to apply a custom class to a div that should only be active on "md" screens. However, it doesn't seem to be working - <div className="md:myclass"/> tailwind-config.ts theme: { screens:{ 'sm': { ...
Looking for a simple way to vertically align my Angular component on display? I have set the main container using display: grid. Check out the solution on stackblitz clock.component.html <div class="container"> {{time | date: 'HH:mm:ss&apo ...
Can you help me align my URL and https:// on the same margin? https://i.sstatic.net/hxkkC.png <div className="card"> <div className="card-body"> <div className="form-group col-12"> <label cla ...
I've been trying to make the plant image fit inside the flex boxes with a responsive height and width as the screen size changes, but it doesn't seem to be working. In addition, it's changing the shape of the flex box to accommodate the imag ...
Is there a way to add animation to an image on my website when hovering over it without using CSS? Are there any specific bootstrap classes that allow for direct animations on elements? ...
I am looking to modify the color of the active page, Here is the HTML code snippet: <html> <head> <title>John Doe - Portfolio</title> <link rel="stylesheet" href="custom-style.css"> <link rel=" ...
When it comes to CSS properties, the word-break attribute is able to split words across lines at specific points (such as the first character extending beyond a certain length). Surprisingly, there seems to be no existing CSS method (even with limited supp ...
I'm encountering an issue with webview and scrolling on different devices. I have managed to disable scrolling using the scrollEnabled property for IOS, but unfortunately, this does not work for Android. Despite trying various scripts, none of them se ...