I have a website with 5 horizontal divs whom all float:left and have a % width. The left one I want to have text in, and a scrollbar. However, the scrollbar only shows up when I give it a position:absolute. Try it in the jsfiddle. When I do that, the div ignores the other 4 and they get out of line. How do I work around this?
The jsfiddle > http://jsfiddle.net/QN8RS/
Add position:absolute; to the following div in CSS. You will see it working, but the divs get out of place..
#left{
float:left;
background-color:#C00;
width:15%;
height:100%;
overflow:auto;
top: 0px;
bottom: 0px;
}
You haven't specified the height of the <body> so its height is computed as auto.
You specified the height of .main as 100%. This is a percentage so, because the height of its parent (the body) is computed as auto, the computed height is also auto.
You specified the height of #left as 100%. This is a percentage so, because the height of its parent (.main) is computed as auto, the computed height is also auto.
Since the height is auto, the height as is tall as it needs to be to hold all the content.
Since you have set overflow: auto, you only get scrollbars if the content is taller then the element (which it isn't).
Set height: 100% on the html and body elements so that the computed height of #left is the height of the viewport and not auto.
I think you are looking for :
overflow-y: scroll
Little Fiddle
The reason is that you have specified height:100% on your div .main. 100% of what? Which parent?
If you specify the height of body to 100% then it will work.
html, body { height: 100%; }
Check your updated fiddle: http://jsfiddle.net/QN8RS/2/
Instead of using floats, use position: absolute; and left: number%; (you will have to figure out how much % the left is of each element).
Check out the Fiddle:
http://jsfiddle.net/QN8RS/3/
Related
In css when i give my div height a percentage value the div completely disappears, heres what im doing
<html>
...
...
<div id="logcontainer">
<div><div>
<div></div>
</div>
this is not the actual html but it sums up what im trying to do, heres my CSS
#logcontainer {
width:100%;
min-height:100%;
margin: 0px;
padding: 0px;
background-color: #7f7f7f;
}
whenever the height has a percentage value the div disappears, the width works but no height?, when I use ems or rem it works perfectly, any ideas?
I think all you need is html, body { height: 100% }, if i'm understanding your question correct
Set height of body 100%, then it will work. Since you need to set a 100% height on your parent element, in this case your body. The div tag is a container, but it is contained in the body tag... the body tag, unfortunately is not treated the same on all browsers... in some it is sized to fit the browser's available space... in some browsers the body tag is sized to fit the minimum height required to fit the current contents.... So a div tag set to 100% would size differently on each...in fact if empty, the div tag might not even show up on some browsers, since an empty body would be, potentially, 0px high...
html, body
{
height: 100%;
width: 100%;
margin: 0;
}
Here is the solution :
html, body { height: 100%; }
but it just a solution you need to understand why is happened , this happened because your element is a block level element which wrap up your whole content width and height width as a 100%
but this is not the case with height you need to specify the related to content to give a height in percentages like as above body has given 100%
enter link description here
I have two containers (main-container and sub-container). Body, HTML and main-container have classes of 100% height whereas sub-container fixed in 1000px. Main-container should be fit with 100% height in the whole screen even sub-container is small or large. Now problem is, main-container is not increasing its height according to sub-container height. Please check the example below to understand my requirement.
http://jsfiddle.net/awaises/dLeHL/
Really appreciate your help.
Thanks
change height:100%; to min-height:100%; in .main-container: http://jsfiddle.net/dLeHL/3/
EDIT:
Percentage heights rules are explained here:
Percentage Heights If the height of an element is set to a percentage,
it needs for its parent element to have a set height. In other words,
the height of the parent element can't be set to auto. Like many
aspects of CSS, this is a bit confusing at first.
Is this what you're trying to achieve?
I change the width of the .sub-container in order to be in % like the .main-container.
CSS markup:
html, body {
height:100%
}
.main-container {
height:100%;
background:red;
}
.sub-container {
height:100%;
width:75%;
margin:0 auto;
background:blue;
}
Hope it helps!
You don't need to set the height for the .main-container (by default it will expand to the size of the child container). By setting the height to 100% you are forcing it to be the height of the screen and no more. So just change it to:
.main-container { background:red; }
If you need the main container to always be at least the height of the screen, use #Helstein's suggestion of setting the min-height to 100% while removing the height setting.
In a fluid layout I need in the same line, side by side, a fixed-width block and a fluid width block with a max width. When the window is resized, the fluid width block should resize being "pushed" by the fixed width block.
Here is what I came to achieve: http://cssdesk.com/gHvUB
But sadly the content expands outside its container .....
Anyone ?
One way to achieve your goal with the example you gave would be to
Add a right margin of 200px to the fluid box
Add a relative position of -200px to the fixed-width box.
.line {
...
position: relative;
}
.fluid {
...
margin-right: 200px;
}
.fixed-width {
...
position: relative;
top: 0;
right: -200px;
}
With css (and especially css3) there are going to be many different ways to achieve this.
Here a couple examples:
example
example
And here on the site:
CSS Layout 2-Column fixed-fluid
Ok, the easiest way is to set the container to overflow: auto. Then set both child containers to position: absolute. Since the container's position:relative they'll sit inside the parent. Then you need to set the parent's height to something. You can try min-height: (value). I have a sample here.
Hope this helps.
Newbie question here. I have a #wrapper as my main container. Like so:
#wrapper {
margin: 0 auto;
padding: 0 20px;
width: 960px;
height: 100px;
}
My question is: what is the actual width of the wrapper now? 960px or 1000px? Let's say I want to have a #header inside the #wrapper. What should the width of my #header be, assuming I want it to be the width of the #wrapper?
The width of the wrapper in your example is now 1000px. Padding is added to the width, wheras Margin is not.
If you put a header inside the wrapper, you would want it to be 1000px to stretch entirely from side to side, but that would be impossible because of the padding, so your header would still have to be 960px.
Heres a JSFiddle (Sorry, just discovered this today!)
http://jsfiddle.net/wGYfR/8/
The outer width is 1000px and the inner width is 960px. So if you want to put inside the wrapper it should have width <= 960px
The wrapper is still 960px. However, you have added padding of 20px on both sides meaning for 20px on both sides there will be only white space. The usable area is now 920px.
You don't have to set the width of the header. If you don't it will fill the whole wrapper element (minus the padding). You header will end up being 920px.
I suggest firebug This will help you so much. Seriously.
The actual width would still be 1000px. You can set a background color on your #wrapper to see that the width will still be 1000px.
CSS Box Model Illustration http://img405.imageshack.us/img405/3402/boxmodel.png
If you use Chrome or Safari (or firebug with Firefox for that matter) you can easily check out the width of an element, and how padding and margin in affecting it.
The width should be 960px, however only FireFox adds the padding to the width.
To fix this, put the following code on top (or at least above all div selectors) of your code:
DIV { /*let Firefox stick to the web standard concerning padding*/
-moz-box-sizing:border-box;
box-sizing:border-box;
margin:0;
padding:0;
}
I am having a problem with some div's
The outer div has a min-height, but the inner divs are all varying heights. Because the inner divs are absolute positioned, they do not affect the outer divs height. Is there a way to make these inner divs affect the height of the outer div?
The reason I am styling these divs with position:absolute is so that they all start at the top of the container div.
As far as I know, there's no way for absolutely positioned child elements to affect the height of their statically, or relatively positioned parent elements using only CSS. Either:
Reorganize so that the child elements remain in the document flow
Use JavaScript on load of the page to set the height of the parent to the height of the largest child
This issue is common in fade-in/fade-out JavaScript slideshows, and from what I've seen either 1) the height of the parent container needs to be defined or 2) the parent container's height is set dynamically for each slide.
I recently had this problem with a fade in/out CSS transition slideshow, and ended up solving it by giving the first child element position: relative; and the others position: absolute; top:0; left: 0; which ensures that the containers height is the same as the height of first element. Since my CSS transition slideshow uses the opacity property the container dimensions never changes during the course of the slideshow.
Alas, since I also needed to supply a javascript fallback for older browsers I had to set the container height for these browsers anyway (because of jQuerys fadeIn/fadeOut actually setting display: none; I would guess).
Here is a long overdue cross-browser solution to your problem. No more static width, no more em hack.
<style>
/* clearfix */
.container:after {
content: '';
display: table;
clear: left;
}
.page {
float: left; /* display side-by-side */
width: 100%; /* be as wide as parent */
margin-right: -100%; /* take up no width */
}
</style>
<div class="container">
<div class="page"></div>
<div class="page"></div>
</div>
After searching for a solution to this problem for so long, I am baffled to see how simple it is. Granted, the .page elements are not absolutely positioned. However, all the same goals can be achieved through this method, with almost no pain or sacrifice.
Here's a demo: https://jsfiddle.net/eqe2muhv/
This also works for inline-blocks, of course. Though you might need to set the font-size or letter-spacing of the container to 0. I would also recommend using vertical-align: top on the .page, to simulate a regular block element.
Here's a demo: https://jsfiddle.net/dzouxurs/8/
Try to use display: inline-table, height: auto; .. it works for me
I think you should position them relatively and just change "vertical-align" to "top" in the interior divs. Then you won't have the issue of messing with abs divs.
You can simply float the divs if you want them to be on the same horizontal plane.
i've done this task without any JS. Only, by CSS:
.frame {
max-height: calc(100vh - 283px); // 283px gives me some space at the botoom of the frame
}
Maybe u can try max-height: calc(100% - 50%); it will work if the content that should be in the middle of the screen/div is super short/small.
position:absolute;
top:0;
bottom:0;
margin:auto;
width:auto;
height:auto
max-height: calc(100% - 50%);
...etc...
Test display: inline-block on the element that need auto height.