two div side by side and
div 1 width fit it's content
div 2 width fit it's content
<div style="display: block;" class="mainpanel-wrapper">
<div id="sidebar_panel" style="display: block;right:0;float:right;" >
content div 1 width fit content
</div>
<div id="sidebar_panel2" style="float:right;" >
content div 2 width fit content
</div>
</div>
Related
How do I align two divs such that one is to the extreme left and other is to the immediate right of center.
Note that its not in center. Its just sticked to center . Something like this
div |div
here | represents the center of the page
I tried giving width:50% but on page resize its not giving expected result and all divs are rearranging differently. I tried giving margin-left and right as well but same problem
<div class="help-bar-div">
<hr>
<div style="display:inline-block;">
<div style="display:inline-block;margin-left:0;width:50%; margin-right:0">
text1
</div>
<div style="display:inline-block;float:right; margin-left:-11px;">
text2
</div>
</div>
</div>
you can use display flex on the container and flex-grow to fill equal spaces
<div style="display:flex;">
<div style="flex-grow: 1;">
text1
</div>
<div style="flex-grow: 1;">
text2
</div>
</div>
How can I correctly format a bootstrap panel to not exceed the width of its parent div when the panel contents expand. I also want the panel to be responsive in that it shrinks and expands based on the browser window but I do not want overflow at the bottom of the page.
<div class="panel panel-info">
<div class="panel-heading"></div>
<div class="panel-body text-info">
//content that may expand or shrink
</div>
</div>
can you help me to fix this layout: http://imgur.com/a/kTMao
I'd like the grid will fill totally (hoizontally and vertically) its parent div without show me the outermost scrolbar(the window scollbar)
The only scrollbar that i'd like to see are the those of the grid
the page has a kendoSplitter in the middle
this is my markup
<body>
<img src="images/logo.png" />
<h1>Archivio documentale</h1>
<div id="horizontal" style="height: 100%; width: 100%">
<div id="left-pane">
<div class="pane-content" style="width:390px;">
<!-- LEFT SIDE CONTENT initial fixed width -->
</div>
</div>
<div id="main-pane">
<div class="pane-content">
<div id="mainGrid"></div>
</div>
</div>
</div>
</body>
You could use Viewports. There is vh (View Height) and vw (View Width). vh takes the height of the window dinamically, and vw takes the width of the window also dinamically.
Therefore, by applying the following:
div{
height: 100vh;
width: 100vw;
}
Your grid would always fit 100% no matter what.
Example: http://codepen.io/diego-fortes/pen/oYKpqK
I hope it helps :)
<body>
<div id="outerwindow" style= "position:absolute ;width:100%;height:100%" >
<div>
<canvas id="g_Painter" style="position:relative;width:100%;height:80%"></canvas>
</div>
<div id="g_Toolbar" >
</div>
div id="innerdiv" >
</div>
</div>
</body >
Here all div contains some components..Only outer layout I have shown.
My requirement is the canvas div should occupy the 80% height of parent div "outerwindow" .Problem I am facing is irrespective of whatever width and height I specify to canvas, height is only almost half of the outerwindow.But width is 100% of the outerwindow.Kindly help.
change g_Painter position style to absolute
<body>
<div id="outerwindow" style= "position:absolute;width:100%;height:100%;" >
<div>
<canvas id="g_Painter" style="position:absolute;width:100%;height:80%;"></canvas></div>
<div id="g_Toolbar"></div>
<div id="innerdiv"></div>
</div>
</body>
I have a container div which has text within it that I want centered. I want to also insert a div into the container which floats to the right, like this:
<div id="container" style="text-align:center">
Text
<div id="child" style="float:right"></div>
</div>
Unfortunately what happens is that the text is no longer centered with respect to the container, but is instead shifted to the left by the width of the child.
Does anyone know how to get the text to center whilst keeping the div contained to the right?
Something like this...
<div style='position:relative;'>
my centered text
<div style='position:absolute;right:0;top:0'>
my right div
</div>
</div>
You can obviously throw the inline styles into CSS.
Posibly this?? Creating 3 equal parts. left middle and right??
<div id="container">
<div id="child1" style="float:right width: 30px;"></div>
<div id="child2" style="float:right width: 30px; text-align:center;">TEXT</div>
<div id="child3" style="float:right width: 30px;"></div>
</div>