Help - Search - Members - Calendar
Full Version: Image floating and alignment
HTMLHelp Forums > Web Authoring > Markup (HTML, XHTML, XML)
TysonHorlacher
I have 2 types of images (a website banner, and link buttons underneath).

I am trying to find code to force the smaller (link) buttons to align left with the large banner image and float right from there. The large banner image is a fixed size aligned always to the center of the page (unless forced off by reducing screen size enough).

I tried to make a quick example image with (emotions) but it was denied. Hopefully the code will be enough description to let you know what I am trying to do.

Here is what I have:

CODE
<a href="http://www.signstopusa.com">
<img src="http://www.signstopusa.com/header_htm_files/SSHeader.jpg" alt="Sign Stop USA" title="" style="width:1150px; text-align:center;"/>
</a>
<br>
<div style="text-align:center; width:1150px;"
<div style="text-align:left;">
<a href="http://www.signstopusa.com"><img border="0" src="http://www.signstopusa.com/header_htm_files/3073.png"></a>
<a href="http://www.signstopusa.com/signs.htm"> <img border="0" src="http://www.signstopusa.com/header_htm_files/3074.png"></a>
<a href="http://www.signstopusa.com/banners%20display%20page.htm"><img border="0" src="http://www.signstopusa.com/header_htm_files/3075.png"></a>
<a href="http://www.signstopusa.com/magnetic%20signs%20display.htm"><img border="0" src="http://www.signstopusa.com/header_htm_files/3076.png"></a>
<a href="http://www.signstopusa.com/bumper%20stickers.htm"><img border="0" src="http://www.signstopusa.com/header_htm_files/3077.png"></a>
<a href="http://www.signstopusa.com/stickers.htm"><img border="0" src="http://www.signstopusa.com/header_htm_files/3079.png"></a>

</div>
</div>


Any Help will be nice. I just cannot seem to get it to work. Always it aligns center or all the way to the left of the screen.
TysonHorlacher
I finally figured it out.

The first div needed to be a table "<table>" not "<div>".

The end div needed to be "<td>" not "<div>". With those adjustments the code worked as expected.

Hopefully, this will help someone else sooner that it did me.
pandy
No, you don't need to use a table. You never do. But I'm not sure what you want to do. As I interpret it it's what you would get if you basically didn't use any CSS at all.

HTML
<a href="http://www.signstopusa.com">
<img src="http://www.signstopusa.com/header_htm_files/SSHeader.jpg" alt="Sign Stop USA" title="">
</a>

<div>
<a href="http://www.signstopusa.com"><img border="0" src="http://www.signstopusa.com/header_htm_files/3073.png"></a>
<a href="http://www.signstopusa.com/signs.htm"> <img border="0" src="http://www.signstopusa.com/header_htm_files/3074.png"></a>
<a href="http://www.signstopusa.com/banners%20display%20page.htm"><img border="0" src="http://www.signstopusa.com/header_htm_files/3075.png"></a>
<a href="http://www.signstopusa.com/magnetic%20signs%20display.htm"><img border="0" src="http://www.signstopusa.com/header_htm_files/3076.png"></a>
<a href="http://www.signstopusa.com/bumper%20stickers.htm"><img border="0" src="http://www.signstopusa.com/header_htm_files/3077.png"></a>
<a href="http://www.signstopusa.com/stickers.htm"><img border="0" src="http://www.signstopusa.com/header_htm_files/3079.png"></a>
</div>
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.
Invision Power Board © 2001-2018 Invision Power Services, Inc.