CODEWITHSUNDEEP
htmlcss
Thomas
Thomas

Reputation: 21

How do I put this text below the other text?

I'm trying to put this paragraph below the heading (h4). Both are floated left, and the text is aligned left. However, it still ends up being centered. We've (our team) done tests, and the tag is NOT the problem.

<center><div id="content">
                                                                <!-- <p>hi.</p> -->
  <div class="postStarter">

  </div>
  <div class="post">
    <img src="person.png" class="avatar-entry"><a href="profiles/2-thomas"><h4 class="postAuthor">Ranger Thomas A.</h4></a>
    <br />
    <br />
      <p class="postText">UNIX-BASED.</p>
  </div>
  <div class="post">
    <img src="person.png" class="avatar-entry"><a href="profiles/2-thomas"><h4 class="postAuthor">Ranger Thomas A.</h4></a>
    <br />
    <br />
      <p class="postText">Living the Mac life.</p>
  </div>
</div>

Here is the CSS:

.postStarter {
  background: #FFF;
  border-bottom: 1px solid #E0E0E0;
  width: 500px;
  height: 100px;
}

.post {
 background: #FFF;
 border-bottom: 1px solid #E0E0E0;
 width: 500px;
 height: 100px;
}

.postText {
  float: left;
  text-align: left;
}

#content {
  width: 1000px;
  height: 900px;
  background: #FFF;
  border-left: 1px solid #E0E0E0;
  border-right: 1px solid #E0E0E0;
  border-top: .5px solid #FFF;
  border-bottom: none;
}

Any ideas on how to fix this? http://i.redsroom.info/npPO.

Upvotes: 1

Views: 1597

Answers (2)

Henry Quekett
Henry Quekett

Reputation: 429

Its difficult to tell without seeing your document as not all the classes quoted in you html can be seen in your CSS snippet and your doc type etc.

Perhaps see what happens if you remove the float left from .postText as you are not clearing after this which may be causing some undue affects.

It would be easier to see the problem with a JS Bin

Upvotes: 0

Simone Pessotto
Simone Pessotto

Reputation: 1581

Try to put a "clear div" before che "p" tag, like this:

<div class="post">
<img src="person.png" class="avatar-entry"><a href="profiles/2-thomas"><h4 class="postAuthor">Ranger Thomas A.</h4></a>
<br />

<div class="clear"></div>
  <p class="postText">UNIX-BASED.</p>

Upvotes: 2

Related Questions