Struggling with aligning two divs side by side on an HTML page

Recently, I've been experimenting with Electron and attempting to create 2 divs side by side. Despite trying various alignment options found here, nothing seems to be working for me. Here's the code I have so far:

Code

body, html {
    height: 100%;
}

.wrapper{
    height: 90%;
}

.request-pane {
    float:left; /* add this */
    margin-left: 10%;   
    height: 90%;
    width: 45%;
    border: 1px solid red;
}

.response-pane {
    float:right; /* add this */
    margin-left: 55%;
    height: 90%;
    width: 45%;
    border: 1px solid black;
}
<div class="wrapper">
    <div class="request-pane"></div>
    <div class="response-pane"></div>
</div>

I am puzzled as to where I might be going wrong. As a newcomer to HTML, I may be missing something obvious. Any guidance would be greatly appreciated.

htmlcss

Answer №1

There are two methods to accomplish this task:

  1. Eliminate the float attribute and replace it with

    .wrapper{ height: 90%; display: flex; }

  2. Experiment with using display:inline-block in CSS for both request-pane and response-pane.

Answer №2

If you require the use of `floats` in this instance - implement them with caution

body, html {
  height: 100%;
}

.request-pane, .response-pane {
  box-sizing: border-box; /* include border in width calculation */
}

.wrapper {
  height: 90%;
}

.request-pane {
  float: left;
  margin-left: 10%;
  height: 90%;
  width: 45%;
  border: 1px solid red;
}

.response-pane {
  float: right;
  /* margin-left: 55%; */ /* potential source of issues */
  height: 90%;
  width: 45%;
  border: 1px solid black;
}
<div class="wrapper">
    <div class="request-pane"></div>
    <div class="response-pane"></div>
</div>

However, it might be more beneficial to utilize flexbox instead. For a comprehensive guide on the topic, refer to: https://css-tricks.com/snippets/css/a-guide-to-flexbox/.

Furthermore, it appears that there may be gaps in your knowledge of HTML/CSS fundamentals, so enrolling in some introductory courses could greatly enhance your skills.

Answer №3

Eliminate the margin-left attribute and incorporate display:inline-flex into the css classes request-pane and response-pane as illustrated below.

body, html {
    height: 100%;
}

.wrapper{
    height: 90%;
}

.request-pane {
    float:left; /* include this */
    height: 90%;
    width: 45%;
    border: 1px solid red;
    display:inline-flex;
}

.response-pane {
    float:right; /* include this */
    height: 90%;
    width: 45%;
    border: 1px solid black;
    display:inline-flex;
}
<div class="wrapper">
    <div class="request-pane"></div>
    <div class="response-pane"></div>
</div>

This solution should work seamlessly. Feel free to test the code in the snippet provided to see if it meets your expectations.

Answer №4

To make things even easier, consider utilizing bootstrap for your layout. Divide your screen into two equal parts and create a div in each section. This approach should meet all your requirements, and w3school is a great resource for guidance!

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Using a CSS button to activate a JavaScript function: A step-by-step guide

My current project involves writing a script to change the color of text when a specific button is clicked. The idea is that clicking the "Change color1" button triggers the text color change using the following code snippet: <button onclick="myFunction ...

javascriptcss

javascript mobile nav event

My website utilizes a bootstrap feature for mobile devices where a left sidebar pops up when clicking a button. I am not very familiar with bootstrap, but I would like to link a javascript event to determine if the left sidebar is visible. How can I achiev ...

javascripthtmlcsstwitter-bootstrap

Steps to dynamically reveal a table row within another row when clicked:

I have a table and I want to show the contents of another row inside the current row when the plus icon is clicked. I'm not sure which HTML element to use for this. Please help me figure it out. Thank you in advance. <div class="pro ...

javascripthtmlcssexpandcollapsable

Photo captured by camera is not stored in photo gallery

I am currently working on a basic image upload form that allows users to take photos using their phone camera and upload them. However, I have noticed that the pictures taken this way are not being saved to the gallery. Is there something missing in the H ...

javascriptangularhtmlandroid-cameramedia

Leveraging the Power of CSS in Your Express Applications

Struggling to make my CSS links functional while working on localhost. Currently, when I view Index.html on my server, it displays as plain text without any styling. Even after trying the express middleware, the CSS files are still not being served, result ...

javascripthtmlcssnode.jsexpress

Creating a search field in Bootstrap 4 that emulates material design, facing challenges with transition animations

