CODEWITHSUNDEEP
htmlcssdisplay
Shashwat Kumar
Shashwat Kumar

Reputation: 5297

display block not working properly

I am facing some issue with display block which I have put here with simplification.

.parent
{
  width:200px;
  border: 1px solid black;
  background-color: #cccccc;
}

.first
{
  border: 1px solid black;
  float: left;
  width:30px;
}

.second
{
  border: 1px solid black;
  display: inline-block;
  background-color:white;
}
<div class="parent">
<span class="first">first</span>
<span class="second">second</span>
</div>

Revamping the question and its was quite confusing earlier. In above code snippet, .second width is limited to its content. I want .second to extend to end of the parent container .parent . I have tried using display: block instead of inline-block for .second but its not working. Please suggest how to do it?

Upvotes: 1

Views: 715

Answers (1)

Mohamed-Yousef
Mohamed-Yousef

Reputation: 24001

if I got your point you can use overflow:hidden and while you use a <span> you will need to add display:block . Additional No need for display:block if this is a div

.second
{
  border: 1px solid black;
  background-color:white;
  overflow:hidden;
  display : block;
}

Demo

.parent
{
  width:200px;
  border: 1px solid black;
  background-color: #cccccc;
}

.first
{
  border: 1px solid black;
  float: left;
  width:30px;
}

.second
{
  border: 1px solid black;
  background-color:white;
  overflow:hidden;
  display : block;
}
<div class="parent">
  <span class="first">first</span>
  <span class="second">second</span>
</div>

Upvotes: 3

Related Questions