Question

I’m having to issues lining up items properly in my html code. I am not sure why they are not lining up the way I want them to. I didn’t design this site I am just adding to it. Also this a word press page and I don’t have access to change the site wide css so I was using inline css because <style> tags go in the page header which I don’t have access to. Sorry I should have pulled the CSS out before posting the question so it was easier to follow. But I’m a programmer not a web designer, I don’t always remember that you shouldn’t use ids multiple times.

The first problem, I am having is lining up 4 items on my website. I have 2 text strings and image and a horizontal rule. I want the first string justified left, the second string justified right with the image to it’s right. I then want the <hr> to be right under that. I tried to do this by putting the first string in on div and the second string with the image in another a separate div. What I am got was 3 lines. The first string justified left on one line. The second string justified right with the image on the second line and the <hr> on the line below. I have tried playing with different alignment settings in html attributes and in css but I cannot seem to get rid of the line break after the first string. What am I missing? I know this should be simple? Could it be the wordpress css?

my second problem is similar. I have a table cell with an image in it (x in a box). I can get the image to justify right but I’m having a problem getting it to vertically align to the top of the td. What am I missing?

Here’s some example html: Is this easier to follow?

CSS:

table#one {
    width=900px; 
    margin-left: auto; 
    margin-right: auto;
}
div#div1 {
    font-size: 1em; 
    line-height: 1em; 
    font-weight: bolder; 
    padding: 0px;
}
td#td1 {
    border: none; 
    background-color: #f8d3cf; 
    width:125px; 
    height:80px; 
    border-spacing: 10px; 
    padding:0;
}
div#div2 {
    padding:0; 
    vertical-align:top;
}
a#a1 {
    padding: 0px;
}
img#img1 {
    padding: 0px;
}
td#td3 {
    border: none; 
    width:10px;
}
td#td4 {
    border: none; 
    font:.6em Arial, Helvetica, sans-serif; 
    width:125px; 
    height:20px;
}

HTML:

<table id="one">
    <tr>
        <td>
            <div id="div1">My Color Library</div>
            <div align="right" class="removeall">
                <a href="colors">
                    <img src="http://www.2100computerlane.net/workingproject/images/x-button.png" />
                    <bold>&nbsp;Remove All</bold>
                </a>
            </div>
            <HR/>
            </p>
            <div class="mycolor">
                <table><!--width="900px"  -->
                    <tr>
                        <td id='td1' align="right" valign="top"><a href="f8d3cf" id="a1"><img src="http://www.2100computerlane.net/workingproject/images/x-button.png" /></a></div></td>

                    </tr>   
                    <tr>
                        <td  id="td4">Desert Warmth<br/>70YR 56/190 A0542</td>                                                  
                    </tr>

                </table>

            </div>
        </td>
    </tr>
</table>

Answer 1

To answer your first issue, in your code you have two DIV elements:

<div id="div1">My Color Library</div>
<div align="right" class="removeall">
    <a href="colors">
        <img src="images/x-button.png" />
        <bold>Remove All</bold>
    </a>
</div>

DIV’s are block-level elements, which means that adjacent DIV’s are stacked vertically. So, the gap below the title is actually the area of the second DIV.

I believe you want this:

<div id="div1">
    My Color Library
    <div class="removeall">
        <a href="colors">
            <img src="images/x-button.png" />
            <bold>Remove All</bold>
        </a>
    </div>
</div>

CSS:

.removeall {
    float: right;    
}

So, just place the second DIV inside the 1. DIV, and float it to the right.

Regarding your second issue, this CSS should do the trick:

#td1 {
    vertical-align: top;
}

#td1 img {
    vertical-align: top;   
}

Live demo: http://jsfiddle.net/BrR2c/12/show/