2

I spend couple of hours to try to get width of my div container. I read many questions and answers but none of them seem to work in my case - I always got 0. Finally I found that I can get it through scrollWidth property which wasn't even mentioned in this question and similar. Now I have what I wanted by I still have no idea how this works.

Why all the other methods fail? Why this is named scrollWidth? I don't want to scroll anything - it's so confusing. Can I get the size of an element before I append it to a document - even scrollWidth don't work in that case. Is there any model I should follow to always get what I see on the screen? I can't see any patterns right now, I write someting, see something different on the screen, and get something even more different in the output. Every time I want to do someting it seem to be 10 different methods I can use but usually only one or two work because it depends on which methods I used earlier. When i work with 2d graphics I used to have x,y,width and height but in html I allways got those smarty CSS which seem to know better what I want to do. Sorry if this sound a little officious but I'm a little annoyed when i need to spend so much time on a trivial task like this. I use to draw graphic on canvas and it was much simpler but now I want to make a simple website so it's probably not a good idea to build it this way.

Here is my example

I understand that i get 0 size becouse those properties refer to element independently of its children and my container has 0,0 size, right? I read that if I set display: inline-block; style it will adapt size to match its children automatically - why this in not working?

Community
  • 1
  • 1
Paweł Audionysos
  • 576
  • 5
  • 17

2 Answers2

2

The container element in fact has no width. This is why you are getting widths of zero. You can see this if you use dev tools element inspector.

The reason for it being that the container element is absolutely positioned and has no set width. Your child elements are also position: absolute and therefore they will not force the container element to 'grow' to their size.

To get the visible width of the menu, instead you could total up the widths of all the child elements (the first-level menu items). This is probably the best approach to use for the way you currently have things set up. Otherwise, I would suggest completely changing your approach with the html elements you are using, to the CSS properties you are using to position elements where it would not be required to use position: absolute.

I would advise you to open up your dev tools element inspector and start looking at how things react when you change the position from 'absolute' to 'relative'.

Understanding how to position elements and how widths/heights are affected using CSS will save you a lot of headaches - like the one you are having now :)

Steven Anderson
  • 8,398
  • 4
  • 27
  • 32
  • Actually what I'm trying to do is to find the right approach to do such things, I don't feel commited to any of those right now. The thing is I don't want to use CSS at all or limit it to minimum. CSS may be helpfull if you want to make really basic, static page but what if I want to animate something? I'm aware of CSS animations but obviously they have limitations and I don't like to feel being on a leash. Another reason is that it's so messy. I read https://developer.mozilla.org/en-US/docs/Web/CSS/position Where it says thing you said? – Paweł Audionysos Sep 07 '15 at 16:16
  • Do I really need to run a buch of test just to figure out how thing work? Also, I don't see logic in that - why method of positioning would affect size of its container, it's two completely different things. I would have to be a seer to not learn it out the hard way. This whole idea seem so wrong to me. – Paweł Audionysos Sep 07 '15 at 16:16
  • Hey Pawel, if you don't want to use CSS, then sorry to break it to you, then I don't think front-end web development is the thing for you... To understand how javascript, HTML and CSS work together is the key. They all go hand in hand, it's up to you how you put them together and by understanding each of their strengths. If we could all understand everything without learning, then we would all be geniuses! Unless we are like Neo in the matrix where we can learn Jiu Jitsu by downloading the skill to ourselves... – Steven Anderson Sep 07 '15 at 22:51
  • :) I don't want to be a Neo in matrix. I don't meant to be front-end web development neither. Just want to make simple website for myself. Maybe I shouldn't do it here but I just wanted to share some thoughts about it. I don't see a problem in learning itself but in lack of reliable sources to do this. Hymn... Maybe I'm stupid but I see things don't work properly even on sites like w3schools or youtube (on their own chrome browser) - maybe they are made by amateurs like me or maybe CSS is past century monster which is still mutating... I hope you are not angry on what I'm saying...;) – Paweł Audionysos Sep 08 '15 at 02:17
  • Best advice I can give is to "do what makes you happy"! – Steven Anderson Sep 08 '15 at 02:20
  • You already helped me. I didn't await for more but thank you Steven :) – Paweł Audionysos Sep 08 '15 at 02:31
1
document.getElementById("mydiv").offsetWidth

This will return the width, including padding.

Akjm
  • 53
  • 5