css - Why the text or images are not placed behind a floating element? -


why text or images not placed behind floating element?

on link:http://codepen.io/anon/pen/lvwmvp, can see example. "blue" div placed behind "transp" div. thing text (or image) not placed behind "transp" div also. , please notice p tag in "blue" div.

so question is: why happen? why text not placed behind "transp" div parent?

i have been looking answer. couldnt find explaining situation.

could please me? :)

this code find on codepen.io: html

<div id="transp"> </div>  <div id="blue">     <p>lorem ipsum dolor sit amet, consectetur adipiscing elit. aliquam id dolor scelerisque, pellentesque arcu sed, vehicula enim. class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. duis felis eros, accumsan eget erat non, vulputate blandit urna. sed consequat nibh vitae lectus tempor viverra. quisque condimentum, elit id pretium accumsan, quam nunc faucibus risus, id tincidunt massa est in turpis. </p> </div>

css:

#transp{     border: 1px solid #000;     height:200px;     width:200px;     float:left; }  #blue{     background-color:#00ffff;     height:200px;     width:600px; }

this see: floating issue

the point of floating place object beside paragraph of text or other inline content, such content flow around it. spec:

a float box shifted left or right on current line. interesting characteristic of float (or "floated" or "floating" box) content may flow along side (or prohibited doing 'clear' property). content flows down right side of left-floated box , down left side of right-floated box.

having text ignore float defeat purpose of floating altogether.

the float removed normal flow, why "blue" div positioned though floating element not there. result text flows vertically past floating element start directly underneath, rather leaving gap there. can see if make div narrower , taller (or remove height declaration).


Comments

Post a Comment

Popular posts from this blog

Magento/PHP - Get phones on all members in a customer group -

i working on custom magento extension. working around adminhtml part , i've created custom form there. here form code: <?php class vivasindustries_smsnotification_block_adminhtml_sms_sendmass_edit_form extends mage_adminhtml_block_widget_form { public function _preparelayout() { $extensionpath = mage::getmoduledir('js', 'vivasindustries_smsnotification'); $head = $this->getlayout()->getblock('head'); $head->addjs('jquery.js'); $head->addjs('vivas.js'); return parent::_preparelayout(); } protected function _prepareform() { $form = new varien_data_form(array( 'id' => 'edit_form', 'action' => $this->geturl('*/*/save', array('id' => $this->getrequest()->get
Read more

php - .htaccess mod_rewrite for dynamic url which has domain names -

i want convert url ex:( example.com/link.php?url=facebook.com ) ( example.com/facebook.com.php ) how can using .htaccess. or there other process make job easier ? i tried adding script .htaccess file options +followsymlinks rewriteengine on rewriterule url-(.*)\.htm$ link.php?url=$1 but converting url adding "url-" ( example.com/url-facebook.com.php ) i want remove "url-" , want make ( example.com/facebook.com.php ) rewriteengine on rewritecond %{the_request} ^get.*link\.php\?url\= [nc] rewritecond %{request_uri} !/system/.* [nc] rewriterule (.*?)link\.php\?url\=/*(.*) /$1$2 [r=301,ne,l] not sure how above work edit of used use remove index.php url
Read more

Website Login Issue developed in magento -

i have website developed using magento . able login. right now, login failed. infact operations interacts user table failing. need know issue. how figure out? first clear try clear log file second make sure have not upgraded magento and 3rd make sure db accessible in magento -harry p
Read more