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

Question

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.

html css

Answer 1

Answer №1

There are two methods to accomplish this task:

Eliminate the float attribute and replace it with

.wrapper{ height: 90%; display: flex; }
Experiment with using display:inline-block in CSS for both request-pane and response-pane.

Answer 2

There are two methods to accomplish this task:

Eliminate the float attribute and replace it with

.wrapper{ height: 90%; display: flex; }
Experiment with using display:inline-block in CSS for both request-pane and response-pane.

Answer 3

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 4

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 5

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 6

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 7

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!

Answer 8

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!

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

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Limit selection choices in select element

Using background-image in Internet Explorer has always been a challenge

Using props as classnames in next.js applications

Dynamically getting HTML and appending it to the body in AngularJS with MVC, allows for seamless binding to a

Learn how to retrieve images from the web API at 'https://jsonplaceholder.typicode.com/photos' and showcase them on a webpage using Angular10

Creating a visually striking layout with Bootstrap card columns masonry effect by seamlessly adjusting card heights to prevent any

Implementing an interactive tab feature using jQuery UI

Sending form array information using jQuery AJAX

The barely noticeable difference of 1 pixel in the link between Chrome and Firefox

Make the div disappear upon clicking the back button in the browser

In my Django html file, I am facing an issue with the IF statement that seems to be dysfunctional

Tips for resolving the need to manually set h-100 to HTML and BODY tags and addressing centering problems

trouble with padding on cards using vue-bootstrap

Items on Bootstrap have been expanded to fit larger screens

Guide on creating a menu that remains open continuously through mouse hovering until the user chooses an option from the menu

Comprehending the positioning of elements enclosed within a parent <div> tag

The issue of CSS transitions flickering in Internet Explorer

Having trouble with CSS margins behaving unexpectedly

Event dedicated to the selection of mobile options

Attempting to align the fixed banner in the middle of my blog