Place 2 divs alongside eachother using 50% width

HTML & CSS
,
1

Hi I was wondering how to place 2 divs alongside eachother while using padding to bring in the text.

My code at the moment:

2

Adding this will make them fit with 50% width:-

.full div {
  box-sizing: border-box;
}

But rather than floats, you could use either inline-blocks, display table or flex box to get a result.

3

ninja’d by @SamA74, but I’d use display: table and display: table cell;

.full {
  display:table;
  width: 100%;
}
.left, .right {
  display: table-cell;
  width: 50%;
  height: 200px;
}
.left { background-color: blue;}
.right { background-color: red;}

<div class="full">
    <div class="left">
          dfsf
    </div>
    <div class="right">
         jhjhj
    </div>
</div>
1 Like
4

what if I wanted to add padding to the divs?

5

The box-sizing should take care of that. Using display: table/cell it’s not an issue.

6

Adding some of MDN’s documentation to add clarity on what `` `box-sizing: border-box; ``` is doing.

Src
https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing

content-box
This is the initial and default value as specified by the CSS standard. The width and height
properties are measured including only the content, but not the
padding, border or margin. Note: Padding, border & margin will be
outside of the box e.g. IF .box {width: 350px;} THEN you apply {border: 10px solid black;} RESULT {rendered in the browser} .box {width: 370px;}So simply the dimension of element is calculated as, width = width of the content, and height = height of the content (excluding the values of border and padding).

border-box
The width and height properties include the content, the padding and border, but not the margin. This is the box model used by Internet Explorer when the document is in Quirks mode. Note that padding and border will be inside of the box e.g. .box {width: 350px; border: 10px solid black;} leads to a box rendered in the browser of width: 350px. The content box can’t be negative and is floored to 0, making it impossible to use border-box to make the element disappear.

Using the css border-box property appears to be more appropriate, though display: table; looks like it’s using the same functionality. CSS provides us with an appropriate property for this situation. Semantics for CSS essentially is what it comes down to.

I’d like to thank @SamA74, I didn’t know what that property did and haven’t had a reason to look it up before; I thought we were doomed to figuring the calculations for ourselves.

7

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.