Comic Fury Webcomic Hosting - Image Code Issue

What I am trying to do is use 2 images.
1 my title image aligned to the right.
2 a "box" that I want to stretch to hit my title image.

the idea being that on any browser I will have my title image and a bar that extends to the edge of the screen. When I have the 2 images the are next to each other however once the width="100%" is added to the black box it extends to the edge pushing the title to the next line.

<img src="http://MyAngelMyDemon.thecomicseries.com/files/title_bar_blackbox.jpg" width="100%" height="248">
<img src="http://MyAngelMyDemon.thecomicseries.com/files/title_bar_small.jpg" align="right"> 

Any ideas on how to make this work or other ways to do this?

Fixed Kinda. I extended the image and the height re sizes based on browser width but it works.

I know if I wanted to do that I'd go for my all times favourite, the plain old table:

<TABLE BORDER=0 CELLSPACING=0 CELLPADDING=0 BGCOLOR="#000000" WIDTH=100%><TR><TD>
<img src="http://MyAngelMyDemon.thecomicseries.com/files/title_bar_small.jpg" align="right">
</TD></TR></TABLE>


It has the advantage of requiring only one image, and allows to add elements in the black area if you ever want to do such a thing.

EDIT: @Later: Apparently I've come across as angry in this post and I didn't mean to; I don't get angry nowadays unless you're mean or w/e. >.> I will however leave this post as it stands, just with this notice.

First, I'd recommend using CSS instead of the HTML width attribute; a lot of those things are deprecated and may not work in the future, etc, and CSS is more flexible/powerful anyway. Second, it's kind of silly to use an image file for just a black rectangle; you can just set a div to be black and use that.

Now, to answer your actual question! Percentage widths in HTML/CSS work by setting the width of the element to a given percentage of the width of the parent element; this is where your issue is. To solve it, we'll need to look at CSS's float property, which takes an element out of its usual positioning and moves it to either the left or right of the parent. Try this:

<div style="width:100%;height:248px;background-color:#000">
<img src="/files/title_bar_blackbox.jpg" style="float:left"> 
</div>

Now, this will stick your image at the far left; it might be the case that you want to displace it rightwards a bit, so I'll provide a code for this too: (Replace ### with the number of pixels you'd like to displace by, or change it to a percentage if you want I guess.)

<div style="width:100%;height:248px;background-color:#000"><div style="width:###px;float:left"></div>
<img src="/files/title_bar_blackbox.jpg" style="float:left"> 
</div>

CSS is great when you want to use very advanced properties (you won't make an object glow with HTML, by example) or if you want to reproduce the same format on many separate elements without having to rewrite a dozen tags each times.
When you have a single element in need of a simple format, the best answer is always the simplest. Less room for error or for old browsers to interpret it creatively.

And that word, "deprecated", you should always read it as "cross-compatible". It's a good thing, it means that the visitors who didn't keep their browser up to date will see it the same way you do.
It also means that it's easy to do, anyone glancing at your source would find their way through it immediately, and for someone who wants to feel 1337, clarity is just unsexy.

This... Doesn't make sense. Using proprietary stuff or HTML5/CSS3 things that aren't widely supported is usually a mistake, yes, but that's no reason to intentionally use outdated standards. Also, if you use CSS or w/e only when it's completely necessary and use deprecated techniques instead where possible, then you've got an inconsistent mess that would be obnoxious to debug/maintain/update. Also, deprecated things may not be supported in newer browsers; people do upgrade their browsers but rarely downgrade them, so if you use deprecated techniques to make them work on older browsers, you'll soon find them not working on actually up-to-date browsers, and people will be migrating to those. Now, it sometimes is possible to use server-side scripting to serve a variant document to older browsers, but you can't do that on CF, so that's not an option. So, using outdated techniques is just going to cause issues... In other words, the visitors who didn't keep their browser up to date will see if the same way you do, but those who /do/ will see it differently.


I... Assume this is a troll comment? Or are you, uh, really saying that obfuscating your code (for non-security reasons) is a good thing? >.> Also, clarity is useful when updating/debugging code, so.

Wow, you ARE angry!
(And my last sentence was sarcastic, since you seemed to have missed it.)

I'm saying you should always go for the simplest, most widely compatible option.

It is a false belief that this or that HTML tag will stop being used in newer browsers. They've been saying that for the last 15 years and it was never feasible. They're still essential for large parts of the web, and nobody would want to use a browser that can't view sites that don't happen to be include all the latest bells and whistles. New browsers keep supporting old stuff, but not the other way around.

I recommend taking the simplest route. Browsers are not about to stop supporting tables any time soon. They're stable, look the same everywhere, and most importantly, are very simple to write. Barely any room for error, and if you do make a typo somewhere, you don't need a long experience to locate it from how it alters the layout.
The easier the work is, the less likely you are to make mistakes, which is a lot of the reason why HTML will still be with us for a long time.



When I design websites for small businesses, I always keep in mind that they might want to do their own maintenance later to cut costs, and that if they were pros they wouldn't have hired me in the first place. That means short source codes, style and javascript well separate from the parts they'll be editting, layouts that can stretch if they decide to add twice more text than originally. I had a "cutting edge" phase too; if anything, it taught me what not to do.
Want something even more shocking? I haven't used frames in years, but if I was facing a project where they seemed to be the best option, I would use them. Shamelessly.



@ Snorgar:
Sorry about highjacking your thread for a ridiculous argument. For all that matters, both approaches would work, I recommend mine because it's easier to work with and will look the same accross all browsers including old ones. You may find reasons to prefer Bio's approach and there's nothing wrong with it; I argue that it's not always the best option, not that it never is.

...:? Hardly! I don't get angry over stuff like HTML/etc and it seems childish to me to do so. Now I do sometimes come off as blunt or w/e, but that's only because, well, I'm a socially awkward derp. :P ...And in this particular case also because I'm quite interested in the subject matter and I sometimes go on for a long time about stuff I'm interested in without meaning to. Anyway, I'm actually really happy about most things atm, and definitely not angry at all!

Now, back to the matter at hand... I guess the real reason I use CSS/etc is that I find it easier to keep track of stuff, and also that it appeals to my sense of organization. >.> Anyway, I hope I haven't sounded like a jerk nor scared the OP away... >.>

If it's already fixed, no probs. I'd have gone for the easy/quick table solution, too. Something like,

<TABLE BORDER="0">
<TR>
<TD ALIGN="RIGHT" VALIGN="TOP" WIDTH="100" HEIGHT="248">
<img src="http://MyAngelMyDemon.thecomicseries.com/files/title_bar_blackbox.jpg">
</TD>
<TD ALIGN="LEFT" VALIGN="TOP">
<img src="http://MyAngelMyDemon.thecomicseries.com/files/title_bar_small.jpg">
</TD>
</TR>
</TABLE>

Shrug, each to their own.