Oscar Oscar - 4 months ago 11
CSS Question

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

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/

Answer

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?

Comments