CSS alignment 1

[GUJUm0deL]

Need some help fixing a CSS issue. Take a look at:

http://www.highestateliving.com

On the main page, there is a "featured listings" box where the listings are randomly picked from the dB. Hit refresh a few times and you'll see the issue.

What i'd like to do is have the left, center and right "section" of the box to be a set width, no matter what the image width is. The maximum width the image can be is 130px. Thumbnails are not always 130px because after the user uploads images, I resize the original image but I leave the preserve aspect ratio on so that the image is not streched.

This is the code that deals with the image:

<div style="padding:100px 30px 0px 25px; position: absolute;">					
	<div style="border:1px solid black; height:155px; width: 440px;">

		<div style="float:left; padding:10px 10px 10px 10px;">
		<img src="1.jpg" alt="1.jpg" border="0">
		<br/><a class="featuredProp" href="">Testing Two</a> <br/>
		<div class="featuredPropLoc">Milan</div>
		</div>

		<div style="padding:10px 10px 10px 10px;">
		<img src="2.jpg" alt="2.jpg" border="0">
		<br/><a class="featuredProp" href="">qwertyuiop</a> <br/>
		<div class="featuredPropLoc">Melbourne</div>
		</div>

		<div style="padding:10px 10px 10px 300px; margin:-12.5em -10em 0em 0em;">
		<img src="3.jpg" alt="3.jpg" border="0">
		<br/><a class="featuredProp" href="">test three</a> <br/>
		<div class="featuredPropLoc">Johannesburg</div>
		</div>
	</div>
	<h4 style="margin:0em 0em 0em 0em; text-align:right">Featured Listings</h4>
</div>

I've tried many different things, including have a width: 130px; in each of the image <div>'s

Thanks!

____________________________________
Just Imagine.

http://www.imajinarts.com

 

[ninjadeathmonkey]

I'm not a huge fan of inline styles, but here's what I did to somewhat fix it:

<div style="padding:100px 30px 0px 25px;position:absolute;">                    
    <div style="border:1px solid black; height:155px; width: 450px;">
        <div style="width:130px;padding:10px;display:inline;float:left;">
        <img src="1.jpg" alt="1.jpg" border="0">
        <br/><a class="featuredProp" href="">Testing Two</a> <br/>
        <div class="featuredPropLoc" style="display:inline;">Milan</div>
        </div>

        <div style="width:130px;padding:10px;display:inline;float:left">
        <img src="2.jpg" alt="2.jpg" border="0">
        <br/><a class="featuredProp" href="">qwertyuiop</a> <br/>
        <div class="featuredPropLoc" style="display:inline;">Melbourne</div>
        </div>

        <div style="width:130px;padding:10px;display:inline;float:left">
        <img src="3.jpg" alt="3.jpg" border="0">
        <br/><a class="featuredProp" href="">test three</a> <br/>
        <div class="featuredPropLoc" style="display:inline;">Johannesburg</div>
        </div>
    </div>
    <h4 style="margin:0em 0em 0em 0em; text-align:right">Featured Listings</h4>
</div>

I put a float:left on all of them, and gave them all a width of 130px. Also, I took out the margin on the last image div. Oh and changed the width to 450px instead of 440px;

Is this kinda what you are looking for?

Ron Wheeler
Tekdev Open Source Development

 

[monksnake]

The main killer is this:

<div style="padding:10px 10px 10px 300px; margin:-12.5em -10em 0em 0em;">

I don't see the use of padding-left:300px. That makes you run out of room within your bordered div.

I think Ninja's code will work except for the display:inline on the 130px width divs. The float:left will keep the divs from jumping lines.


<.

 

[ninjadeathmonkey]

Oops, I meant to take out the "display:inline" part.

Ron Wheeler
Tekdev Open Source Development

 

[monksnake]

I see you are the new kid on the block ninja, welcome.

(I've only been answering for 3 months, so I'm kinda new too)

<.

 

[ninjadeathmonkey]

Thanks monksnake! I'm kinda in between projects at work, so just killing some time. ;-)

Ron Wheeler
Tekdev Open Source Development

 

[GUJUm0deL]

Hey guys (or is it gals?), thanks for the help. ninjadeathmonkey, I will try your suggestion and see what happens.

BTW, I am not a fan of inline styles also. I am still debugging/developing this so I found it easier to use inline styles for the time being. Once I had the styles just right, I will move them into an external .css file

Thanks.

____________________________________
Just Imagine.

http://www.imajinarts.com

 

[GUJUm0deL]

Hey, it worked! Thanks a lot. (have a star)

<div style="padding:100px 30px 0px 25px;position:absolute;">                    
    <div style="border:1px solid black; height:155px; width: 450px;">
        <div style="width:130px; padding:10px 10px 10px 10px; float:left;">
        <a class="featuredProp" href="">Testing Two</a> <br/>
        Milan <br/>
        <img src="1.jpg" alt="1.jpg" border="0">
        </div>

        <div style="width:130px; padding:10px 10px 10px 10px; float:left">
        <a class="featuredProp" href="">qwertyuiop</a> <br/>
        Melbourne <br/>
        <img src="2.jpg" alt="2.jpg" border="0">
        </div>

        <div style="width:130px; padding:10px 10px 10px 10px; float:left">
        <br/><a class="featuredProp" href="">test three</a> <br/>
        Johannesburg <br/>
        <img src="3.jpg" alt="3.jpg" border="0">
        </div>
    </div>
    <h4 style="margin:0em 0em 0em 0em; text-align:right">Featured Listings</h4>
</div>

I also removed the style="display:inline;" from the <div class="featuredPropLoc">. What do you think?

____________________________________
Just Imagine.

http://www.imajinarts.com

 

[ninjadeathmonkey]

Thanks! Looks good.

Ron Wheeler
Tekdev Open Source Development

 

[GUJUm0deL]

Hey, I've tried this from CSS and just can't get it right. So, I mocked up the same thing in table format (which gives me exactly what I want in both IE and FF)

http://www.highestateliving.com/

(CSS version - I added the gray bg shade for test so I can 'see' where the images are loading)

http://www.highestateliving.com/aa.cfm

(table version - see how the images stay in place no matter what size is loaded? It doesn't shift around)

Is there a way to achieve this (table version) in CSS?

____________________________________
Just Imagine.

http://www.imajinarts.com

 

[Vragabond]

Both seem to work about the same for me in FF and IE7. I must say that I would've attacked this problem differently. Let's see.

1. No absolute positioning. It doesn't have to float outside the flow of the document. I would just float it there or something.
2. It is not a series of divs or a table, it is a list. That should be kind of obvious because you even call it 'Featured Listings'.
3. Check this page for a nice little idea on how to create such a list:

http://www.maxdesign.com.au/presentation/definition/dl-image-gallery.htm

4. Post here if you have problems incorporating that design.

 

[GUJUm0deL]

Thanks for the link. That looks like what I need. I will play around that tonight and post my results.


____________________________________
Just Imagine.

http://www.imajinarts.com