How does adding padding cause two horizontal divs to become vertical?

I noticed that when I remove the padding from the code below, two vertical divs become horizontal. This is confusing to me because I thought padding only affects internal spacing. I was expecting the two divs to be aligned horizontally.

<style>
#wrapper {
width:100%;
margin : 0;
}

#first-div {
width:50%;
margin : 0;
float : left ;
padding: 10px;
background-color: green;
color: white;
}

#second-div {
width:50%;
margin : 0;
float : left ;
background-color: blue;
color: white;
padding: 10px;
}
</style>
<div id="wrapper">
        <div id="first-div" >
            First  div content here...
        </div> 
        <div id="second-div" >
            Second div content here...
        </div>
    </div>

Answer №1

  <div id="container">
            <div id="left-column" > ;
                Content for left column goes here...
            </div>
            <div id="right-column" > ;
                Content for right column goes here...
            </div>
        </div>
<style>
#container {
width:100%;
margin : 0;
}

#left-column {
width:50%;
margin : 0;
float : right ;
padding: 10px;
background-color: green;
color: white;
box-sizing: border-box;
}

#right-column {
width:50%;
margin : 0;
float : right ;
background-color: blue;
color: white;
padding: 10px;
box-sizing: border-box;

}
</style>

Make sure to set the box-sizing property of your div elements as border-box so that padding is accounted for inside the border.

Answer №2

The reason for the element collapsing to a new line is because the width is set at 50% and extra padding is added on top of that, causing it to overflow (especially when using float: left)

To prevent this issue, applying box-sizing: border-box to each div will ensure that padding is included within the width of the element

Answer №3

Consider using display flex instead of float:

#wrapper {
width:100%;
margin : 0;
display: flex;
justify-content: flex-start;
flex-direction: column;
}

#first-div {
width:50%;
margin : 0;
background-color: green;
color: white;
padding: 10px;
}

#second-div {
width:50%;
margin : 0;
background-color: blue;
color: white;
padding: 10px;
}

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

What is the best way to design a page with a fixed dimension element and a flexible liquid element?

Is there a way to achieve the layout described below without relying on tables? Left element (100px) | Right element (occupies remaining space, even with no content) Thank you! Edit: Here's the link to the code: http://pastebin.com/vU33jNxD ...

Browser disregards backslashes in the content of pseudo elements

I have been struggling with a simple issue for quite some time now, and I seem to be out of ideas. The problem lies in the styling of a CSS pseudo-element before, which is defined as follows: #fPhone::before{ color: #78be20; content: "\e622" ...

Transfer the @font-face declaration from the global CSS file into the MUI Theme

In my project, I have an index.css file that includes the following @font-face declaration: //Index.css ... @font-face { font-family: "My Font"; font-style: normal; font-display: swap; font-weight: 400; src: url(/public/fonts/my-font.eo ...

Divide material-ui toolbar into separate left and right sections

Is there a way to split the material-ui toolbar into a left and right part? I want to display the numSelected on the left side of the toolbar, and the delete button and edit button on the right side. Currently, my output shows these buttons just beside t ...

Updating the text of an element will occur only when the specified condition has been met

I am trying to dynamically change the text within the <span data-testid="recapItemPrice">ZADARMO</span> element from 'ZADARMO' to 'DOHODOU' only when the text inside the parent element 'INDIVIDUÁLNA CENA PREP ...

Restricting the type of user input in HTML forms

Requirements: Input must be a whole number between 2 and 99, inclusive. Current Solution: <input required type="number" min="2" max="99" oninput="this.value = Math.abs(this.value)" maxLength="2" matInp ...

Steps for aligning the upper rectangular text in the center of the larger rectangular border

https://i.stack.imgur.com/7yr5V.png I was aware of a particular element in html that had text positioned in the upper left corner, but my knowledge didn't go beyond that. Should I be adjusting the translation on both the X and Y axes based on the par ...

Is it possible for a search box selection toggle to reveal a hidden information box underneath it containing all the compiled data?

Improve the user experience on my website by implementing a search feature for US states and Canadian territories. When visitors type in their selection, I want them to be able to click on an icon that will reveal relevant information about that choice. T ...

What is the best way to position two text fields next to each other on a webpage?

As I design a form for a landing page, my goal is to arrange the text input fields side by side in order to avoid making the form too lengthy. I am striving to achieve a layout similar to this: https://i.sstatic.net/PTCr4.png However, the task seems quit ...

Conceal/reveal div with initial partial visibility

http://jsfiddle.net/7RDBk/1/ At the moment, I am using slideUp and slideDown functions to hide and display a div. My goal is to have 25px of the div showing initially before expanding and going back to 25px when clicked. It seems like a simple task, but I ...

Combine two columns into a single table column using HTML/CSS and JavaScript with the help of Datatables

I utilize the DataTables library from https://datatables.net/ to create sortable and searchable tables on my website. However, my table becomes too wide due to the numerous columns it contains. I am looking for a way to condense the width by merging relate ...

The vertical-align property in CSS seems to be malfunctioning

Hi there, I'm struggling with the CSS code below: .parent { position : 'absolute'; top : '50px'; left : '50px'; width : '400px'; height : '160px'; padding : '10px'; ...

Using <fieldset> allows you to display <select> elements in a vertical arrangement

As I work with this piece of html, JQuery populates my boxes and I am utilizing fieldsets to focus on only the necessary selection before POSTING it to my servlet. However, there seems to be an issue as the content is being displayed vertically when I ac ...

Enhance User Experience - Automatically highlight the first element in Prime NG Menu when activated

I have been working on transitioning the focus from the PrimeNG menu to the first element in the list when the menu is toggled. Here is what I've come up with: In my template, I added: <p-menu appendTo="body" #menu [popup]="true&quo ...

Incorporating an Aspx Page into a Static Website

We currently have a static website consisting of all html files. In addition, we have a dynamic ASPX website with a specific page (RegisterAndBuy.aspx) that displays data based on user selections and collects personal information to send to the Admin via ...

Is there a way to automatically update the input value when I refresh the page following a click event?

Currently, I have multiple p elements that trigger the redo function upon being clicked. When a p element is clicked, the quest[q] template is loaded onto the .form div. These templates are essentially previously submitted forms that sent values to an obj ...

What is the best way to choose a range of nodes with dynamic limitations without relying on static positions?

<li></li> <th> <li></li> <strong>"Jeff"<strong> <li></li> <a>"Mary"<a> <li></li> <th> <li></li> <strong>"Rich"<strong> <li></li&g ...

Utilizing Vue's string-based class binding feature?

Can Vue class binding work with strings? For example: <div :class={open: target == 'myString'}></div> var app = new Vue({ target: null }) It works when I don't use quotes <div :class={open: target == myString}></div ...

To subscribe to the display of [Object Object], you cannot use an *ngIf statement without being inside an *ngFor loop

In my angular Quiz project, I have a functionality where every user can create quizzes. I want to display all the quizzes that a logged-in user has completed. Here is how I attempted to achieve this: // Retrieving user ID and category ID inside Re ...

Is it possible for me to reply to packets that are transmitted to a website?

I'm currently working on a Python program that sends a 'hello' packet to the server and I'm wondering if I can get the server to respond based on that. Here's the code snippet I'm using to send the packet: import requests hL = ...