Floating a div to right - works on PDF, Web looks bad

This Forum is for General Issues about Capture
Post Reply
sdcinvan
Propellus Maximus
Posts: 1260
Joined: Wed Aug 21, 2013 11:46 am
Location: Vancouver, Canada

Floating a div to right - works on PDF, Web looks bad

Post by sdcinvan »

Greetings all,

I wanted to flow text around some smaller images, so I added "style="float: right". This additional works out fairly well for print output, however, the web output looks ridiculous because in full screen, the image is WAYYY to right and far from the accompanying text. So far, the only solution I can think of is to float: left instead.

Code: Select all

<div class="figure" style="float: right; width: 120px;height: auto;">
            <p>
                <img src="Resources/Images/02_Workloads_hotspots_dash_indicator_02.png" />
            </p>
            <p class="figurecount" MadCap:autonum="<b>Figure 2 - </b>">Dashboard hotspot indication.</p>
        </div>
Is it possible to float: right without the image being thrown to the far right, away from the text? How do others handle this kind of situation?
Shawn in Vancouver, Canada
Main tools used: Flare 11.x, InDesign, Google Docs, Lectora, Captivate.
Report bugs: https://www.madcapsoftware.com/feedback/bugs.aspx ▪ Feature requests: https://www.madcapsoftware.com/feedback ... quest.aspx[/i]
doc_guy
Propellus Maximus
Posts: 1979
Joined: Tue Nov 28, 2006 11:18 am
Location: Crossroads of the West
Contact:

Re: Floating a div to right - works on PDF, Web looks bad

Post by doc_guy »

In your <body> tag in the CSS, add a max width. Despite the wideness of our computer monitors in modern times, long lines of text are very difficult for people to read and follow down to the next line. I typically set a max width to my body tag like this:

body {
max-width: 900px;
}

Here is an example from a client I'm currently working on:

Image
Last edited by doc_guy on Tue Jun 10, 2014 11:30 am, edited 2 times in total.
Reason: Edited to reduce image size so you could see the whole thing
Paul Pehrson
My Blog

Image
sdcinvan
Propellus Maximus
Posts: 1260
Joined: Wed Aug 21, 2013 11:46 am
Location: Vancouver, Canada

Re: Floating a div to right - works on PDF, Web looks bad

Post by sdcinvan »

Never mind just the drink... I owe you a dinner and a drink. :)

Thank you. Totally missed this one. Whoosh....

Instead of a pixel size, I used % instead. Very nice change! Thank you.

Code: Select all

body
{
	font-size: 11pt;
	font-family: 'Proxima Nova Rg', Calibri, sans-serif;
	font-variant: normal;
	font-style: normal;
	font-weight: 100;
	/* letter-spacing: 0.12%; */
	color: #404040;
	line-height: 1.2em;
	max-width: 70%;
}
Shawn in Vancouver, Canada
Main tools used: Flare 11.x, InDesign, Google Docs, Lectora, Captivate.
Report bugs: https://www.madcapsoftware.com/feedback/bugs.aspx ▪ Feature requests: https://www.madcapsoftware.com/feedback ... quest.aspx[/i]
doc_guy
Propellus Maximus
Posts: 1979
Joined: Tue Nov 28, 2006 11:18 am
Location: Crossroads of the West
Contact:

Re: Floating a div to right - works on PDF, Web looks bad

Post by doc_guy »

Awesome.

I still think you should use a pixel size, rather than a percentage, since if somebody views the help on a 28" screen (becoming more and more common), they are still going to have to turn their head to read the whole line, which decreases comprehension and retention of information.

Studies suggest that the typical line length should be 50-75 characters per line, so maybe the best solution would be to set the width in EMs like in this JS-fidle: http://jsfiddle.net/Z2T8K/

That way the width will adjust to the ideal size for the font size you use. The line can get wider if the text is larger, but it will stay at about 50 characters.
Paul Pehrson
My Blog

Image
smajors
Sr. Propeller Head
Posts: 180
Joined: Mon Oct 21, 2013 9:28 am
Location: Midwest United States

Re: Floating a div to right - works on PDF, Web looks bad

Post by smajors »

If you have responsive output enabled, do you still need to set a max-width in the body?
Technical Writer
Training & Development Team/Marketing Department
Post Reply