CODEWITHSUNDEEP
htmlcssblockdisplay
Joel Li
Joel Li

Reputation: 35

Display: inline-block not working with divs

i'm trying to create a news box where there will be a div containing an image on the left and a div containing lines of text on the right. Whenever i set them to inline-block the text goes right beneath the div image and stays there. I want them to be in a single line. Here's my code, can you point out what i'm doing wrong?

EDIT: Corrected the TYPO but still...

<div id="newsBox">

        <div id="newsImg">
            <img src="images/news1.jpg" alt="news1">
        </div>

        <div class="metaNews">
            <div id="newsTitle">
                <h3>Text Text Text Text Text Text Text Text .</h3>
            </div>

            <div class="newsBrief">
                <p>Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text </p>
            </div>
        </div>
        <div style="clear:both"></div>

        <div class="newsBy">
            <span class="metaDate">Posted on 10/5/2017</span>
            <span class="metaBy">By Li</span>
        </div>

        <div class="newsLink">
            <a href="news1.html">View &rarr;</a>
        </div>
        <div style="clear:both"></div>

</div>

And the CSS:

#newsBox {
    width: 85%;
    margin: 0.5rem auto;
    padding: 0.5rem;
    border: #333 solid 1px;
    background-color: #c2c2c2;
}

#newsImg {
    display:inline-block;

    
}
#newsImg > img{
    max-width:  120px;
    max-height: 120px;
    padding-right:20px;
    vertical-align: middle;
}
.metaNews{
    text-align:center;
    display:inline-block;
    
}
#newsTitle {

}
.newsBy {
    display:inline-block;
}
.newsLink {
    float:right;
    width: 6rem;
    text-align: center;
    background-color: #2F4F4F; 
}
.newsLink a{
    font-family: 'Play', sans-serif;
    color: #fff;
    text-decoration: none;
}

Upvotes: 0

Views: 2207

Answers (3)

Sagiv b.g
Sagiv b.g

Reputation: 31024

You got a typo in: 

.metaNews{
    text-align:center;
    display:inline-blockl

}

inline-blockl has extra l instead of a ;

.metaNews{
    text-align:center;
    display:inline-block;

}

jsfiddle (you should stretch the result window a bit to let it have enough width to see the results you wanted )

Upvotes: 1

Anas Barghoud
Anas Barghoud

Reputation: 1

The problem is that you are using display: inline-block, Without use width, display: inline-block does not work without using setting width,

So I added these properties: width: 50% to #newsImg selector and to .metaNews,

Here a running example in jsFiddle

Upvotes: 0

Geethu Jose
Geethu Jose

Reputation: 1993

Wrap the divs <div id="newsImg"> , <div class="metaNews"> using a div and set its display as flex.

#newsBox {
  width: 85%;
  margin: 0.5rem auto;
  padding: 0.5rem;
  border: #333 solid 1px;
  background-color: #c2c2c2;
}

#newsImgWrapper {
  display: flex;
}

#newsImg {
  display: inline-block;
}

#newsImg>img {
  max-width: 120px;
  max-height: 120px;
  padding-right: 20px;
  vertical-align: middle;
}

.metaNews {
  text-align: center;
  display: inline-block;
}

#newsTitle h3{ margin:0;}

.newsBy {
  display: inline-block;
}

.newsLink {
  float: right;
  width: 6rem;
  text-align: center;
  background-color: #2F4F4F;
}

.newsLink a {
  font-family: 'Play', sans-serif;
  color: #fff;
  text-decoration: none;
}
<div id="newsBox">
  <div id="newsImgWrapper">
    <div id="newsImg">
      <img src="images/news1.jpg" alt="news1">
    </div>

    <div class="metaNews">
      <div id="newsTitle">
        <h3>Text Text Text Text Text Text Text Text .</h3>
      </div>

      <div class="newsBrief">
        <p>Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text </p>
      </div>
    </div>
  </div>
  <div style="clear:both"></div>

  <div class="newsBy">
    <span class="metaDate">Posted on 10/5/2017</span>
    <span class="metaBy">By Li</span>
  </div>

  <div class="newsLink">
    <a href="news1.html">View &rarr;</a>
  </div>
  <div style="clear:both"></div>

</div>

Upvotes: 0

Related Questions