I attempted to find the information I needed, but all the results were related to CSS for internal divs.
However, my goal is to have two columns of divs aligned next to each other, with the right column always positioned at the top of the left column. I'm struggling to figure out how to achieve this.
The left column's size is dynamic, so using the :height property won't work to maintain alignment.
Here is a visual representation of what I am trying to accomplish:
To enhance the styling of your inline div, consider enclosing it within a transparent container. See this example:
<div class="transparent-wrapper">
<div class="inline-item">
</div>
<div class="inline-item">
</div>
<div class="clearfix-div"></div>
</div>
There are three ways to achieve this:
<table>
<tr>
<td><div>div</div></td>
<td><div>div</div></td>
</tr>
<tr>
<td><div>div</div></td>
<td><div>div</div></td>
</tr>
</table>
<div class="outer-container">
<div class="box-container">
<div class="left-box">
Left Box content
</div>
<div class="right-box">
Right Box Content
</div>
</div>
</div>
Calculate the height of the left-box using JS and then apply it to the right-box to maintain spacing.
Here is a beautiful solution for the desired effect:
.div1, .div2{
vertical-align:top;
}
.div1{
float:left;
width:70px;
}
.div2{
display: table-cell;
width:200px;
}
.div3{
display:table-cell;
width:200px;
}
<div class='div1'>1</div>
<div class='div2'>ABCDE FGHIJ KLMNO PQRST UVWXY Z</div>
<div class='div1'>2</div><div class='div2'>ABCDE FGHIJ KLMNO PQRST UVWXY Z</div>
and so on.
Approach 1: Utilizing tables for layout
Approach 2: Implementing jQuery to access each column's div, retrieving their heights, comparing them, and adjusting both divs to the maximum height. However, my preference is to rely on tables for resolving this issue.
Here is how you can achieve this:
Simply wrap each row in a div, with two column divs inside. Don't forget to clear the float after.
In a similar scenario, I opted for a different approach by creating containers for each row of 2 divs instead of using two columns. By floating the divs within the container without floating the container itself, the height of the container expands to match the tallest div. This ensures that the next container aligns neatly under it.
If you're curious to see the outcome and my HTML code, feel free to check it out here.
I initially wanted to structure a grid, however, the use of basic tables and nested divs made it necessary to lay out rows sequentially. This hindered my ability to arrange columns effectively for a responsive layout.
Fortunately, I found a solution using flexboxes to create grids. The first approach allows you to define rows at a time, while the second method enables you to specify columns individually.
HTML:
<h2>By row</h2>
<div class="table table3cols">
<div class="table-cell"><h3>Eddard Stark</h3></div>
<div class="table-cell">Sword named Ice</div>
<div class="table-cell">No direwolf</div>
<div class="table-cell"><h3>Jon Snow</h3></div>
<div class="table-cell">Sword named Longclaw</div>
<div class="table-cell">Direwolf: Ghost</div>
<div class="table-cell"><h3>Arya Stark</h3></div>
<div class="table-cell">Sword named Needle</div>
<div class="table-cell">Direwolf: Nymeria</div>
</div>
<h2>By column</h2>
<div class="table table3cols">
<div style="order:1;" class="table-cell"><h3>Eddard Stark</h3></div>
<div style="order:2;" class="table-cell">Sword named Ice</div>
<div style="order:3;" class="table-cell">No direwolf</div>
<div style="order:1;" class="table-cell"><h3>Jon Snow</h3></div>
<div style="order:2;" class="table-cell">Sword named Longclaw</div>
<div style="order:3;" class="table-cell">Direwolf: Ghost</div>
<div style="order:1;" class="table-cell"><h3>Arya Stark</h3></div>
<div style="order:2;" class="table-cell">Sword named Needle</div>
<div style="order:3;" class="table-cell">Direwolf: Nymeria</div>
</div>
LESS:
/* Variables
================================== */
@bw: 3px; // border width
/* Tables
================================== */
.table {
display: flex;
flex-wrap: wrap;
margin: 0 0 3em 0;
padding: 0;
}
.table-cell {
box-sizing: border-box;
flex-grow: 1;
width: 100%; // Default to full width
padding: 0.8em 1.2em;
overflow: hidden; // Or flex might break
list-style: none;
border: solid @bw white; // margins would overflow row and cause early wrapping
background: fade(slategrey,20%);
> h1, > h2, > h3, > h4, > h5, > h6 { margin: 0; }
}
/* Table column sizing
================================== */
.table2cols > .table-cell { width: 50%; }
.table3cols > .table-cell { width: 33.33%; }
.table4cols > .table-cell { width: 25%; }
/* Page styling
================================== */
body {
border: 1px solid grey;
margin: 0 auto;
max-width: 800px;
padding: 2em;
}
h1, h2, h3, h4, h5, h6 { margin-top: 0; }
Kudos to Davide Rizzo for introducing this technique in his informative article. He also shares useful tips on enhancing design responsiveness.
I am currently facing an issue with updating 10 apexcharts bar charts simultaneously in a Vue app. When this process occurs, it takes approximately one second to load completely, and during that time, I would like to display an svg spinner. However, the co ...
I am facing an issue with a div main containing a table grid. Rows are dynamically added to the table, causing it to increase in height. However, the height of the div main remains unchanged, resulting in the table overlapping the footer content. What chan ...
Looking for a solution where a page checks a typed link upon loading, such as: www.test.com/myphp.php=10 If it detects a specific number, it should redirect to another link. For example: Upon finding www.test.com/myphp.php=10, it redirects to www. ...
As I navigate through my styled HTML page, an interesting sequence of events unfolds. When the Create New List button is clicked, a pink div emerges, contrasting with the orange hue of the All Lists div. At this moment, a new user has joined but hasn' ...
When the onSubmit method is called in edit, there is an error that says "get(...).value.split is not a function" in Form. // Code for Form's onSubmit() method onSubmitRecipe(f: FormGroup) { // Convert string of ingredients to string[] by ', ...
My dilemma involves a parent element and a child element set up in the following manner: <parent element> <...> <...> <child element></child element> </...> <...> &l ...
Using this particular Bootstrap modal on a website (simplified version with fewer list items): #manufacturer-modal .modal-body { padding: 0; } #manufacturer-modal .nav-item { list-style: none; } #manufacturer-modal .nav-link { font-size: 1.2em; ...
Is it feasible to reference a color from one CSS class to another? Or generate a universal color definition that can be applied to multiple classes, eliminating the need to update in various places when changing a color? For instance, if I have a CSS clas ...
Currently, I am working on a project to convert HTML to PDF. Our webpage is built in Asp.net and includes a CKEditor with basic formatting options such as Fonts, Font Size, Bold, Italic, etc. Users can also input the desired height and width for the genera ...
Seeking assistance with changing an image inside a div to another image with a simple mouse click. Wondering if this can be achieved through CSS or if jQuery would be the better option. Here is the code snippet: <div id="slideshow"> <img ...
In the past, I would set the background image of a div by making a get request like this: style="background-image:url('/api/image')" However, now I am looking to do an $http request in Angular. Once I retrieve the image from response.data, I pl ...
Hello everyone! I've been struggling with a problem on the RPS project for quite some time now. The issue arises when I try to display a message for a tie in the game, but I can't seem to find a solution to make it disappear when the round is not ...
Having encountered an issue with multiple clicks being registered in jQuery despite clicking on only one element, I have browsed through various threads on Stack Overflow in an attempt to troubleshoot. However, I suspect that the problem lies within the co ...
Whenever I try to hover over the dropdown menu, it frustratingly appears behind the content div that I painstakingly created. Despite all my efforts with z-index adjustments, the issue still persists. Below you'll find all the code for my website, but ...
This is my first attempt at creating a jQuery plugin and I have almost got it working correctly. You can view the example here. I've been struggling for days to position an element as desired. The goal is to display some text with an optional downwar ...
I'm currently in the process of developing a platform that enables users to browse through different profiles based on their first names. I've attempted to utilize bootstrap's "data-title" for searching purposes, but unfortunately, it's ...
Having experience with the full stack development approach using PHP for dynamic HTML and SQL handling, I am now contemplating creating a hybrid app that can function across platforms. My main queries are: should I divide the app into HTML5 + CSS3 + JS an ...
Can someone help me troubleshoot an issue with my webpage? <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <link rel="stylesheet" href="<%= ResolveUrl("~/css/jq ...
Currently, I have implemented a typewriter effect on my website that triggers when the user scrolls to a specific section. However, I want this effect to occur only once. Unfortunately, every time the user scrolls again (in any direction), the function is ...
I've been attempting to include a button inside the Popovers in Bootstrap, but so far I have not been successful. Currently, I am using Bootstrap-Popover and my goal is to place a button inside the popover. HTML <div class="col-lg-4 mb-3 ser ...