Inline-block, what the fuck
Jul 1st 2016, 12:07 PM
I'm trying to get two inline-blocks to sit next to eachother but for fucks sake it's not working. I'm not completely braindead but I have no idea why this isn't working. Code is shit, made a new setup just to troubleshoot this so don't judge it. Please help me.

HTML:
Code:
<div class="box">
  <div class="child">first</div>
  <div class="child">what the fuck</div>
</div>


CSS:
Code:
.box {
display:block;
width:100%;
}
.child {
display:inline-block;
width:50%;
background:red;
}

What it looks like:
[Image: 78908c8109874346866da72189d78332.png]
3 comments
Jul 1st 2016, 12:17 PM
Also float is not an option.
Jul 1st 2016, 1:25 PM
Why isn't float an option? Just set [icode]overflow:hidden[/icode] on the parent
Jul 1st 2016, 4:14 PM
Edited
When the children are on new lines it creates a space between them which is what causes this. Add a comment between the children like this:

Code:
<div class="parent">
   <div class="child">
       ecks
   </div><!--
   --><div class="child">
       dee
   </div>
</div>
Doesn't require float.
3 replies to this discussion
New to GamingHQ? Make an account
Already have an account? Sign in
GamingHQ © • Terms
Running MyBB