Hi below is my css & html,i'm trying to align two div in a webpage with full height(100%) but is not working
.left_menu
{
height:100% !important;
width:30%;
border:1px solid grey;
float:left;
}
.right_menu
{
height:100% !important;
width:70%;
border:1px solid grey;
float:right;
}
and this is my html
<div class="left_menu">
</div>
<div class="right_menu">
</div>
this code is not taking full height,please help
set html,body min-height to 100%
Child occupies the height of parent so 100% height of parent will give 100% height to child
Considering that you div is direct child of html,body(if not then you need to maintain the height ratio with its parent)
html,body{
height:100%;
min-height:100%;
}
Just add display: inline-block; and it should solve the problem (did for me)
You set the height of the div to 100% but 100% of what? It's always 100% of the parent element but what is the parent element of the div set to? My bet is you don't have it set to anything and the browser has no way of calculating what 100% of nothing is.
I think that problem is in your border properties as they are adding extra space. So, I am not sure if this fit best your needs, but I would do something like this:
.left_menu
{
height:100% !important;
width:29%;
border:1px solid grey;
float:left;
}
.right_menu
{
height:100% !important;
width:69%;
border:1px solid grey;
float:left;
}
EDIT:
This might be better solution, because previous one will work different for devices with different width(for small device right_menu goes under left_menu). Here I just specify width for left_menu.
.left_menu
{
height:100% !important;
width:30%;
border:1px solid grey;
float:left;
}
.right_menu
{
height:100% !important;
border:1px solid grey;
}
Related
My html is :
<div id="outer">
<header><h1>The Header</h1></header>
<div id="contenttab">
<table>
blablabla
</table>
</div>
</div>
My CSS :
#outer{
height:70%;
width:900px;
left:50%;
margin:0 auto;
position:absolute;
top:20px;
z-index:1001;
transform:translate(-50%, 0);
-webkit-transform:translate(-50%, 0);
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
}
header{
background-color:#f6f7f9;
padding:10px;
font-size:15px !important;
font-weight:bold !important;
text-align:center;
width:100%;
}
#contenttab{
height:100%;
overflow-y:auto;
}
why my contenttab exceeded the height of #outer div ? how to fix that? I have try adding border-box css to parent div but not solve my problem . . .
I just tried out your posted html/css and your #contenttab div is exceeding the height of it's container because of your css rule of height: 100% on the #contenttab;
It's a lot easier to see/debug the issue using borders on your elements, add the following:
#outer {
border: 1px solid #000;
}
#contenttab {
height: 100%;
overflow-y: auto;
border: 1px solid #ffa500;
}
You are telling the #contenttab to have 100% full height of it's container, however then you are also adding additional content(the header element) which causes the internal elements to have more than 100% height than it's container can hold.
Either change the height rule on the #contenttab to auto or less than 100%. Or add css rule overflow: hidden(or auto) to your #outer css rule.
I am trying to arrange 3 divs side by using float:left, there is fixed height for two div's child1 and child3, but there is no height for child2, i need the child2 div height as the same height of the container div.
<div id="container">
<div id="child1">Child1</div>
<div id="child2">Child2</div>
<div id="child3">Child3</div>
<div>
#container
{
margin-left: 3px;
padding: 10px 0px;
position: relative;
display: block;
width: 500px;
background:yellow;
overflow:hidden;
}
#child1
{
float:left;
width:100px;
height:300px;
background:green;
}
#child2
{
float:left;
width:100px;
height:auto;
background:cyan;
}
#child3
{
float:left;
width:100px;
height:400px;
background:red;
}
here is the fiddle: http://jsfiddle.net/2ksxL/2/
You can change the #container {display: flex;}, but that does not have awesome support in IE (http://caniuse.com/flexbox). If you need more support you will have to come up with a jQuery solution that can find the height of the container and give it to #child2.
Since you haven't define any height for container, the container height is going to depend on the max height that's been defined to the #childX. In this case, #child3. So what you can do is compare the height of both #chidl1 and #child3 and set the height of #child2 to the max one via this little jQuery.
var highestCol = Math.max($('#child1').height(),$('#child3').height());
$('#child2').height(highestCol);
FIDDLE
Please refer below code
<div id="root">
<div id="child1">xxxx</div>
<div id="child2">yyyy</div>
</div>
css :
#root
{
width:100%
margin:0 auto;
}
#root div
{
width: 50%;
float:left;
border: 1px solid red;
}
fiddle :
http://jsfiddle.net/33Fzu/133/
i knew we can use"pixel" to align the div center to the page. but i want to do it through percentage width concept.
how can i align the div through percentage width concept that needs to be work in IE8,IE9 and chorme browser in all kind of resolutions.
if i set root width is 80% or 90% then for particular resolution machine the div's are centered but other resolutions its not working.
how can i set width in percentage to align the div in center for all kind of resolutions
Thanks,
You need to change the box-sizing to border-box to include the border inside the element's width:
#root div {
...
-moz-box-sizing: border-box;
box-sizing: border-box;
}
JSFiddle demo.
The -moz--prefixed version is for Firefox, as Firefox does not support the default box-sizing property. This does work on IE8, however.
Try this fiddle link:
http://jsfiddle.net/neharikapadala/33Fzu/155/
#root
{
width:60%;
margin:0 auto;
padding-left:20%;
padding-right:20%;
}
#child1
{
width:50%;
float:left;
text-align:center;
background-color:red
}
#child2
{
width:50%;
float:left;
text-align:center;
background-color:green
}
You can do it as follows:
The CSS can be like this:
#root
{
width:100%;
margin:0 auto;
}
#child1
{
width:50%;
float:left;
}
#child2
{
width:50%;
float:left;
}
Her is my css:
html {
/* force document to be 200% of window size */
min-height: 200%;
}
body {
height:auto;
margin:0 auto;
}
div#wrapper {
/* so that child divs with floats stay contained */
overflow:hidden;
margin:auto;
min-width:200%;
min-height:200%; /* doesn't work */
background-color:#000;
border:1px solid red;
}
div#content1 {
float:left;
min-width:45%;
min-height:45%; /* doesn't work */
background-color:#555;
border:1px solid green;
}
div#content2 {
float:right;
min-width:45%;
min-height:45%; /* doesn't work */
background-color:#777;
border:1px solid blue;
}
And html:
<div id="wrapper">
<div id="content1"></div>
<div id="content2"></div>
</div>
I would like for #content1 and #conent2 to always occupy 45% of the window regardless of content. In Firefox, at least, the min-width works but the min-height does not. Is it possible to set a min-height in this situation using percents?
You can reference the height property as a percentage only when the parent container is set at a fixed height. In this case, html is set to height:auto despite your explicit height:200%. Thus, having the wrapper divider set to a percentage height will not work and the subsequent percentage min-height child elements will be ineffective as well.
I have a bodyMain div of 100% width. Inside it is a body div 800px with auto margin(can I use 'body' as id ?). Inside this are two divs bodyLeft and bodyRight 200px and 600px wide respectively. When I add content to inner divs neither bodyMain nor body expands in height . All heights are auto.
Here is the code: http://jsfiddle.net/TqxHq/18/
HTML:
<body>
<div id="bodyMain">
<div id="body">
<div id="bodyLeft"> left text goes here<br />
</div>
<div id="bodyRight">Right text goes here
</div>
</div>
</div>
</body>
CSS:
#bodyMain{
border:1px solid red;
width:100%;
height:auto;
}
#body{
border:1px solid green;
width:804px;
height:auto;
margin:auto;
}
#bodyLeft{
border:1px solid blue;
float:left;
width:200PX;
height:auto;
}
#bodyRight{
border:1px solid orange;
float:right;
width:600PX;
height:auto;
}
You must add
<div style="clear:both;"></div>
at the end of floating div to fix this issue. see
here
Problem happens when a floated element is within a container box and element does not automatically force the container’s height adjust to the floated element. When an element is floated, its parent no longer contains it because the float is removed from the flow. You can use 2 methods to fix it:
clear:both
clearfix
This is a common issue when working with floats. There are a couple of common solutions:
Add a div after the floats with clear: both
Add the two floats into a container with the CSS attribute overflow: auto
Make the parent element a float
Using the :after CSS pseudo element with the CSS: .clearfix:after {content: "."; display: block; height: 0; clear: both; visibility: hidden;}
Adding a set height to the parent element
See this article
The simple solution is to have outer div overflow:hidden (in style attribute).
Thank you
jsFiddle demo
*{
margin:0;
padding:0;
}
#bodyMain{
position:relative;
overflow:hidden; /*added*/
border:1px solid red;
/*removed height:auto;*/
/*removed width:100%;*/
}
#body{
display:table;/*added*/
border:1px solid green;
width:804px;
margin: 0 auto; /*improved*/
}
#bodyLeft{
border:1px solid blue;
float:left;
width:200px;
/*removed height:auto;*/
}
#bodyRight{
border:1px solid orange;
float:right;
width:600px;
/*removed height:auto;*/
}
To avoid confusion with predefined tag names, refrain from using body, html, or head as ID attribute values.
I agree with Muhammed Irfan's idea. I don't agree with his method though. Avoid inline styling except for small snippets. Especially in this case, because it is likely that there will be another case where clear: both is necessary. So, add a div, give it a meaningful class name and apply the additional CSS.
See this fiddle for an example.