Percentage widths and containing divs

squaredeye · 2006-11-06 01:49:46

I am experimenting with a percentage width design (and the use of min and max widths).

My goals

I am aiming to find a way to integrate % widths and min-widths using pixels. I have focused on two tests to provide alternative testing grounds.
I’d like to let the images in some of the divs have flexible sizes, but with bottoms and caps to maintain read/visability.
Specifically I hope to give the far left” a min-width: 110px, and the *left div’s <img> a min-width: of 200px.

Test One

Here I have a wrapper div, which contains two nested divs:

Far left
and Main

Main contains two nested divs:

Left
and Right

for this test I have given far left a percentage width of 10%, and Main a % width of 90%.
Then I have given Left and Right a percentage width of 50% each, believing that the container
these divs will be 50% the width of the Main div, but they are acting differently. (perhaps acting
as though they are 50% of the wrapper div.

Test Two

Here I have a wrapper div, which contains three nested divs:

Far left
Left
and Right

This div behaves as expected, as I am setting each div up to equal 100%.

EDIT: Another test detailing my problem

Test Three

This test is most similar to test one, but floats the main div.
END EDIT

The issues arrise when I want to give a min-width to any of the img tags within any of the divs, or the divs themselves.

Can someone explain a better way to make this work, or perhaps a work around?

Thanks,

Matthew

Last edited by ma_smith (2006-11-06 02:05:25)

squaredeye · 2006-11-07 14:42:23

How is it that I write these posts that either confuse, bewilder, or simply exist as lonely lonely posts.

bump… anybody?

maniqui · 2006-11-07 15:30:53

Hi Matthew.

This is are some general advices:

- try to keep the addition of percentages below 100%. For example, don’t give to Left and Right a width of 50% to each one. Try something like 49% (or less). This will help to keep consistence between browsers. Also, it will help to apply paddings/margins/borders to those divs without breaking things.

- try to avoid applying margin/padding (and maybe borders) to main elements.

Also, I dont know which is the effect of applying a min-width to an img tag. Does it work in any way?

You may find this useful: Site-in-an-hour
Also, I suggest to take a look at the stylesheet of 456berestreet and Wion Design

Sorry for not being so specific in answering your question.

squaredeye · 2006-11-07 16:05:38

maniqui wrote:

Sorry for not being so specific in answering your question.

WHat! I can’t believe you don’t answer my every need! :)
I am on board with all of your suggestions Manaqui, and even the percentages
issue (below 100%). I am using this as more of an experiment at the moment,
and not a cross browser issue.

I’d really like to understand better the relationship and rules of percentage
widths when they intersect with fixed widths, min and max widths.

I am sort of trying to play with this thing a bit, so I can get to know it more intimately,
know what I mean?

Thanks for the thoughts :)

Matthew

Textpattern CMS

Textpattern CMS support forum

#1 2006-11-06 01:49:46