css - Formatting div height in grid -


i have link jsfiddle code

i trying format columns of grid have same height on both sides , other grids line correctly underneath. in example half column has more info (the heights different). want other half have same height. achievable?

thanks, code follows:

 <style>  #page {     width:95%;     text-align:center;     margin:auto; } #row {     height:100% } #header {     width:100%;     background-color: rgb(0, 143, 213);     height:50px; } #full {     width:99%;     margin:0.5%;     background-color:blue; } #half {     width:48%;     margin:0.5%;     padding:0.5%;     float:left;     background-color:yellow;     height: 50%; } #third {     width:32.333%;     float:left;     margin:0.5%;     background-color:blue; } #quarter {     width:23%;     margin:0.5%;     padding:0.5%;     float:left;     background-color:blue;     height:200px } </style>  <div id="page"> <div id="full">full</div> <div id="half">     <h1>half</h1>     <p>lorem ipsum dolor sit amet, consectetur adipiscing elit. aliquam sodales urna non odio egestas tempor. nunc vel vehicula ante. etiam bibendum iaculis libero, eget molestie nisl pharetra in. in semper consequat est, eu porta velit mollis nec. lorem ipsum dolor sit amet, consectetur adipiscing elit. aliquam sodales urna non odio egestas tempor. nunc vel vehicula ante. etiam bibendum iaculis libero, eget molestie nisl pharetra in. in semper consequat est, eu porta velit mollis nec. curabitur posuere enim eget turpis feugiat tempor. etiam ullamcorper lorem dapibus velit suscipit ultrices. proin in est sed erat facilisis pharetra.</div> <div id="half">     <h1>half</h1>     <p>lorem ipsum dolor sit amet, consectetur adipiscing elit. aliquam sodales urna non odio egestas tempor. nunc vel vehicula ante. etiam bibendum iaculis libero, eget molestie nisl pharetra in. in semper consequat est, eu porta velit mollis nec. lorem ipsum dolor sit amet, consectetur adipiscing elit. aliquam sodales urna non odio egestas tempor. nunc vel vehicula ante. etiam bibendum iaculis libero, eget molestie nisl pharetra in. in semper consequat est, eu porta velit mollis nec. curabitur posuere enim eget turpis feugiat tempor.</div> <div id="third">third</div> <div id="third">third</div> <div id="third">third</div> <div id="quarter">quarter</div> <div id="quarter">quarter</div> <div id="quarter">quarter</div> <div id="quarter">quarter</div> <div id="row">     <div id="half">half         <br>test</div>     <div id="quarter">quarter</div>     <div id="quarter">quarter</div> </div>

i'm not sure how affect intended styling overall, assigning fixed pixel height #half divs rather percentage force them same height.

#half {     width:48%;     margin:0.5%;     padding:0.5%;     float:left;     background-color:yellow;     height: 300px; }

update

i dug little deeper , found

"the percentage calculated respect height of generated box's containing block. if height of containing block not specified explicitly (i.e., depends on content height), , element not absolutely positioned, value computes 'auto'. percentage height on root element relative initial containing block." source

so basically, have 2 options.

1) suggested, assign fixed pixel height rather percentage.
2) assign fixed pixel height #page div. #half divs can use percentages, measue based off of #page div. example:

#page {     width:95%;     text-align:center;     margin:auto;     height:1000px } #half {     width:48%;     margin:0.5%;     padding:0.5%;     float:left;     background-color:yellow;     height: 50%; }

will result in #half divs being ~500px (not including margin , padding) 505px. 5 pixels being 0.5% padding calculated #page height.


Comments

Post a Comment

Popular posts from this blog

linux - xterm copying to CLIPBOARD using copy-selection causes automatic updating of CLIPBOARD upon mouse selection -

i've tried various ways coerce xterm (versions 285 , 292) copy selection clipboard clipboard whenever press ctrl-shift-c. promising way far has been, in ~/.xresources, put this: xterm*vt100.translations: #override \ ctrl shift <keypress> c: copy-selection(clipboard) \n\ ctrl shift <keypress> v: insert-selection(clipboard) ctrl-shift-v works perfectly, copying has nuance... if restart xterm, highlighting text puts things in primary clipboard; expected, proper, default behavior. if hit ctrl-shift-c, copies current selection clipboard clipboard. the bug, however, if highlight text after first time pressed ctrl-shift-c, you'll see highlighting copies both primary and clipboard. cannot figure out how stop xterm updating clipboard upon selection... , doesn't make sense me in first place. i said, @ specific point in time, copy selection clipboard... yet starts updating automatically upon selection after doing once... anyone have workaround...
Read more

c++ - qgraphicsview horizontal scrolling always has a vertical delta -

Image
i've subclassed qgraphicsview custom canvas used in cad application. i've reimplemented qgraphicsview::wheelevent check keyboard modifiers control key and, if control key pressed, zoom. i'm trying implement horizontal scroll when user holds shift , uses wheel. the problem i'm having horizontal scrolling always scrolls 0.279. not huge problem, hugely annoying , points else being wrong. so, here questions: is right way implement horizontal scrolling? if not, is? how eliminate delta of 0.279? thanks in advance. code , sample output below void myview::zoom(int delta) { double factor = pow(1.2, delta/abs(delta)); this->scale(factor, factor); } void myview::scrollhorizontal(int level) { qpointf center = maptoscene(viewport()->rect().center()); qdebug() << "center: " << center.x() << ", " << center.y(); centeron(qpointf(center.x() - level, center.y())); } void myview::wheelevent(qwheeleve...
Read more