Home PHP C# C++ Android Java Javascript Python IOS SQL HTML Categories

div filling parent and center children

/* position */
#wrapper, #list, #list div { flex-grow: 1; }

/* fixed size */
#container { height: 300px; }

/* display purpose */
  border : 1px black solid;
  margin: 2px;
  color: #fff;
  display: flex;
  flex-direction: column;

#container        { background-color : #999; }
#header, #wrapper { background-color : #666; }
#footer, #list    { background-color : #444; }
#list div         { background-color : #222; }


Not sure if this is what you want.

EDIT Sorry.

/* position */
#wrapper { height: 91%; }
#list { height: 90%; }
#list div { margin-bottom: 9.9%; }

This uses the percentage, which I'm not sure whether ie8 supports or not, and that what you mean by "divs inside must keep their side", so I assume you want the height to be untouched for #list divs.

If that is not your case, then go with

#list div { height: 31.5%; }

EDT 2 This is another try.

Try 1

/* position */
#container *, #wrapper * { max-height: 90.5%; }
#list { padding:9.6% 0; }

This isn't a fully automated attempt, such that you have to change the padding or the height in case they are differed.

Try 2: Use many tables.

Short answer here, but since I added too much things, such as remodifying the layout (adding a layer of div for nesting tables), and a lot of display:tables, the layout is a bit broken (such that the margins are uneven). This is the most I can do.

Categories : HTML

Related to : div filling parent and center children
Having a Parent-Children class hierarchy, how can I hold various actual children in a single "Parent"-typed variable?
If those objects don't need to live very long, then you could simply do: switch(arg[1]) { case CHILD1: { Child1 c1; c1.start(); break; } case CHILD2: { Child2 c2; c2.start(); break; } case CHILD3: { Child3 c3; c3.start(); break; } } On the other hand, if you need to keep

Categories : C++
Pipes between parent and two children in C
It's bad news to modify a file descriptor that is associated with an open stream. I would account it highly likely to cause you trouble, and there is, moreover, no need to do that here. The parent should instead use fdopen() to open new streams on top of its ends of the pipes, and conduct I/O with its children via those instead of via the standard streams. In addition to being safer, that leave

Categories : C
Force parent div to adjust to its children size in css
demo - add position:absolute for i and for parent position:relative i.glyphicon { position:absolute; right:6px; top:3px; color: #fff; }

Categories : HTML
lQuery: Select children by Index() including parent
You can simply combine the selector with a comma , : $("#parent [attribute]:eq(4), #parent[attribute]:eq(4)"); andSelf() method will only select #parent as a selector not #parent[attribute]:eq(4) You can do this way too: $("#parent [attribute]:eq(4)").add("#parent[attribute]:eq(4)"); Look thorough the api of add and andSelf method.

Categories : Jquery
SQL Query: Group Concat Children Elements With Parent
you can do a left join to the same table to produce the required result (assuming that not every post would have attachment) select p.Id,group_concat(c.guid separator ', ') guids from wap_posts p left join wap_posts c on (c.post_parent =!2/f7522/1/0

Categories : Mysql
Recently Add
HTML Agility Pack recording errors on Optional closing tags
strange padding in responsive image
Does web2py ajax() function really work with onchange event of ?
How to align three items in same row with Bootstrap 3?
Yielding Templates through Layout with Sinatra: Yields stringified version of my html
How to keep collapsed Bootstrap columns centered
How to apply css on one html file only
radio button is showing with extra outline in IE and firefox
Is there a way to schedule html changes?
How to stop an email address going dark blue and being clickable in Outlook email client/ IPad mail client
Why does an empty span tag in a floated parent render on a new line?
CSS align 2 divs side by side
CSS | Place div after


Center a Div within a Div, CSS
Fatty border under the text
Maintaining responsiveness with div
Paragraph covers div brought through transition
Having trouble with changing default width
Internet Explorer pseudo elements with background image
wrap text inside DIV with CSS?
background not showing up (file path double checked)
Can url img in css have source path to a folder in my computer
HTML CSS Image Allignment
textarea fill unused vertical space after other elements - in overlay
Navigate bar overlay menu items in responsive design
Two rows in a menu with css and bootstrap
Setting overflow: scroll or auto pushes div to top instead of staying put
Browser rendering differences at pixel level (width, height, ...) of DOM elements
Alternative to "-webkit-backface-visibility:hidden" to stop flicker
How to replace " ' " the "'" HTML character with Stringreplace
© Copyright 2017 Publishing Limited. All rights reserved.