CODEWITHSUNDEEP
htmlcss
GoshoPepoto
GoshoPepoto

Reputation: 13

CSS blocks wrong positioning

EDIT: I just fix it, I had a "line-height: 1.5em;" line in the body{}. Sorry for taking your take, thanks everyone who tryed to help me.

I'm building a form for news system on my site. I'm only using HTML/CSS, will add php later. This is my final result.
The problem are the bottom text boxes. They're 3 (posted by/nickname/date). Their position should be higher, and you can see that here. It's like only the half text is in the box.
Here are my codes: 

<div class="news">
  <img src="img/Facebook.png" class="news-picture" alt="test" />
  <a href="#" class="news-title">Stanislav Ivanov on "How to escape from bronze"</a>
  <span class="postedby">Posted by &nbsp </span>
  <span class="nickname"><a href="#">Sunata</a> &nbsp </span>
  <span class="date">October 6, 2015</span>
</div>

.news-picture {
  width: 45px;
  height: 45px;
  margin: 0px 12px 0px 0px;
  border-radius: 3px;
  float: left;
}
.news-title:link,
:visited {
  color: #0084B4;
  font-weight: bold;
  font-size: 16px;
  text-decoration: none;
  float: left;
  display: block;
  margin-top: 0px;
}
.news {
  font-family: Lato, sans-serif;
  height: 45px;
  clear: both;
  margin-bottom: 10px;
}
.news span {
  display: block;
  max-height: 14px;
  float: left;
  vertical-align: top;
}
.news .postedby {
  font-size: 14px;
  color: grey;
}
.news .nickname {
  color: #0084B4;
  font-size: 14px;
}
.news .date {
  font-size: 14px;
  color: black;
}

Upvotes: 0

Views: 42

Answers (3)

Daan
Daan

Reputation: 2799

The problem is caused because the text probably has a default line-height.

Try giving a custom line-height for example: line-height:14px. (Play around with this number a bit to have it how you'd like to have it)

Upvotes: 1

Mukul Kant
Mukul Kant

Reputation: 7122

Its because of float, your all span is float:left and not clear. You need to clear that add remove all for span-

css -

.news-picture {
  width: 45px;
  height: 45px;
  margin: 0px 12px 0px 0px;
  border-radius: 3px;
  float: left;
}
.news-title:link,
:visited {
  color: #0084B4;
  font-weight: bold;
  font-size: 16px;
  text-decoration: none;
  float: left;
  display: block;
  margin-top: 0px;
}
.news {
  font-family: Lato, sans-serif;
  height: 45px;
  clear: both;
  margin-bottom: 10px;
}
/*.news span {
  display: block;
  max-height: 14px;
  float: left;
  vertical-align: top;
}*/
.news .postedby {
  font-size: 14px;
  color: grey;
}
.news .nickname {
  color: #0084B4;
  font-size: 14px;
}
.news .date {
  font-size: 14px;
  color: black;
}
.clearfix:after{
    content: '';
    display: block;
    clear: both;
}

HTML- 

<div class="news">
  <img src="img/Facebook.png" class="news-picture" alt="test" />
  <a href="#" class="news-title">Stanislav Ivanov on "How to escape from bronze"</a>
  <div class="clearfix">
      <span class="postedby">Posted by &nbsp </span>
      <span class="nickname"><a href="#">Sunata</a> &nbsp </span>
      <span class="date">October 6, 2015</span>
  </div>
</div>

I hope it will helps you.

Upvotes: 0

Lalji Tadhani
Lalji Tadhani

Reputation: 14159

You Add max-height Limit 

.news span {
  display: block;
  **max-height: 14px;**
  float: left;
  vertical-align: top;
}

Upvotes: 0

Related Questions