Floating text creation breaks to the next line
How to do it:
break off to the next line like this:
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; }
source to share
If you still want to stick with this HTML structure, you can try this:
You can use and play with CSS property line-height
on your div container
as:
.YOURDIVCLASS{
display: inline;
line-height: 1.5em;
}
You might also want to reset the default markup and bullet for the h1 tag.
h1{
margin: 0;
padding: 0;
}
source to share
If you don't want to create items inline
, you can try resetting the fields.
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 a live example here: http://jsfiddle.net/cdog/xaL7sarm/ .
source to share
If you add more words to a paragraph, they will start to appear below the heading at some point. See the following screenshot:
As soon as the text gets higher than the heading plus the lower limit, it will start flowing below the heading. A workaround is to remove the bottom edge of the heading and adjust the top edge of the paragraph:
h1 {
float: left;
border: 1px solid #ccc;
margin-bottom: 0;
}
p {
word-wrap: break-word;
margin-top: 2.5em;
}
source to share
You will need to put h1
in 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 script
source to share