Floating Issues

[Skye McCloud]

I'm currently using a float to place select information onto the right side of a page, while other text is designed to wrap around this.

However, with the remaining text are titles, which I'm required to use a sort of "title background" on. Because of this, any titles that are in the area right beside the float are having their backgrounds stretch all the way, creating a visual effect I don't want. I'm attempting to have it that when beside the float, the title background ends at the float and a 1 pixel margin-right is applied.

[apeace]

Hey there. This post is WAY not specific enough for anyone to help you. Hard to tell what you are talking about. Post a link so we can see what you're talking about.

Is this something to do with setting a width? If you're setting title or alt on images or other things that have background, and the background is stretching, try setting a specific width for that element.

Post a link!

:D Peace

[Skye McCloud]

Sorry.

http://www.starofdestiny.com/characters2.php?nav=1

At the title "Personality", you can see a different background. You'll also notice it goes the full width of the page, underneath the right float I have.

What I want to do is have it that, when that title is going to be beside the float rather than below it, it is refitted to look normal: that is, the background colour on the title bar will end one pixel before the float, giving a small space like what I'm using IN the float.

[Declan1991]

Just a quick note on you HTML first.
Ids must be unique on the page, classes can be multiple.
You should use semantic markup. Headers (like "Personality") should be in a h1,h2,h3,h4,h5 or h6 tag.<div id="charData">Chapter Introduced: 1</div>
<div id="charData">Race: Human</div>
<div id="charData">Gender: Male</div>
<div id="charData">Age: 20</div>

<div id="charData">Accent: </div>
<div id="charData">Height: 5' 10"</div>
<div id="charData">Weight: 167 lbs</div>
<div id="charData">Blood Type: V</div>
<div id="charData">Eye Colour: Sky Blue</div>
<div id="charData">Hair Colour: Blonde</div>

<div id="charData">Marks: </div>
<div id="charData">Weapons: Excalibur (Katana)</div>
<div id="charData">Element: Cross</div>
<div id="charData">Energy Type: Unknown</div>
<div id="charData">Trait: Magic</div>
</div>
Those should be either spans or ps (I'd go with ps), and they need no ids or classes.
#charData p {
//targets those elements
}

Well I cannot think of a better way to do it than
border-left:1px solid #151C51;
on the floated element.

[ray326]

Here's a start on the semantic markup.

<dl id="charData">
<dt>Chapter Introduced: </dt><dd></dt><dd>1</dd>
<dt>Race: </dt><dd>Human</dd>
<dt>Gender: </dt><dd>Male</dd>
<dt>Age: </dt><dd>20</dd>
<dt>Accent: </dt><dd></dd>
<dt>Height: </dt><dd>5' 10"</dd>
<dt>Weight: </dt><dd>167 lbs</dd>
<dt>Blood Type: </dt><dd>V</dd>
<dt>Eye Colour: </dt><dd>Sky Blue</dd>
<dt>Hair Colour: </dt><dd>Blonde</dd>
<dt>Marks: </dt><dd></dd>
<dt>Weapons: </dt><dd>Excalibur (Katana)</dd>
<dt>Element: </dt><dd>Cross</dd>
<dt>Energy Type: </dt><dd>Unknown</dd>
<dt>Trait: </dt><dd>Magic</dd>
</dl>

[Skye McCloud]

At this time, I could care less about how the code is actually done, so long as it functions as I want it to (Since I need to get it finished within an hour or two of now). I'll worry about getting it "perfect" when that's done.

I tried it out, had to add an additional tweak to get what I needed. Thanks very much. :)

[Declan1991]

A definition list is even better.