A pair of boxes sitting next to each other, both occupying 50% of the space but slightly longer in length and not aligned on the same level

Question

A pair of boxes sitting next to each other, both occupying 50% of the space but slightly longer in length and not aligned on the same level

My goal is to have two side-by-side boxes that fill the entire width of the screen. However, I'm facing an issue where each box exceeds 50% width by about 10 pixels. What could be causing this discrepancy?

#sides {
    padding-top: 40px;
    padding-bottom: 40px;
    background-color: white;
}

#leftside {
    width: 50%;
    background-color: grey;
    padding: 20px;
    margin: 0px;
    position: relative;
}

#rightside {
    width: 50%;
    display: inline-table;
    background-color: #018DCA;
    float: left;
    padding: 20px;
    margin-left: 50%;
    position: relative;
}

. . .

<div id="sides">
 <div id="leftside">
  <h1>text</h1>
  <p>
    <h2>text</h2>
  <br>
 </div>
 <div id="rightside">
  <h1>text</h1>
  <p>
    <h2>text</h2>
  <br>
 </div>
</div>

html css width

Answer 1

Answer №1

It is important to float both sides and always remember to apply box-sizing: border-box; to maintain a consistent width of 50% even when there are padding and border sizes to consider.

Answer 2

It is important to float both sides and always remember to apply box-sizing: border-box; to maintain a consistent width of 50% even when there are padding and border sizes to consider.

Answer 3

Answer №2

Although your question has already been answered, another approach to TylerH's solution could involve utilizing flexbox. Here is an example:

#container {
  display:flex;
  padding: 40px 0px;
  background-color: white;
}

.box {
  flex:1;    
  padding: 20px;
  margin: 0;
}
#left{background-color: grey;}
#right{background-color: #018DCA;}

<div id="container">
  <div class="box" id="left">
    <h1>text</h1>
    <h2>text</h2>
  </div>
  <div class="box" id="right">
    <h1>text</h1>
    <h2>text</h2>
  </div>
</div>

It's important to note, as TylerH mentioned, that this method may require more up-to-date browsers. Visit this resource for details on browser compatibility.

Answer 4

Although your question has already been answered, another approach to TylerH's solution could involve utilizing flexbox. Here is an example:

#container {
  display:flex;
  padding: 40px 0px;
  background-color: white;
}

.box {
  flex:1;    
  padding: 20px;
  margin: 0;
}
#left{background-color: grey;}
#right{background-color: #018DCA;}

<div id="container">
  <div class="box" id="left">
    <h1>text</h1>
    <h2>text</h2>
  </div>
  <div class="box" id="right">
    <h1>text</h1>
    <h2>text</h2>
  </div>
</div>

It's important to note, as TylerH mentioned, that this method may require more up-to-date browsers. Visit this resource for details on browser compatibility.

Answer 5

Answer №3

Avoid using floats to arrange your document layout as it can disrupt the flow of the text and images. Instead, consider using display: inline-block; with minimal CSS adjustments for a cleaner design. Check out this JSFiddle example.

html, body {
    margin: 0;
}
#container {
    padding-top: 20px;
    padding-bottom: 20px;
    background-color: #f2f2f2;
}
#left-column {
    width: 50%;
    background-color: #ccc;
    display: inline-block;
    padding: 10px;
}
#right-column {
    width: 50%;
    background-color: #81d4fa;
    display: inline-block;
    padding: 10px;
}

<div id="container">
    <div id="left-column">
        <h1>Left Column</h1>
        <p>Lorem ipsum dolor sit amet.</p>
    </div><!--
 --><div id="right-column">
        <h1>Right Column</h1>
        <p>Sed do eiusmod tempor incididunt.</p>
    </div>
</div>

Answer 6

Avoid using floats to arrange your document layout as it can disrupt the flow of the text and images. Instead, consider using display: inline-block; with minimal CSS adjustments for a cleaner design. Check out this JSFiddle example.

html, body {
    margin: 0;
}
#container {
    padding-top: 20px;
    padding-bottom: 20px;
    background-color: #f2f2f2;
}
#left-column {
    width: 50%;
    background-color: #ccc;
    display: inline-block;
    padding: 10px;
}
#right-column {
    width: 50%;
    background-color: #81d4fa;
    display: inline-block;
    padding: 10px;
}

<div id="container">
    <div id="left-column">
        <h1>Left Column</h1>
        <p>Lorem ipsum dolor sit amet.</p>
    </div><!--
 --><div id="right-column">
        <h1>Right Column</h1>
        <p>Sed do eiusmod tempor incididunt.</p>
    </div>
</div>

Answer 7

Answer №4

To enhance the presentation, incorporate display:inline-block and font-size:0 in the main container div - it is imperative. Experiment with including vertical-align:top in the div on the right as well.

Answer 8

To enhance the presentation, incorporate display:inline-block and font-size:0 in the main container div - it is imperative. Experiment with including vertical-align:top in the div on the right as well.

Answer 9

Answer №5

#sides {
    padding-top: 40px;
    padding-bottom: 40px;
    background-color: white;
}

#leftside {
    width: 47%;
    background-color: grey;
    float: left;
  padding:5px;
}

#rightside {
    width: 47%;
    background-color: #018DCA;
    float: right;    
    padding:5px;
}

<div id="sides">
 <div id="leftside">
  <h1>text</h1>
  <p>
    <h2>text</h2>
    <br>
 </div>
 <div id="rightside">
  <h1>text</h1>
  <p>
    <h2>text</h2>
    <br>
 </div>
</div>

Answer 10

#sides {
    padding-top: 40px;
    padding-bottom: 40px;
    background-color: white;
}

#leftside {
    width: 47%;
    background-color: grey;
    float: left;
  padding:5px;
}

#rightside {
    width: 47%;
    background-color: #018DCA;
    float: right;    
    padding:5px;
}

<div id="sides">
 <div id="leftside">
  <h1>text</h1>
  <p>
    <h2>text</h2>
    <br>
 </div>
 <div id="rightside">
  <h1>text</h1>
  <p>
    <h2>text</h2>
    <br>
 </div>
</div>

A pair of boxes sitting next to each other, both occupying 50% of the space but slightly longer in length and not aligned on the same level

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

Creating a loader for a specific component in Angular based on the view

Navigate to a section that has been dynamically loaded through ajax

Using PHP variables in JavaScript to access getElementById

Unable to transfer HTML code into the TinyMCE editor

jQuery Files in Conflict

Creating a set width for the input-group-append division in Bootstrap 4

``Is there a faux pseudo element lurking within Firefox?"

make changes to the current selection in the drop-down menu

How can I eliminate the black outline added to text by IE CSS filter?

Differences seen in display when using Internet Explorer's prependTo feature

Transfer the choices from a dropdown list to a different JSP page

Leveraging JavaScript along with the jQuery library and API to showcase information related to

Ways to retrieve data from a URL and pass it to JavaScript code

Retrieve JSON data from Form Submission

Deleting empty tags in an HTML h1 element with JavaScript

How to show a tooltip inline by utilizing CSS styling

Navigation menu that is vertical and includes submenus, where the parent list item remains active even when visiting subpages

Modify the paragraph's class upon clicking the radio button

Material UI - Clear all designs from the slate

Acquiring the `=` symbol within email HTML