I tried to create a material design search field using Bootstrap form input. While I was able to make it work, I noticed a small issue with the focus state. When I click inside the field, the underline animation runs smoothly. However, when I click outside ...

htmlcsstwitter-bootstrapbootstrap-4

Can you explain the significance of the "style.css?ver=1" tag?

Recently, I noticed that certain websites incorporate a CSS tag such as style.css?ver=1. Can you explain the significance of this? What exactly is the purpose of adding ?ver=1 to the CSS tag? Could you provide instructions on how to implement this in cod ...

cssversion

Error encountered when using the $.post function

$(".eventer button[name=unique]").click(function() { console.log('button clicked'); thisBtn = $(this); parent = $(this).parent(); num = parent.data('num'); id = parent.data('id'); if(typeof num ! ...

jqueryhtmlajax

Steps to modify the background color of an IconButton upon clicking in Material UI

After clicking on the IconButton, the background color changes to an oval shape. I now need to modify the background color when it is clicked. CSS The CSS code for the IconButton changes the background color upon hover. I require a similar effect for the ...

csstypescriptmaterial-ui

Python does not render the HTML string from a variable when using Mako

Trying to render a string variable in a Mako template like: ${variable_name} The variable contains HTML content, but it is not displayed correctly. Instead of rendering the HTML, it just shows the source code like: <div>...<p>..</p>...&l ...

pythonhtmlxmlodoomako

Content escapes its parent container and seamlessly transitions to the following element

I am facing an issue with the layout of my element, which includes an image and text centered inside a parent container. Whenever I try adding more elements below the existing image and text, the green text with a red border overflows the current parent . ...

htmlcsstwitter-bootstrap

Ways to generate multiple elements using JavaScript

Is there a way to dynamically freeze columns in a table as I scroll it horizontally? I've achieved this statically using JavaScript, but is there a way to indicate the number of columns and achieve the desired style? This is what my JavaScript code c ...

javascripthtmlcssdom

Interactivity with SVG clip-path featuring multiple paths through hover events

I have a unique SVG demo image with multiple circles that are clipping an animated GIF. Can we detect hover events for each individual circle as the user mouses over them? For example, the top-left or middle-right circle? Is it also possible to change th ...

csshtmlsvgclip-path

Did my code effectively block an XSS attack?

Recently, I was informed that my website has vulnerabilities to XSS attacks. In an effort to improve security, I have implemented the htmlspecialchars method as a preventive measure. Here is the function I created: function _e($string){ return htmlsp ...

phphtmlsecurity

Why is it that an HTML entity-containing string doesn't show the character after going through the htmlspecialchars() function?

In my project, I have a string of text retrieved from the SQL database which is then sanitized using PHP's strip_tags and htmlspecialchars functions to eliminate any HTML formatting that users might try to inject. This processed text is displayed in b ...

phphtmlhtml-entitieshtmlspecialcharsstrip-tags

Is it possible for an SVG to derive its dimensions from the containing element?

I am currently in the process of transitioning a Vue/Vuetify application from using web fonts for Material Design Icons to utilizing SVG icons instead. With the web font, an example of a heading that includes an icon looks like this: <template> &l ...

csssvgvuetify.js

Issue with jQuery: Function not triggered by value selection in dynamically created select boxes

I am in need of some assistance with my code that dynamically generates select drop down menus. I want each menu to trigger a different function when an option is selected using the "onchange" event, but I am struggling to implement this feature. Any hel ...

javascriptjqueryhtml

Proper method for posting an object array through a form submission

I am currently integrating a payment service API into my application and following the instructions provided on their website. The documentation specifies that the POST body should have the following structure: api_hash=38be425a-63d0-4c46-8733-3e9ff662d62 ...

htmlajaxasp.net-mvchttppost

Eliminate any hyperlink mentions from the Media Print Screen

I'm experiencing a small issue where I am unable to remove the link reference from the print view. Below is the HTML code snippet: <table style="width: 436px; height: 374px;" border="0" cellpadding="5"> <tbody> <tr style=" ...

htmlcss

Is there a way to modify the background hue of an upward facing triangle when a submenu is hovered over?

Access the Code on Fiddle #nav .submenu:before { content:""; position: absolute; width: 0; height: 0; border-bottom: 22px solid #b29600; border-left: 11px solid transparent; border-right: 11px solid transparent; margin: -12px ...

jquerycsshoverpseudo-element