CSS - Help With Layout (aligning Image With List)

http://s125392025.websitehome.co.uk/layout.html

I'm working on a CSS layout(mind that this is my first time working with CSS, if something isn't right tell me, because I want to learn it right the first time), it's 2 columns, a main body and a subnav.

But I can't get the subnav to align properly with the main body. I'm not too sure how to do this, I've tried it in a X,Y fashion but I'm not sure if I was doing that right. Please help.

Edit: Finally Found it, nm.

I have put together a page with a left floating text box that text wraps around the top, right and bottom. It was going pretty well, thanks to some help I have already received, but I am having a problem with a bulleted list alignment. Please take a look at the test page below.

TEST PAGE

The relevant style code follows:

Code:

.textboxleft 
{
	background: #3E5C92;
	font: normal 0.8em/140% arial, helvetica, sans-serif;
	margin: 10px;
	width: 160px;
	border: 1px solid #E4E7F5;
	float: left;
	overflow: hidden;
	padding: 0.5em;
}
.textboxleft p
{
	color: #000000;
}
ul li
{
	color: #E0E0F6;
	font: normal 0.9em/135% tahoma, arial, helvetica, sans-serif;
}

Of course, you can also look at the complete source code and download the css file for more information. I would be happy to provide any additional information.

If there is something I can alter in the CSS or HTML to prevent the list bullets from bumping into the text box, please let me know. I am very new at this and have only gotten this far with the help of people like you.

Thank you,

Grump
PS: you will also notice another thread concerning the width of the text box. It does not render at 160px in Firefox, but does in IE.

Code:

<ul>
<li>Some text<div class="right">right</div></li>
<li>Some text<div class="right">right</div></li>
<li>Some text<div class="right">right</div></li>
</ul>

I would like to alight the above divs to the right.

I tried to do something like:

.right
{
float:right;
width: 48%;
}

But that makes them seem to fall down one line and the stack funny.

I also tried to do something line:
Code:

<ul>
<li><div class="left">left</div><div class="right">right</div></li>
<li><div class="left">left</div><div class="right">right</div></li>
<li><div class="left">left</div><div class="right">right</div></li>
</ul>

And
Code:

.left
{
float:left;
width:48%;
}
.right
{
float:right;
width: 48%;
}

But they all sorta did wierd things I didn't understand.

Then I thought perhaps the LI weren't block elements and so that's why they were getting screwed up. So i wrapped a div around both right and left, but that didn't seem to work either.

TIA, Mark

Alright, so I took advice I was receiving and made a tableless template for a site. Now I have one problem - my two columns are <div> tags, floated to the left and right. At the bottom of the page, however, I need to align the ends of the column horizontally - without using 'height' attributes that I'd have to change upon updating or changing any page. The site files are attached.

I basically need a way to end each column at the same line. Changing the entore layout of the page is not an option because I do not have the time to re-configure everything - the solution does not need to be absolutely perfect as far as CSS validation goes, but it needs to be cross-browser compatible.


Thanks in advance - you guys are always excellent with my questions no matter what I ask.

Hi,

I am using linked-in stylesheets for my webpage and have an unordered list, which is inside a div, for the phone number and email address (which is an email link) which are in the top right corner of the page. The whole page is in a container div.

I am trying to 'text-align' these two <li> elements to the right, the phone number does this but the email link just won't move to the right and is staying on the left! I have put the 'text-align: right' attribute for the 'ul' and the 'li' and the 'a' but to no avail.

The weird thing is, I also have an undordered list for my navigation which is also on the same page, running horizontal on the left side of the page, but these seem to work fine for the alignment (each link is centered nicely in their boxes).

Why won't the email link align right?!

My stylesheet code:

#garden-designer-contactbar ul {
display: block;
position:absolute;
text-align: right;
font-size: 20px;
font-family: verdana, arial, helvetica, sans-serif;
color: #666666;
left:541px;
top:0px;
width:179px;
height:51px;
margin: 0;
padding: 0;
list-style-type: none;
z-index:6;
}

#garden-designer-contactbar li {
display: block;
text-align: right;
}

#garden-designer-contactbar a {
display: block;
position:absolute;
text-align: right;
font-size: 12px;
font-family: verdana, arial, helvetica, sans-serif;
color: #666666;
font-weight: normal;
}


My page code:

<div id="garden-designer-contactbar">
<ul>
<li>020 0000 000</li>
<li><a href="mailto:email@email.co.uk?subject=Garden Design" title="email Garden Design" align="right">email@email.co.uk</a></li>
</ul>
</div>

Does anyone know what might be going on? My container div for the whole page is set to 'text-align: left' but I tried removing that attribute and it just made other text on the page that wasn't specifically aligned, centre. And the email link seemed to stay where it was.

Any help much appreciated!