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?
CSS fluid div without width...
Moderator: General Moderators
- JAB Creations
- DevNet Resident
- Posts: 2341
- Joined: Thu Jan 13, 2005 6:44 pm
- Location: Sarasota Florida
- Contact:
Re: CSS fluid div without width...
So you have a two div layout within a parent element...
So the code you're dealing with looks something like...
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.
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>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.
- kendall
- Forum Regular
- Posts: 852
- Joined: Tue Jul 30, 2002 10:21 am
- Location: Trinidad, West Indies
- Contact:
Re: CSS fluid div without width...
ok,
I tried it somewhat but i still don't get it
i have
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...
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;} 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...