Div is not rendering according to screen size

Question

In my app, I want everything to render according to screen size.

But a div is not rendering ;

Here is code :

<div id="tools" class="open">
.....
</div>

css :

#tools{
   position: absolute;
   top: 0;
   right: 0;
   bottom: 0;
   width: 5%;
   overflow: hidden;
   background: #ffffff;
}

It doesn't render according to screen size. Please provide me some feasible solution for this

EDIT :

Some tools icon is used in above div. So whatever screen size is used, size of image icon remains same. it doesnt render according to screen size

Define "_render_" - do you mean it isn't the correct height? Is it showing at all? — Tom Walters, Jul 17 '13 at 07:04
Why you need `bottom: 0;` when you are using `top: 0;` and I guess what you are looking for is `width: 100%;` — Mr. Alien, Jul 17 '13 at 07:05
It looks like you did not give it a height. If there is no content inside then it will not be visible. **Edit**: Mr. Alien is right, using `top` and `bottom` makes no sense. Although `width:5%` is fine if that's what he wants — asimes, Jul 17 '13 at 07:05
The problem can't come from this div but from a parent div. Check if all its parent div don't have fixed values. — Lucas Willems, Jul 17 '13 at 07:08
it does work. just add a background color and `top:0;` `bottom:0;` makes a lot on sense — iConnor, Jul 17 '13 at 07:19
@unhandled-exceptionally `width:100%;` would make it the full size of the screen which is clearly not OP's intentions. it's obvious that his intentions is to create a "tools" sidebar — iConnor, Jul 17 '13 at 07:51

score 1 · Answer 1 · answered Jul 17 '13 at 07:11

1

If by "rendering" you understand that the div is not showing, that is because you need to specify its height. Furthermore, avoid using the ID for CSS identification. Use its class instead.

CSS:

.open {
    position:absolute; 
    top:0; 
    right:0;
    bottom:0;
    width:5%;
    height:10%;
    overflow:hidden;
    background:#999999;
}

Instead of the height:10%, specify whatever height fits your needs.

Working fiddle here

answered Jul 17 '13 at 07:11

Raul Rene

10,014
9
53
75

render means its width is not getting small and large according to screen size. – Rishi Jul 17 '13 at 07:13
Actually you don't need to provide `height` at all – iConnor Jul 17 '13 at 07:22

score 0 · Answer 2 · answered Jul 17 '13 at 07:10

0

Try this:

#tools {
    position:absolute; 
    top:0; 
    right:0;
    width:5%;
    overflow:hidden; 
    background:red;
}

html, body {
    width: 100%;
    height: 100%;
}

Fiddle

answered Jul 17 '13 at 07:10

karaxuna

26,752
13
82
117

I cannot give width 100% because if i will give 100 % then it will cover whole area while at left of above div is a canvas. – Rishi Jul 17 '13 at 07:12
5% should work assuming that its parent (which might be ``) has a specified width – asimes Jul 17 '13 at 07:13
@Rishi then give whatever width and height you want in percentage – karaxuna Jul 17 '13 at 07:14
But it doesn't work when screen size changes. It looks same for each screen size – Rishi Jul 17 '13 at 07:16
@Rishi no, it DOES work. it's width is changing depending on screen size. increase width to 50% to see it clearly – karaxuna Jul 17 '13 at 07:17

score 0 · Answer 3 · answered Jul 17 '13 at 07:11

You have given "width:5%;". This might be a reason that your div is not showing a proper width according to the screen. Make it "width:100%".

Also, you have defined {position:absolute; top:0; right:0; bottom:0;}. If top is 0 then why have you given bottom as 0?? It is not required. You can remove it.

score 0 · Answer 4 · answered Jul 17 '13 at 07:18

I think, the problem is not the size of the div you using. But the size of icon , which is not changing according to size of div. either you using very small image or given fix width to them. try this with images . amke them with good standard size according to your app. and write this.

.class{max-width:100%}

This with re-size them according to div size

score 0 · Answer 5 · answered Jul 17 '13 at 07:19

0

The problem can't come from this div because no fixed dimensions are defined. So the problem comes from a parent div. You have to check if all its parent div don't have fixed values.

answered Jul 17 '13 at 07:19

Lucas Willems

6,673
4
28
45

score 0 · Answer 6 · edited May 23 '17 at 11:49

0

It works perfectly fine just need to add some color so you can see it

http://jsfiddle.net/A2JjN/2/

background:red;
font-size:50px;

For anyone who is confused about why one might use top:0; bottom:0; then read this post CSS 100% height with absolute positioning top 0 bottom 0

edited May 23 '17 at 11:49

Community

1
1

answered Jul 17 '13 at 07:21

iConnor

19,997
14
62
97

score -1 · Answer 7 · answered Jul 17 '13 at 08:11

-1

I got my solution. I just give width in pixels instead of % and it worked.

#tools{
   position: absolute;
   top: 0;
   right: 0;
   bottom: 0;
   width: 50px;
   overflow: hidden;
   background: #ffffff;
}

answered Jul 17 '13 at 08:11

Rishi

1,279
3
20
37

Did you want tools to expand when the screen does? I thought that was the point in having used % – asimes Jul 17 '13 at 18:21

Div is not rendering according to screen size

7 Answers7