CODEWITHSUNDEEP
css
Mark Boulder
Mark Boulder

Reputation: 14287

Making floated text break off onto the next line

How do I make this:

enter image description here

break off onto the next line like this?

enter image description here

http://jsfiddle.net/frank_o/06ewqwun/

HTML:

<div class="test">
  <h1>Test test test test</h1>

  <!-- This div has to be here -->

  <div>
    <p>Another test another test</p>
  </div>
</div>

CSS:

.test { border: 1px solid black; width: 300px; }
h1 { float: left; border: 1px solid #ccc; }

/* Has no effect */

p { word-wrap: break-word; }

Upvotes: 0

Views: 90

Answers (3)

cdog
cdog

Reputation: 2084

If you don't want to make the elements inline you can try to reset the margins.

Result

HTML:

<div class="box">
  <h1>Lorem ipsum.</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas, voluptates.</p>
</div>

CSS:

.box {
  border: 1px solid #ddd;
  width: 320px;
}

.box h1 {
  float: left;
  margin-bottom: -6px;
}

.box p {
  margin-top: 35px;
}

See live example here: http://jsfiddle.net/cdog/xaL7sarm/.

Upvotes: 1

reuelab
reuelab

Reputation: 1986

If you still want to stick with that HTML structure, you could try this:

You can use and play with CSS line-height property on your container div

like:

.YOURDIVCLASS{
    display: inline;
    line-height: 1.5em;
}

You might also want to reset the h1 tag's default padding and margin.

h1{
  margin: 0;
  padding: 0;
}

HERE'S A SAMPLE IN jsFIDDLE

Upvotes: 1

GreyRoofPigeon
GreyRoofPigeon

Reputation: 18123

You'll have to put the h1 inside your div:

<div class="test">
  <div>
    <h1>Test test test test</h1>
      <p>Another test another test, and a bit more test</p>
  </div>
</div>

Check the updated Fiddle

Upvotes: 0

Related Questions