CSS: How do I give dynamic width to a div?

[aceO07]

I'm just playing around with creating a layout with css.

css doesn't seem too bad with absolute sizes and positions, once it gets to percents it doesn't seem to work for me. I have a div located at top 200px and left 200px. I want that div to expand to the edge of the browser.

I do realize that what I'm trying to accomplish is pretty simple with tables, but I'd thought I'd give it a shot.

 

[Markbnj]

CSS drives me nuts, but one thing I've learned is to work my way up the visual tree and understand what is contained in what. It may be that the element your div is contained in is not expanding to the full browser width.

If you haven't tried Firebug you should. It's a plugin for Firefox that lets you view and edit the styles for a page (among many, many other useful features) and see the results in the browser window. Very slick.

 

[aceO07]

The div is contained only be the body. If I set to the div width: 100%, then it assumes 100% = the viewable width instead of 100% of the space left.

Maybe I should just use table for the main layout and use css static sizes for things that are static. Seems like it'd be much easier that way.

 

[Markbnj]

Maybe if you float it to the side of something else that takes up the rest of the space? Have you played with margin on the left side?

There are a couple of columnar layout generators out there as well, and I've found it useful to use them to generate what I want, and then look at the tricks they used.

This one is very interesting: generate a layout and it gives you sliders to adjust the width of the sides, as well as showing you realtime the changes it makes to the css.

http://www.pagecolumn.com/

 

[aceO07]

Originally posted by: Markbnj
Maybe if you float it to the side of something else that takes up the rest of the space? Have you played with margin on the left side?

There are a couple of columnar layout generators out there as well, and I've found it useful to use them to generate what I want, and then look at the tricks they used.

This one is very interesting: generate a layout and it gives you sliders to adjust the width of the sides, as well as showing you realtime the changes it makes to the css.

http://www.pagecolumn.com/

Thanks, I'll give that site a more careful look later.

 

[PhatoseAlpha]

Interesting. Still, it's extraordinarily aggravating that something like this isn't drop dead simple. CSS is occasionally very nice, but it's also missing some very basic needs.

 

[aceO07]

I took a look at the pagecolumn.com site. Unfortunately it only does ALL units in pixels, em or percents. It can't mix absolute width with percents, which is what I want to do. Figuring out absolute width for everything isn't hard, either is all percents. I haven't look at how gmail does it. Maybe it uses javascript to set the width of the main content section while the left section is static.

 

[ivan2]

from my trial and errors, absolute spacing is just that, absolute, so the 30% 70% don't apply and they don't even push other divs around as they can get over/under some other div. I try to use float for as much as possible myself.

 

[Ken g6]

You could probably go old-school, and put the contents of the div in an invisible table inside the div. Does it work to have two divs, make one reference percents, and the other reference absolute values inside the other, or vice-versa?

 

[Vogel515]

edit

 

[DannyBoy]

Originally posted by: Ken g6
You could probably go old-school, and put the contents of the div in an invisible table inside the div. Does it work to have two divs, make one reference percents, and the other reference absolute values inside the other, or vice-versa?

No

 

[DannyBoy]

Originally posted by: aceO07
I'm just playing around with creating a layout with css.

css doesn't seem too bad with absolute sizes and positions, once it gets to percents it doesn't seem to work for me. I have a div located at top 200px and left 200px. I want that div to expand to the edge of the browser.

I do realize that what I'm trying to accomplish is pretty simple with tables, but I'd thought I'd give it a shot.

Are you wrapping your absolute element in a relatively positioned element with a width?

 

[aceO07]

Originally posted by: DannyBoy

Originally posted by: aceO07
I'm just playing around with creating a layout with css.

css doesn't seem too bad with absolute sizes and positions, once it gets to percents it doesn't seem to work for me. I have a div located at top 200px and left 200px. I want that div to expand to the edge of the browser.

I do realize that what I'm trying to accomplish is pretty simple with tables, but I'd thought I'd give it a shot.

Are you wrapping your absolute element in a relatively positioned element with a width?

I actually gave up on this a couple of months ago. I'm currently using a fixed width content element and no left side fixed width panel. I wanted to spend my few focused hours on writing code to implement my ideas instead of tackling layout design puzzles. Also, after more development I haven't found the left panel wasn't as vital as I initially thought or rather I haven't found a use for it that would be global to the entire site.

Basically I want it similar to the AT forums layout. With a left side nav panel that can be hidden or shown. Looking at the AT fusetalk code, it seems like it uses uses js to handle the margin-left for the main pane and then it uses table with 100% width to handle the width of the main pane div.

To answer your question, I don't remember exactly how I was attempting this before. One attempt involved a fixed width nav panel and a fixed width main content area that was controlled by js. Hiding or showing the nav panel changed the position/width of the main content area. I believe I can have js monitor the browser size and resize elements appropriately, but that doesn't sound like the route I want to go with.

I wouldn't even mind having a solution that only worked in Firefox for now. I just want a layout that works to implement my ideas and then I can mess with it for other browsers later. Thinking about my last sentence, I should have gone with a table layout with my limited experience but I haven't.

A simple 100% width table with a row with 2 columns. 1 left column set to 200px width and 1 other main content column. Hide the left column or show it. That seems like the easiest non-css solution.

I'm open to (and appreciate) any ideas or code samples or links.