Text boxes in printed output

I’ll preface this by saying that I am completely self-taught when it comes to HTML and CSS. Pretty much everything I know I learned by using Flare and having to figure out new stuff on the fly. I’ve never taken a class on any type of code.

Knowing this, please take mercy on me if the below is something I should have known.

I have been tasked with creating a print document that includes text boxes – something I’ve never done before in Flare. In Word, I’ve done them since DOS practically, but never in Flare. I read the Flare online help topics on text boxes and realized that they were *div tags* (cue scary music here). I say that because div tags and I have a dark and unpleasant history. Usually, when I need them, I find someone to help me for the sake of saving time – and when I can, I avoid them.  There’s no more avoiding for me.

Essentially, the first page of the doc includes H1 – H3 and a text box that is supposed to appear on the right side, the top border lined up with the top border of the H2. No problem, right?

create my topic with all the content and then I put my cursor where I want my text box (approximately. You can always move it later). During the creation of the text box, I set the height and width, a 1px black border, and 5px padding all around. I also set the text box to float right since I want the box to appear on the right edge of the page.

Here’s where the problem comes in. See what happens when I generate a preview of the page:

Obviously, I have a problem with my headers not obeying the margins. It is right about here + 5 hours that I learn the difference between display:block and display:inline in CSS. I had no idea until today (thank you Alvaro!). If you’d like to learn more about the display element, go here. There’s a great description and several examples to help you.

Anyway, I realized that an H2 tag is display:block, which means that the style of the line will extend all the way across the page. Changing the setting to display:inline will not solve the problem (I tried – to save you some time!). So, to defeat this, I set the width of the H3 tag to 65%. In the CSS preview window, it looks great – not so much in actuality. I then created a div tag and a class called “partial” and set the width to 65%.  Code simply looks like this:

div.partial
{
width: 65%;
}

I then surrounded each H3 with this div tag and, poof, it works! The code looks like this:

<div>
<h3>Here is a Header 3</h3>
</div>

And the actual page looks like this:

If you are having problems with this….save yourself some time (and a LOT of frustration) and do something like this. You can thank me later!

Do you have another way to handle this? If so, please share.