Div floating off the left margin of the viewable page area

Jump to solution
stuartriceaz
Community Member

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:

Screen Shot 2022-04-12 at 23.39.59.png

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!

Labels (1)
0 Likes
1 Solution
stuartriceaz
Community Member
Author

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.

View solution in original post

0 Likes