Jump to content
  • 0

Обтекание блоков

ЛАСТЫЧ

Asked by ЛАСТЫЧ,

 Share

Question

5 answers to this question

Recommended Posts

  • 0
ЛАСТЫЧ Explorer

ЛАСТЫЧ

Posted
  • Author
Posted

Текст обтекает только левый блок, а правые уходят вниз за текст.

Что не так?

	<head>
		<title>Тест</title>
		<meta http-equiv="content-type" content="text/html; charset=windows-1251" />
		<style type="text/css">
		#wrap {
			width:500px;
		}

		.first-left {
			float:left;
			width:100px;
			height:50px;
			background:#ccc;
			margin:10px 0;
			}

		.first-right {
			float:right;
			width:80px;
			height:50px;
			background:#ccc;
			margin:10px 0;
			}

		.second-right {
			float:right;
			width:120px;
			height:50px;
			background:#ccc;
			margin:10px 0;
			}

		.clear {
			clear:both;
			height:0;
		}
		</style>

	</head>

	<body>
		<div id="wrap">
			<div class="first-left"></div>
			<p><strong>1) Content here.</strong> column long long column very long 
			fill fill fill long text text column text silly very make long very fill 
			silly make make long make text fill very long text column silly silly very 
			column long very column filler fill long make filler long silly very long 
			silly silly silly long filler make column filler make silly long long fill very.</p>
			<p>very make make fill silly long long filler column long make silly silly column filler
			fill fill very filler text fill filler column make fill make text very make make very fill
			fill long make very filler column very long very filler silly very make
			filler silly make make column column </p>
			<p>fill long make long text very make long fill column make text very silly column filler
			silly text fill text filler filler filler make make make make text filler fill column
			filler make silly make text text fill make very filler column very </p>
			<p>column text long column make silly long text filler silly very very very long filler
			fill very fill silly very make make filler text filler text make silly text text long fill
			fill make text fill long text very silly long long filler filler fill silly long make 
			column make silly long column long make very </p>

			<div class="first-right"></div>
						<div class="clear"></div>
			<div class="second-right"></div>

		</div>
	</body>

Link to comment
Share on other sites
  • 0
SelenIT Explorer

SelenIT

Posted
Posted

Правые плавающие блоки нужно поднять в начало, к левому. И для .second-right добавить clear: right (чтобы они в одну строчку не слипались). А отдельный .clear в данном случае вообще не нужен.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to question listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy

  I accept