Page 1 of 1

CSS fluid div without width...

Posted: Sat May 24, 2008 3:10 pm
by kendall
Hi,

http://www.triniscene.com/tsv7/gallerie ... =GAL58D093


i'm not a CSS guru but from the above link i have 2 divs

one holds a list of thumbnail pictures

the other the larger image of the thumbnail when the thumbnail is clicked

the large div is placed first and is floated to the right

the div with the thumbs are placed after and are floated left

I'm trying to get the divs side by side with the thumbs div being able to "adjust" based on the width of the other div (cause the other div holds the larger image which could be landscape or portrait)

further to this...
I want to be able to have the div with the thumbs lay itself out left to right horizontally when a larger image is not there

I'm kinda solved it in IE but NOT in FF....what do I need to do?

Re: CSS fluid div without width...

Posted: Sun May 25, 2008 8:03 am
by JAB Creations
So you have a two div layout within a parent element...

So the code you're dealing with looks something like...

Code: Select all

<div id="this_is_parent"><div id="left"></div><div id="right"></div></div>
Just don't add any border, margin, and/or padding. Then set the width of both left/right divs to add up to 100%. When you float a block-level element (div being the generic block element) the width only takes up the needed space. When a block is not floating it takes up all available space.

With that in mind border+margin+padding+width = total width.

So if you need to do something like add padding to #left then give MARGIN to it's child <div id="left"><div id="left_child"></div></div>

...and if you get this CSS1 down pat it will work in Gecko 0.x+ Opera 3.6+, IE 4.0+, etc.

Re: CSS fluid div without width...

Posted: Sun May 25, 2008 11:16 am
by kendall
ok,

I tried it somewhat but i still don't get it

i have

Code: Select all

 <div id="thumbs"><!-- contains other divs and thumbnail images --></div><div id="largImg"><!-- will contain the larger version of the thumbnail --></div>[/syntax] and for my CSSi have [syntax="css"]#largerImg {      cursor:pointer;    background-color:#ffffff;    text-align:center;}#largImg{    float:right;    background-color:#990000;    width:25%;    text-align:center;}#thumbnailList {    background-color:#cccccc;    float:left;} 
This is kinda giving me what I want but....

click on ToggleDisplay above the thumbnails...

i was hoping that removing the div and large image the thumbnails would all flow and fill the area
in IE this is working great....

in FF wel i don't know what's wrong

I'm not understanding why I need not put a float on the #thumbnailList and I can't see why FF wouldn't float it to the left as it is what the CSS states...