Div floating off the left margin of the viewable page area

[stuartriceaz]

I am using DIV tags to create a two-column layout. The underlying HTML is the following:

<div class="row">
<div class="column" style="width: 60%; float: left;">
<h2 style="color: #8c1d40; padding-bottom: 20px; line-height: 1.15;"><strong>You've wanted to become better at creative thinking. This course will take you there.</strong></h2>
<p style="padding-bottom: 1.15em; line-height: 1.8;">Welcome to CareerCatalyst's course on creative thinking. We designed this course to help everyone generate creative and innovative solutions. In this course, you'll find practical information and exercises that you can apply immediately to your work. You'll be able to enjoy this course on the go through our audio version, interact with fellow learners through discussions, and download supporting job aids and infographics. All of this is in a friendly accessible style that we hope you'll love.</p>
<p style="padding-bottom: 1.15em; line-height: 1.8;">You can return to this homepage at any time by clicking the <strong>Home</strong> menu item on the left. If it's hiding, you can click on the <span style="color: #8c1d40;"><strong>&equiv;</strong></span> symbol in the upper left-hand corner of your screen. You can also use the <strong>Module</strong> menu option to go to the course outline.</p>
</div>
<div class="column" style="width: 40%; float: right;"><img id="696436" src="https://asuce.instructure.com/courses/4691/files/696436/preview" alt="Creative Thinking Header Woman.png" width="60%" height="60%" data-api-endpoint="https://asuce.instructure.com/api/v1/courses/4691/files/696436" data-api-returntype="File" /></div>
</div>

Canvas in Chrome is rendering it this way:

Any suggestions to modify the HTML so that the page renders appropriately (e.g., all text falls within the viewable page)? Thank you in advance for your help!

[AdolphusGreenho]

This property is used for those elements that will float on left side.float:right; This property is used for those elements(div) that will float on right side.

[Ron_Bowman]

@stuartriceaz -

I am not sure what is going on with your course/chrome.  I copied that code and put it in a page.  It works for me.  I get the 2 columns and can increase/decrease the browser width and the output changes accordingly.

 

 I just noticed that the first picture is okay, but there is a very slight chop off on the second (not as bad as yours).  So I guess there is an issue with something causing the page content to not be fully displayed.

I played around with it a little, and you can add a padding-left: 5px term(or I can) to shift the text away from the left edge.

Of course that still doesn't explain why the regular version is being chopped.

[stuartriceaz · Accepted solution]

Thanks so much! It might be a Mac issue (something we have to test). I was able to adjust the left position by 50px to fix the issue. Will check in Windows to see if the problem is the same.