I'm working on a layout with a parent div and two child divs. I want to ensure that this layout remains responsive to the browser's width, adjusting as needed whenever the user changes the window size.
In addition, I am trying to center-align the content within the layout by using vertical-align: middle; and display: table-cell;, but I'm open to other suggestions for achieving this effect.
If you have any insights or recommendations, please feel free to share them!
here is the custom HTML and CSS solution for your design:
<html>
<head>
<title>custom design</title>
<style>
.container{
width:95%;
border:1px solid #333;
height:120px;
padding:3%;
}
.left-div{
width:30%;
border:1px solid #333;
float:left;
height:100px;
margin-right:5%;
}
.right-div{
width:65%;
border:1px solid #333;
float:left;
height:100px;
}
</style>
</head>
<body>
<div class="container">
<div class="left-div">
</div>
<div class="right-div">
</div>
</div>
</body>
</html>
I have designed a responsive layout for you using divs, eliminating the need for media queries.
Additionally, in order to utilize
vertical-align:middle;
you should include
display:table;
in the parent div and avoid floating the inner divs.
Feel free to take a look at this sample
Is this method effective?
To achieve the desired result, utilize display:table; for the parent element and display:table-cell for the child elements. Specify the parent's width in percentage with overflow:hidden;
Here's how it looks in HTML:
<div class="parent">
<div class="first"></div>
<div class="second"></div>
</div>
And here is the corresponding CSS:
.parent{
display:table;
width:80%;
border-spacing:4px;
border:2px solid black;
overflow:hidden;
}
.first{
text-align:center;
display:table-cell;
border:2px solid black;
width:100px;
height:200px;
}
.second{
text-align:center;
display:table-cell;
border:2px solid black;
height:200px;
}
I'm attempting to locate and return the object inside comments_text that contains a key matching findKey. const findKey = "-MkeQEa2sgCho_ijk7TO" const posts = [ 0:{ comment: false, comments_text: { 0: { ...
Is there an automated or minimalist way to transform an application with a meteor backend and angular frontend to use a backend in Express js and keep the frontend using vue js instead? I have not been able to find any resources or documentation that prov ...
Can someone provide an example that includes a dropdown menu and checkboxes? The options in the checkbox list should match the data in the dropdown. Once a value is selected from the dropdown, the corresponding checkbox option should be automatically chec ...
I am currently facing an issue with closing the Android emulator using a telnet command in my Appium script. After executing the telnet command, I find that I need to manually input the "kill" command for it to work. Unfortunately, I am unable to execute ...
I have a Python script that retrieves JSON data and parses it: from django.http import HttpResponse import json, requests def fetch_data(request): context = {} platformUrl = 'https://www.igdb.com/api/v1/platforms' platformReq = requ ...
There are multiple text boxes, drop down menus, and radio options on this form. Upon clicking submit, I need to save all the information entered by the user in order to store it into a database. <div id="reg2a"> First Name: <br/><input type ...
[ { "clauseId": 1, "clauseName": "cover", "texts": [ { "textId": 1, "text": "hello" } ] }, { "clauseId": 3, "clauseName": "xyz", "te ...
Within my erb file, there exists a script that looks like the following: function checkJquery() { if(window.jQuery) { jQuery(document).ready(function() { alert('onready'); $('div#habla_topbar_div').click(function( ...
I am interested in aligning the price of coffee to the right end of the coffee name. For example, the price 1.80 should be in line with Americano and 10.00 should be in line with Macchiato. https://i.sstatic.net/unm26.jpg ul { list-style: none; pad ...
I'm currently working on a directive that allows me to control certain elements in the DOM based on user permissions. I recently discovered the .remove() function which works really well for removing elements. However, my issue arises when the user&a ...
Is it possible to set only the file name field that matches each file input field? I have three text input fields with the same name and three text fields for the file names. function getFileData(myFile){ var file = myFile.files[0]; var filename = ...
I am facing an issue with sending form values to another PHP file. After confirming the data submission, I do not receive any alert notification from the PHP file. Here's what I have tried so far: I created a test file with a simplified version of th ...
I've set up a mongoDB database and am working on sorting data by username to update the passwordHash with a new password. However, I'm encountering an issue with typescript throwing an error as mentioned in the title. Below is the snippet of my c ...
Hey there! I've been working on a cool slide up effect for an image using jQuery's slideUp and slideDown functions. It's working well, but I've noticed that when you hover over certain areas of the div/image, the effect becomes jumpy or ...
My goal is to add a tooltip to a specific header labeled 'Retire' within a data table, without affecting any of the other headers. It's been quite the learning experience for me as a Vue novice, but with the help of AI (chatgpt), I've m ...
I've recently developed an angularJS application. Below is the index.html <html ng-app="MyApp"> <head> <!-- Import CSS files --> </head> <body class="{{bodylayout}}"> <div ng-view></div> < ...
Recently delving into the world of vue.js, I've been experimenting with creating a form using Vue, vuetify, and vuelidate. Oddly enough, when I don't wrap the v-text-field there are no issues, but as soon as I try to encapsulate it within compone ...
Trying to create a typewriting effect using HTML5 has been quite the challenge. To bring it all together, I've turned to the pixi.js plugin. While I have managed to get it partly working, it appears that the update() method responsible for updating t ...
I've been attempting to utilize a plugin for select functionality, but I'm running into issues with the CSS not applying when I insert the class within JavaScript: The plugin I want to use via JavaScript: $('.search-test').SumoSelect ...
I'm attempting to create a layout using Bootstrap 3.2.0 with tiled divs in a single row for screens wider than 768px. The divs have heights of either 50px or 100px, controlled by the classes "home-height-single" and "home-height-double," and widths ad ...