html - Pure CSS grids do not float next to each other -

-

i trying build website using pure css layout.

pure css

the div's 1/2 width not float next each other when try , use basic 2 column layout. can see width 50%.

is expected behavior or should explicitly float div's

i have referenced both of following style sheets.

<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.2.1/base-min.css"> <link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.2.1/pure-min.css">

<div class="pure-g">         <div class="pure-u-1">             <div class="pure-u-1-2">                  lorem ipsum dolor amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod                 tincidunt ut laoreet dolore magna aliquam erat volutpat. ut wisi enim ad minim veniam,                 quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo                 consequat. duis autem vel eum iriure dolor in hendrerit in vulputate velit esse                 molestie consequat, vel illum dolore eu feugiat nulla facilisis @ vero eros et                 accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue                 duis dolore te feugait nulla facilisi.             </div>             <div class="pure-u-1-2">                 lorem ipsum dolor amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod                 tincidunt ut laoreet dolore magna aliquam erat volutpat. ut wisi enim ad minim veniam,                 quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo                 consequat. duis autem vel eum iriure dolor in hendrerit in vulputate velit esse                 molestie consequat, vel illum dolore eu feugiat nulla facilisis @ vero eros et                 accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue                 duis dolore te feugait nulla facilisi.             </div>         </div>    </div>

from pure.css website:

the constraints pure grids "units" children of "grid". in other words, if have element pure-u-* class name, needs within parent element pure-g or pure-g-r class name.

so believe shouldn't nest columns under additional column. if remove parent column, float correctly:

<div class="pure-g">             <div class="pure-u-1-2">                  lorem ipsum dolor amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod                 tincidunt ut laoreet dolore magna aliquam erat volutpat. ut wisi enim ad minim veniam,                 quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo                 consequat. duis autem vel eum iriure dolor in hendrerit in vulputate velit esse                 molestie consequat, vel illum dolore eu feugiat nulla facilisis @ vero eros et                 accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue                 duis dolore te feugait nulla facilisi.             </div>             <div class="pure-u-1-2">                 lorem ipsum dolor amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod                 tincidunt ut laoreet dolore magna aliquam erat volutpat. ut wisi enim ad minim veniam,                 quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo                 consequat. duis autem vel eum iriure dolor in hendrerit in vulputate velit esse                 molestie consequat, vel illum dolore eu feugiat nulla facilisis @ vero eros et                 accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue                 duis dolore te feugait nulla facilisi.             </div>    </div>

or intention have 1 column sub-divided 2 columns? if so, think elegant solution (without explicitly overriding external file) calculate desired width of subdivided columns , set them accordingly. please clarify.


Comments

Post a Comment

Popular posts from this blog

html5 - What is breaking my page when printing? -

-
Image
i have questioner , don't know why when printing it's creating break before first question. live demo (link) i able resolve issue removing fieldset container had wrapped in.. having fieldset element causing of fields grouped together, , since not fit on first page, being pushed second page. removing fieldset element, able firefox print first 2 questions on page 1 identically chrome. it seems not new problem firefox , fieldset not playing nice found old bugzilla ticket 2008 has persisted , still being commented on in 2014 (link) if retaining fieldset important, found solution else came here (link) <script type='text/javascript'> $(window).bind('beforeprint', function(){ $('fieldset').each( function(item) { $(this).replacewith($('<div class="fieldset">' + this.innerhtml + '</div>')); } ) }); $(window).bind(
Read more

c# - must be a non-abstract type with a public parameterless constructor in redis -

-
when save object, got below error must non-abstract type public parameterless constructor in order use parameter 't' in generic type or method 'servicestack.redis.redisclient.store<t>(t) redisclass.getinstnace().store(msg); // error here redisclass.getinstnace().save(); as third party's class, can not edit how save object? could create wrapper around third party object call constructor, store wrapper? e.g. public class mywrapper { public thirdpartyobject thirdpartyinstance { get; set; } public mywrapper() { thirdpartyinstance = new thirdpartyobject("constructors"); } }
Read more

ajax - PHP/JSON Login script (Twitter style) not setting sessions -

-
i'm having trouble getting twitter style login work properly, reason gets stuck at session_register("useremail"); session_register("userpass"); and doesn't redirect after it. if enter wrong account data, works , appropriate error message pops up. this full code: <?php if(empty($_post['email']) || empty($_post['password'])) { die(msg(0,"all fields required")); } if(!(preg_match("/^[\.a-z0-9_\-\+]+[@][a-z0-9_\-]+([.][a-z0-9_\-]+)+[a-z]{1,4}$/", $_post['email']))) die(msg(0,"you haven't provided valid e-mail")); $host="localhost"; $username="root"; $password="x"; $db_name="x"; $tbl_name="x"; mysql_connect("$host", "$username", "$password")or die("cannot connect"); mysql_select_db("$db_name")or die("cannot select db"); $useremail=$_post['email']; $userpass=
Read more