Do you know why there is some white space between div yellow and gray?

Question

Im a beginner in css, and Im trying to build something where I have the div with the yellow background a little bit in front of the red div and then I want the gray div next to the yellow div.

Im trying to achieve this with the code below, and it is already almost doing what Im looking for, the only thing that is happening that I dont want is that the gray div have a little white space between the yellow div, but Im not understanding why. And while Im resizing the browser the yellow div moves down and is no longer above the red div. Do you know why?

Thanks!

html:

<div class="container" style="background-color:#e02; color:#fff;">
  <div class="content">
    <header>
      <h1>
        Title
      </h1>
    </header>
  </div>

  <div class="container" style="background-color:#fff";>
    <div class="content   ">
      <ul class="links">
        <a>Users</a>
        <a>Users</a> 
        <a>Users</a> 
        <a>Users</a> 
      </ul>
      <div class="text" style="background-color: #DDD;">
        <p>
          Go to this links and
        </p>

      </div>
    </div>
  </div>
</div>

css:

*, *:before, *:after{
  margin: 0;
  padding: 0;
}


.container{float:left; width:100%}
.content{width:50%; margin:0 25%; padding: 40px 0} 

.links{
  width: 100%;
  display: inline-block;
}


.links a{
  padding: 30px;
  float: left;
  color:#aaa;
  font-size: 16px;
  font-weight: 600; 
  background: yellow;
  margin-top: -10%;
  border:1px solid #aaa;
}

jsfiddle:

https://jsfiddle.net/s4wwmpqk/4/

That looks like whitespace, which is showing because of `inline-block` elements. See [How to remove the space between inline-block elements?](http://stackoverflow.com/questions/5078239/how-to-remove-the-space-between-inline-block-elements) — showdev, Jul 07 '16 at 00:22
Thanks, but wihout that the gray div go to the right of the yellow div and why dont want that. — Oscar, Jul 07 '16 at 00:25
Problems may also be introduced by using `` elements as direct children of a `
`, which [is invalid](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ul). — showdev, Jul 07 '16 at 00:29

score 0 · Accepted Answer · edited May 23 '17 at 11:44

0

An immediate fix to your problem can be done by changing .links

.links{
     width: 100%;
     display: block;
}

And adding

.text {
     clear: both;
}

Fiddle: https://jsfiddle.net/3jjv5zqe/

Why its happening is an inherited behaviour with the style inline-block.

See: Why is there an unexplainable gap between these inline-block div elements?

Edit: The reason why your links are moving down is because of the margin-top: -10% you had on your .links a. Percentages scale based on the parent element's width so as the .links width grew smaller, so did the negative margins.

Updated Fiddle: https://jsfiddle.net/3jjv5zqe/1/

edited May 23 '17 at 11:44

Community

1
1

answered Jul 07 '16 at 00:28

Kevin Quach

221
2
7

Thanks, its exactly that I was trying to achieve. And do you know why the resize problem happens? Why the yellow div dont stay fixed above the red div? – Oscar Jul 07 '16 at 00:34
I updated the fiddle for a fix for that and updated my answer with an explaination. – Kevin Quach Jul 07 '16 at 00:52
Thank you it worked fine and thanks for the explanation. – Oscar Jul 07 '16 at 01:00

Do you know why there is some white space between div yellow and gray?

1 Answers1