floatじゃないほうが？

こんばんは
よろしければ、回答の方宜しくお願いします。
このサイトの、使い方もあまりわかっていませんので
何か不手際があればご指摘してください。

〜悩み〜
画面幅を変わるたびに、右に来ている文字の幅が変わってしまいます。
文字の幅を固定することは可能ですか？
float以外で他のやり方がありますか？

〜条件〜
左に画像、右に文字固定？
サイトの幅を変更しても文字の幅が変わらない
（広がらないように・・？）

css
1/***float解除*****/
2.clearfix:after{
3	content:"";
4	display:block;
5	clear:both;
6}
7
8	
9/*****floatで左配置****/	
10.whip1{
11	float: left;
12	padding-right: 20px;/***空間を作る***/
13}
14

html
1<body>
2<div class="whip clearfix">
3<img src="file:///Macintosh%20HD/UsersDesktop/petitgateau/img/whip.jpg" width="400" height="300" class="whip1"/>
4<p class="whip2">生クリームは、重くて食べられない。そんな方が多いと思われます。当店では軽さ
5	・なめらかさの中にコクを入れ、あっさりと仕上げました。軽さ、キレをだすのに有効
6	な内地産低脂肪クリームとコクと風味のある北海道産高脂肪クリームをブレンドしまし
7	た。こだわりの究極の生クリームを楽しめます。</p>
8</div>

行動規範の内容に同意します

回答1件

ベストアンサー

的外れかもしれませんが、質問者さんが想像する動作は以下のような動作でしょうか？

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <title>タイトル</title>
6    <style type="text/css">
7        * {
8            margin: 0;
9            padding: 0;
10        }
11
12        .clearfix:after {
13            display: block;
14            clear: both;
15            content: '';
16        }
17
18        .whip {
19            width: 720px;
20        }
21
22        .whip1 {
23            float: left;
24            padding-right: 20px;
25        }
26
27        .whip2 {
28            overflow: auto;
29            width: 300px;
30        }
31    </style>
32</head>
33<body>
34<div class="whip clearfix">
35    <img src="https://placehold.jp/3d4070/ffffff/150x150.png?text=whip.jpg" width="400" height="300"
36         class="whip1 clearfix">
37    <p class="whip2">生クリームは、重くて食べられない。そんな方が多いと思われます。当店では軽さ
38        ・なめらかさの中にコクを入れ、あっさりと仕上げました。軽さ、キレをだすのに有効
39        な内地産低脂肪クリームとコクと風味のある北海道産高脂肪クリームをブレンドしまし
40        た。こだわりの究極の生クリームを楽しめます。</p>
41</div>
42</body>
43</html>