can overflow: hidden; work with inline-blocks?

Stephen

I'm trying to put two divs with 50% width beside one another, they are inline-blocks.

The problem is, I also wish to add other elements that affect the width, such as margin, padding, borders, etc. I am quite alright to have a few pixels to be hidden off the side of the window. (In fact, I'd prefer it)

Whats the trick exactly? How can I have two inline divs that don't stack on top of each other when they hit the maximum width of their parent. Is there some default positioning that inline-blocks have?

EDIT: Here is an example of code. It seems rather simple to me, but they just wont line up.

.parent {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: 300px;
}
.child {
  display: inline-block;
  overflow: hidden;
  position: relative;
  width: 50%;
  height: 100%;
  margin: 1px;
}
<div class="parent">
  <div class="child">content</div>
  <div class="child">content</div>
</div>

Mike Bovenlander

For padding and borders you can use box-sizing: border-box; on your child element.

border-box: "The width and height properties (and min/max properties) includes content, padding and border, but not the margin"

source: box-sizing

I think for margin you need to cut some space off your .children. For example: width: 49.5%; margin: 1%;

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

From Dev

can overflow: hidden; work with inline-blocks?

From Dev

Can't get "overflow: hidden" to work on image

From Dev

Overflow: hidden not work

From Dev

Trying to make overflow: hidden work

From Dev

Trying to make overflow: hidden work

From Dev

css overflow:hidden with display:inline-block

From Dev

How do get overflow hidden to work

From Dev

Overflow:hidden full width div doesnt work

From Dev

Why doesnt it work without overflow hidden?

From Dev

overflow: hidden doesn't work on a pseudo element

From Dev

Understanding the wrapping behavior of inline-block elements with overflow:hidden

From Dev

overflow:hidden + display:inline-block moves text upwards

From Dev

overflow:hidden on inline-block adds height to parent

From Dev

Extra space when using overflow:hidden in inline-block list

From Dev

Making a <span> element inline-block and overflow: hidden will displace him?

From Dev

CSS - Can overflow-x be harmful if hidden?

From Dev

Can't get inline blocks to align

From Dev

Overflow hidden doesn't work on firefox, but does work in IE and chrome

From Dev

How to make bootstrap 3 tooltip work with parent div with overflow:hidden?

From Dev

ScrollTop animate does not work if html, body is overflow-x: hidden

From Dev

trying to add a scroll (overflow-y:hidden;) but it dosent work

From Dev

Overflow hidden doesn't work despite having height set

From Dev

overflow:hidden doesn't work on .animate() to the left, but works to the right?

From Dev

Chrome 55: position: fixed; in div overflow: hidden; doesn't work

From Dev

text-overflow doesn't work with inline-block elements

From Dev

Can't hide a heading with overflow: hidden; and transform: translate: -100%;

From Dev

Why baseline of `inline-block` element with `overflow:hidden` is set to its bottom margin?

From Dev

CSS mystery white space above and below container when overflow: hidden is used on an inline-block

From Dev

Why does overflow: hidden add additional height to an inline-block element?

Related Related

  1. 1

    can overflow: hidden; work with inline-blocks?

  2. 2

    Can't get "overflow: hidden" to work on image

  3. 3

    Overflow: hidden not work

  4. 4

    Trying to make overflow: hidden work

  5. 5

    Trying to make overflow: hidden work

  6. 6

    css overflow:hidden with display:inline-block

  7. 7

    How do get overflow hidden to work

  8. 8

    Overflow:hidden full width div doesnt work

  9. 9

    Why doesnt it work without overflow hidden?

  10. 10

    overflow: hidden doesn't work on a pseudo element

  11. 11

    Understanding the wrapping behavior of inline-block elements with overflow:hidden

  12. 12

    overflow:hidden + display:inline-block moves text upwards

  13. 13

    overflow:hidden on inline-block adds height to parent

  14. 14

    Extra space when using overflow:hidden in inline-block list

  15. 15

    Making a <span> element inline-block and overflow: hidden will displace him?

  16. 16

    CSS - Can overflow-x be harmful if hidden?

  17. 17

    Can't get inline blocks to align

  18. 18

    Overflow hidden doesn't work on firefox, but does work in IE and chrome

  19. 19

    How to make bootstrap 3 tooltip work with parent div with overflow:hidden?

  20. 20

    ScrollTop animate does not work if html, body is overflow-x: hidden

  21. 21

    trying to add a scroll (overflow-y:hidden;) but it dosent work

  22. 22

    Overflow hidden doesn't work despite having height set

  23. 23

    overflow:hidden doesn't work on .animate() to the left, but works to the right?

  24. 24

    Chrome 55: position: fixed; in div overflow: hidden; doesn't work

  25. 25

    text-overflow doesn't work with inline-block elements

  26. 26

    Can't hide a heading with overflow: hidden; and transform: translate: -100%;

  27. 27

    Why baseline of `inline-block` element with `overflow:hidden` is set to its bottom margin?

  28. 28

    CSS mystery white space above and below container when overflow: hidden is used on an inline-block

  29. 29

    Why does overflow: hidden add additional height to an inline-block element?

HotTag

Archive