Is there a way to align two divs horizontally next to each other, centered in the browser window?
These divs should have equal width and height, with a small gap between them. Additionally, they need to be responsive.
I've searched on Stack Overflow for a solution but couldn't find one that addresses my specific requirements.
The recommended approach is to utilize Viewport units: vw, vh, vmin, vmax in conjunction with the calc() CSS function .
*{box-sizing: border-box; padding: 0; margin: 0} /*reset all browser style*/
:root{background: black; min-height: 100vh; width: 100vw} /*set the root element to viewport*/
body{ text-align: center} /*ask the browser to set the box in the middle of the screen*/
article{
background: white;
width: calc(50vw - 40px); /*reserve 20x2px for the margin*/
height: calc(100vh - 20px); /*reserve 10x2px for the margin*/
display: inline-block;
margin: 20px 10px
}<article></article>
<article></article>Alternatively, percentage values can also be used.
*{box-sizing: border-box; padding: 0; margin: 0}
:root{background: black; min-height: 100vh}
section{
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
text-align: center
}
article{
background: white;
width: 48%;
height: 90%;
display: inline-block;
margin: 5% auto
}<section>
<article></article>
<article></article>
</section>Take a look at this:
<style>
#main {
width: 800px;
margin: 0 auto;
}
#sidebar {
width: 400px;
height: 400px;
background: red;
float: left;
}
#page-wrap {
width: 400px;
background: yellow;
height: 400px;
float: right;
}
</style>
<div id="main">
<div id="sidebar"></div>
<div id="page-wrap"></div>
</div>
Have a look at this: http://jsfiddle.net/8uwcs679/
I've designed two divs with 40% width each. The left div has a right margin of 5%, leaving a total remaining width of 15% (100% - 40% - 40% - 5%).
To center the divs and ensure responsiveness, I set the left div's left margin to 7.5%.
HTML :
<div class="side left"></div>
<div class="side right"></div>
CSS :
.side{
float: left;
width:40%;
height: 100px;
background: rgba(0,0,0,0.2);
}
.left {
margin-right: 5%;
margin-left: 7.5%;
}
Creating a basic HTML structure:
<div class="container">
<div class="box-one"></div>
<div class="box-two"></div>
</div>
Add some CSS styling:
.container{
width: 100%;
text-align: center;
}
.box-one, .box-two{
display: inline-block;
width: 30%;
}
.box-one{
margin-left: 5px;
}
The height of the boxes will adjust according to their content.
If you want to achieve the identical height, I recommend utilizing flexbox.
body { /* Alternatively, utilize an additional container element */
display: -webkit-flex;
display: flex;
-webkit-justify-content: center;
justify-content: center;
}
body > div {
background-color: orange;
margin: 0 .25em; /* To create a gap */
width: 40%;
}<div>first. equal height by default. equal height by default. equal height by default. equal height by default. equal height by default. equal height by default. equal height by default. equal height by default. </div>
<div>second</div>public function getCrew(){ $search = $this->input->post('name'); if($this->input->post('ajax') && (!empty($search))){ $result = $this->model->getNames($search); foreach($result as $r){ ...
I am looking to enhance my social media share buttons on my website, similar to the ones found on YouTube: Currently, I have default buttons that are not visually appealing: <a name="fb_share" type="icon" share_url="<?php the_permalink(); ?>"> ...
To complete the task of finding the top-selling women's socks on Amazon, I attempted to locate the item labeled as a "Best Seller" after searching for "Socks for women" on the website. However, I am struggling with the logic to identify and click on t ...
After spending the entire day searching for a solution to override the irritating scrollbar issue on my iPhone, I came across this simple example: .scroller { background: lightblue; height: 1000px; max-width: 400px; margin: 90px auto; padding: ...
I need to make updates to a specific div element without refreshing the entire HTML page. The code below currently works, but it reloads the entire HTML page. Additionally, I am working with different layouts where I have separate files for the header, l ...
I'm having some trouble with a Flexbox layout and can't seem to find the right solution. My goal is to have 3 items per row, but not force them to fill up the entire row if there are less than 3 items. For example: 1 2 3 4 _ _ On smaller scr ...
I'm a beginner in the world of angularjs. I was curious about why the custom attributes that angularjs adds to an html element don't cause any errors? Like <div ng-if='true'> Furthermore, is it within our capabilities to create o ...
I'm struggling to center a div that includes Jquery. It's meant to be the background header for all other content, but I can't seem to get it in the right position. I have tried using z-index and different positioning options, but nothing se ...
I have encountered multiple questions on this issue, but none of the suggested solutions seem to work for me. I have a grid of boxes with CSS transforms applied to each. Upon page load, jQuery appends an invisible pop-up <div> to each box. When hover ...
I am attempting to recreate a fascinating effect using jQuery - where "cards" move in response to the mouse cursor as if they are looking up at it. I have come across a script that almost achieves what I need, but I require the ability to control the mov ...
I'm currently facing a challenge that I can't seem to figure out... Here is the issue (in JavaScript): export default { name: "TodoList", data() { return { title: "", content: null, isDone: true, count: 0, n ...
I am implementing a Vue.js 2 feature for displaying Bootstrap modals. Here is an example. <div class="modal fade" tabindex="-1" role="dialog"> <div class="modal-dialog" role="document"> <div class="modal-content"> ...
Here is the code for a component I am working on: <div class="wrapper"> <div horizontal-group class="filter-container"> <comp-form-item :label="Date"> <comp-datesrange ref="dataRange ...
I have a container div and an array. Initially, I prepend 3 divs to the container div. Then, after a delay of 3 seconds, I remove the 3rd div. Using jQuery animate, I transition the 2 remaining divs to the right side before adding a new div. The issue ari ...
When using Bootstrap, I typically have the following code: <div class="col-xs-12 col-sm-6 col-lg-8"></div> However, when working with Polymer, I could only find this: <div class="flex-12"></div> The issue is that the div doesn& ...
This is a representation of time stamps in the form of color bars drawn on an HTML5 Canvas. Each color bar corresponds to a specific timestamp, such as 00:30 or 05:45. These color bars are essentially rectangles that I draw over the canvas. I am seeking ...
I am a beginner in the world of programming and web development. Currently, I am working on building my own personal website. My goal is to arrange boxes in a grid with 4 columns, similar to the layout you can find at this link: Each box represents an ob ...
I am attempting to utilize WebRTC in order to showcase a video input as a live feed on the screen. My intention is not to engage in any peer-to-peer communication, but solely to display a video feed. The code I have implemented works smoothly with my lapt ...
My Rails project has a navigation bar set up like this: <nav> <%= link_to "Home", root_url %> | <%= form_tag "/posts", :method => 'get' do %> <%= search_field_tag 'search', nil, :placeholder => ...
I have experience in coding HTML and PHP, but unfortunately, [email protected] (mail address) is still unable to receive emails from my website (http://cloudsblack.info/) and when I click the submit button, it leads to a blank page (http://cloudsblack.info ...