I have this container div which has 2 more child div, i want the div with the class "movablebartoggleswitch" have a height of 100% of its container div, this must work in IE8 and in chrome, but it works either in one or another but not in both, could you tell me what's wrong?
<html>
<head>
<link href="styles.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="configdiv" class="maindiv">
<div class="simpletext">
</div>
<br/>
<div name="containertoggleswitch" class="containertoggleswitch">
<div class="movablebartoggleswitch">
</div>
<div class="bartoggleswitch">
</div>
</div>
</div>
</body>
</html>
.maindiv
{
background-color:#00ABA9;
color:#FFF;
position:absolute;
width:250px;
height:500px;
font-family: 'Segoe UI';
font-weight: lighter;
font-size:20;
overflow-y:scroll;
overflow-x:hidden;
/*Works for all browsers except IE*/
overflow: -moz-scrollbars-vertical;
}
.simpletext
{
width:100%;
}
.containertoggleswitch
{
width:100px;
height:30px;
background-color:#FFF;
position:relative;
}
.bartoggleswitch
{
position :relative;
color:#000;
background-color:inherit;
height:100%;
width:100%;
border-style:solid;
border-width:5px;
border-color:#FFABAF;
}
.movablebartoggleswitch
{
clear:both;
position:absolute;
z-index:10;
width:20%;
height:100%;
background-color:#000;
float:left;
}
The problem is is that the border styles are causing the the element to expand, making the height change. To fix this, use box-sizing: border-box to change the box model to cater for padding to be part of widths
http://jsfiddle.net/XyQB4/
Don't know if this will help you or not, but I had a similar height issue with Chrome (worked fine elsewhere). The way I got it to work was in the HTML code for the DIV id, I put style="min-height: 660px" - or whatever height you need it to be. I didn't have a min-height or height:auto in my CSS for the DIV id. I do have... body, html{height:100%; height:auto;}
Related
I am trying to add a min width to a div that uses a fixed position. I'm not sure if its possible my code below works fine if I remove the fixed positioning.
What I am trying to achieve is to protect the text in the red area (contains links) from being resized below certain 200px;
EDIT THIS IS THE FULL CODE
<!doctype html>
<html>
<head>
<style>
#header{
height:60px;
width:100%;
background-color:#000;
position:fixed;
top:0;
left:0;
}
#leftdiv{
width:15%;
height:200px;
background-color:#ED6062;
float:left;
position:fixed;
left:0;
top:60px;
min-width:100px;
}
#middlediv{
width:25%;
height:200px;
background-color:#F0E92B;
float:left;
position:fixed;
left:15%;
top:60px;
}
#rightdiv{
width:60%;
height:200px;
background-color:#26D978;
float:left;
position:fixed;
left:40%;
top:60px;
}
</style>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>
<div id='header'></div>
<div id='leftdiv'>Contains links</div>
<div id='middlediv'></div>
<div id='rightdiv'></div>
</body>
</html>
JSFiddle https://jsfiddle.net/85mpvxo7/
The min-width works as expected, your problem is that #middlediv has left: 15% and is on top of #leftdiv and #leftdiv is actually wider than you can see it behind #middlediv.
I'm not sure if it fullfills all your requirements, but check this, I'm using a div wrapper with grid display so the left grid item has a width with max-content. Then the other two divs need to use the rest of the space so I put them inside another div. https://jsfiddle.net/n3o679pf/
EDIT: It can be cleaner using just a flex on the wrapper https://jsfiddle.net/n3o679pf/2/ so no need for that ugly #therest div I put using a grid.
<div id='header'></div>
<div id='wrapper'>
<div id='leftdiv'>Contains links</div>
<div id='middlediv'></div>
<div id='rightdiv'></div>
</div>
and the CSS
#wrapper {
display: flex;
width: 100%;
position: fixed;
top:60px;
margin: 0;
}
#leftdiv{
height:200px;
background-color:#ED6062;
min-width:200px;
}
#middlediv{
width:35%;
height:200px;
background-color:#F0E92B;
}
#rightdiv{
width:65%;
height:200px;
background-color:#26D978;
}
My CSS
body, html {
margin: 0;
padding: 0;
height: 100%;
width:100%;
}
.wrapper{
width:80%;
height:100%;
min-height:auto
left:0;
right:0;
margin-left:auto;
margin-right:auto;
background:red;
}
.wrapped-nav{
width:30%;
float:left;
background:green;
height:auto;
min-height:100%;
}
.wrapped-ent{
width:70%;
float:left;
background:blue;
height:auto;
min-height:100%;
}
My HTML
<body>
<div class="wrapper">
<div class="wrapped-nav">Nav
</div>
<div class="wrapped-ent"></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br>Example</div>
</div>
</body>
jsbin: http://jsbin.com/cefegifula/edit?html,css,output
When I enlarged the Ent div with those and this overcome the div Nav, a space is created as in the jsbin show, is there a way to do 2 divs has the same height?
create a class that has height and refactor your code so that both divs have it.
so instead of using 100% for both divs use vh, px, or em to your advantage.
I would write it so that you have something like this.
<div class="class1 heightfix">
</div>
<div class="class2 heightfix">
</div>
and then in your css write
.heightfix{
height: 70vh; // or px or whatever.
}
in other news never try to use <br/> in order to fix your spacing problems.
I wanted to fit my site to browser i tried this and when i try the " width=100%
height=100% " for body's css it does ok and when i tried that with container's div it sort of disappears meaning the background color is not seen
This is html:
<html>
<head>
<title>Untitled</title>
<link href="css/stylesheet1.css" rel="stylesheet" type="text/css"/>
<link rel="icon" type="image/x-icon" href="images/favicon.ico" /></head>
</head>
<body>
<div id="container">
<div id="header">
<div class="logo">
<div id="logo">Logo</span></div>
</div><!--Logo-->
<div class="search-bar">Search BAr</div>
</div>
</div>
</body>
</html>
this is CSS
body{
width:100%;
height:100%;
margin: 0;
background:#CCC;
}
#container{
width:100%;
height:100%;
margin:0 auto;
background:#000;
}
#header{
width:100%;
height:12%;
float:left;
background:#F00;
}
.logo{
width:50%;
height:100%;
float:left;
background:#0F0;
}
.search-bar{
width:50%;
height:100%;
float:left;
color:#FFF;
font-family: 'century gothic';
text-align:center;
margin-top:20px;
}
#logo
{
width:100%;
height:100%;
float:left;
font-size:48px;
color:#FFF;
font-family: 'century gothic';
text-align:center;
margin-top:20px;
}
I am in trouble help me plzzz
If you want to apply height in % the parent element should have height set explicitly.
So if you simply set height property, the parent tag html doesn't have any height set so it'll take 0 height.
Update: Solved Fiddle
If you want to match it to the browser you could best use this.
CSS
body {
width: 100vw;
height: 100vh;
}
the vh, and vw represent percentage according to viewport width/height;
Please check this link when you set width and height
div{width:auto;height:auto;}
it will set automatically
see this link
http://www.w3schools.com/cssref/playit.asp?filename=playcss_width&preval=auto
If you want the size of an element to be the size of the browser then it has to be a direct child of the body and you need to add this style to the body:
body, html {
width: 100%;
height: 100%;
}
I am trying to do a dynamic grid layout with links to other pages, consisting of a picture and a text.
The problem is that I don't seem to find any way of introducing a whitespace (padding/margin) after the grid layout. In other words, The page ends exactly where the main div ends.
Here is the code. Any help is greatly appreciated, as I have tried a lot of methods, and neither one of them worked. Thanks a lot.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css" media="screen" href="resources/index.css" />
</head>
<body>
<div class="header"></div>
<div class="body">
<!-- this is the standard link to each category, which will be inserted n times .. the problem is visible after inserting it a min of 12 times-->
<a href="" class="categorie">
<img src="imgs/asd.png" class="imagine"/>
<div class="nume"> </div>
</a>
</div>
</body>
</html>
CSS :
html
{
background-color:Grey;
height:auto;
}
body
{
display: table;
padding:20px;
margin: 0 auto;
height:100%;
}
.header
{
background-color:white;
width:700px;
margin-left:auto;
margin-right:auto;
margin-top:40px;
height:75px;
}
.body, .body>html
{
background-color:black;
width:700px;
margin-top:5px;
margin-left:auto;
margin-right:auto;
margin-bottom:20px;
padding-bottom:20px;
position:absolute;
display:block;
height:auto;
}
.categorie
{
background-color:white;
margin-left:20px;
float:left;
margin-top:20px;
height:180px;
width:150px;
}
.imagine
{
width:150px;
height:150px;
}
.nume
{
background-color:green;
width:150px;
height:30px;
margin-top:-5px;
}
I'm not sure exactly why there was a display: table on the body element, you said:
"Because I use position:absolute in the .body class.. otherwise, the .body will not extend to encapsulate all of the links."
So I was able to remedy both problems by removing both the display: table from the body element and position: absolute from the body class, then added overflow: auto to the body class.
The CSS:
body{
padding:20px;
margin: 0 auto;
height:100%;
}
.body, .body>html {
background-color:black;
width:700px;
margin-top:5px;
margin-left:auto;
margin-right:auto;
margin-bottom:20px;
padding-bottom:20px;
display:block;
height:auto;
overflow: auto;
}
The JSFiddle:
http://jsfiddle.net/Artsen/VhSdg/
Here is a working fix, in case for some reason, you'd want to keep the body table display.
http://jsbin.com/agucar/2/edit
First change
.body, .body>html
{
position:absolute;
}
to
.body /* removing .body>html didn't change a thing, meaning it was useless */
{
float: left;
}
That way you will be able to clear the floats with a clearfix div (as if correctly relatively positioned) and if you keep your clearfix div transparent, the height you give it will serve as "margin".
Add <div id="clearfix"></div> after <div class="body"></div>, and give the clearfix this CSS:
#clearfix {
height: 20px;
width: 100%;
position: relative;
clear: both;
}
EDIT: Artsen's answer works too, and if you don't need to keep the .body {display: table}, his answer is more suited.
<style>
div{
height:100px;
}
#wrapper{
position:relative;
}
#navigation {
position:relative;
width:400px;
background-color:black;
float:left;
}
#content{
width:2300px;
background-color:red;
padding-left:500px;
}
#iframe{
background-color:green;
}
</style>
<div id="wrapper">
<div id="navigation">
sss
</div>
<div id="content">
<div id="iframe">
content
</div>
</div>
</div>
In browsers like IE8,FF #content div is coming inline with navigation in IE 7 content div is coming down.
I am looking for solution of this issue ine ie7 Thanks for all your help
had similar problem. got solved the issue thanks to user VinayC. I'm sure this will help u too. solution is relative positioning. check this link: http://snook.ca/archives/html_and_css/position_relative_overflow_ie/
In IE the #content is coming down because the width of that element is greater than the window/body. But I'm not sure if this is same with IE9.
To solve this add a width to the #wrapper that is greater than the width of #navigaton + #content.
#wrapper{
position:relative;
width: 2800;
}
Also why do you have such a long width and padding for the #content?