html - Why are the two columns of content colliding, even if they are block elements? -


i'm building simple responsive layout , althought looks it's working @ moment, when screen shrinks columns, despite being block elements, collide , cannot figure out why, see error?

my html:

    *{    	    margin: 0;  	    padding: 0;        }      html{    	    width: 100%;  	    height: 100%;        }      body{    	    height: 100%;  	    width:100%;        }      .title{    	    font-family: sans-serif;  	    font-size: 3em;  	    margin: 2% 0% 2% 1%;        }      .col-1{    	    width: 55%;  	    height: 100%;  	    float: left;        }      .col-2{    	    width: 45%;  	    height: 100%;  	    float: left;        }      .columntitle{    	    font-size: 1.9em;  	    font-family: sans-serif;  	    margin: 4% 0% 4% 4%;;        }      .paragraph{    	    font-size: 1.5em;  	    margin: 2%;  	    text-align: justify;  	    line-height: 1.3em;        }      /*/////////////////////////////////////////////      //			    media queries				 //      /////////////////////////////////////////////*/        @media screen , (max-width: 500px){    	    .col-1{    		    display: block;  		    width: 100%;      	    }  	    .col-2{    		    display: block;  		    width: 100%;  		  	    }        }
    <!doctype html>      <html>        <head>    	    <meta charset="utf-8">  	    <link rel="stylesheet" type="text/css" href="index.css">        </head>      <body>    	    <header>    		    <h1 class="title">this title</h1>    	    </header>      	    <section class="col-1">    		    <h1 class="columntitle">this first column</h1>  		    <p class="paragraph">pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. donec eu libero sit amet quam egestas semper. aenean ultricies mi vitae est. mauris placerat eleifend leo. quisque sit amet est et sapien ullamcorper pharetra. vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. donec non enim in turpis pulvinar facilisis. ut felis. praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. aliquam erat volutpat. nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>    	    </section>  	    <section class="col-2">    		    <h1 class="columntitle">this second column</h1>  		    <p class="paragraph">pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. donec eu libero sit amet quam egestas semper. aenean ultricies mi vitae est. mauris placerat eleifend leo. quisque sit amet est et sapien ullamcorper pharetra. vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. donec non enim in turpis pulvinar facilisis. ut felis. praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. aliquam erat volutpat. nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>    	    </section>	        </body>        </html>

try instead.

first add auto-clear on css.

.auto-clear:before, .auto-clear:after { content:" "; display:table; } .auto-clear:after { clear:both; }

then add main container float columns. clears float elements. not @ explanation, try it, lmao.

--

edit:

the problem on html structure because did not clear float elements.

--

    <div class="auto-clear">          <section class="col-1">              <h1 class="columntitle">this first column</h1>             <p class="paragraph">pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. donec eu libero sit amet quam egestas semper. aenean ultricies mi vitae est. mauris placerat eleifend leo. quisque sit amet est et sapien ullamcorper pharetra. vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. donec non enim in turpis pulvinar facilisis. ut felis. praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. aliquam erat volutpat. nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>          </section>         <section class="col-2">              <h1 class="columntitle">this second column</h1>             <p class="paragraph">pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. donec eu libero sit amet quam egestas semper. aenean ultricies mi vitae est. mauris placerat eleifend leo. quisque sit amet est et sapien ullamcorper pharetra. vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. donec non enim in turpis pulvinar facilisis. ut felis. praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. aliquam erat volutpat. nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>          </section>       </div>

solution 2:

add class on css file.

.clear { clear:both; }

then put 2 floated elements in container. on bottom of last floated element, add empty div has class of clear. same, clears floated element. in messy way. you're creating unnecessary div. best way first solution gave you. (for me @ least)

<div>     <section class="col-1">          <h1 class="columntitle">this first column</h1>         <p class="paragraph">pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. donec eu libero sit amet quam egestas semper. aenean ultricies mi vitae est. mauris placerat eleifend leo. quisque sit amet est et sapien ullamcorper pharetra. vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. donec non enim in turpis pulvinar facilisis. ut felis. praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. aliquam erat volutpat. nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>      </section>     <section class="col-2">          <h1 class="columntitle">this second column</h1>         <p class="paragraph">pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. donec eu libero sit amet quam egestas semper. aenean ultricies mi vitae est. mauris placerat eleifend leo. quisque sit amet est et sapien ullamcorper pharetra. vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. donec non enim in turpis pulvinar facilisis. ut felis. praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. aliquam erat volutpat. nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>     </section>     <div class="clear"></div> </div>

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 - Bypass Geo Redirect for specific directories -

i'm trying bypass redirect specific url within site. wondering if might able help. the code below code use, original urls replaces example.com i'd able access http://example.com/admin without redirect occuring. is there way this, , there way using own ip? function country_geo_redirect() { $country = getenv('http_geoip_country_code'); if ($country == "us" ) { wp_redirect("http://usa.example.com/"); exit; } else if ($country == "gb" ) { wp_redirect("http://uk.example.com/"); exit; } } add_action('init', 'country_geo_redirect'); you can bypass redirection code if server found ip address. if ip address == <my ip address> ' nothing here else country_georedirect() end if
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