CSS alignment problems

[TechBoyJK]

Hi Guys,

I'm having trouble with some alignment. I have a main div called 'left_sidebar' that has a few elements contained within it. At the top is a div that contains a user's profile pic, their name, and a link to edit their profile. Below that will be some navigation links, and some other items that will be dynamically populated depending on the page.

The div that contains the photo, name, and profile edit link is giving me some trouble.

Here's a pic of how it is currently

Here's what I'm hoping to get.

Below is the code I have. Nothing is being inherited that should affect how it's laid out or presented.

Thoughts? I'm racking my brain and can't get this right. Also.. I need the border div to expand since the height of the image will not be set in stone.

#left_sidebar 
	{
	float: left;
	margin: 0 0 .5em .5em; 
	width: 160px;

	}

#left_sidebar_border
	{
	border: 1px solid #e87b02;
	overflow: auto;
	height: 100%;
	margin: 0em 0em 1em 0em;
	}
	
#left_sidebar_pic 
	{
	margin: .5em .5em .5em .5em;
	}

#left_sidebar_name_action_container
	{
	margin: 0em 0em 0em 0em;
	}
	
#left_sidebar_name_action 
	{
	}


#left_sidebar_name 
	{
	}



<div id="left_sidebar">


	<div id="left_sidebar_border">


		<div id="left_sidebar_pic">

	

			<a href="http://details.at/members/members.cfm?q=mpv1&url=jasonallenking">

				<img style="float:left"src="http://details.at/imagehost/profiles/539/xs_IMAG0513.jpg">

			</a>

		

		</div>



		<div id="left_sidebar_name_action_container">


			<div id="left_sidebar_name">

				<span class="mediumboldtext">

					<a href="http://details.at/members/members.cfm?q=mpv1&url=jasonallenking">
						Jason King
					</a>

				</span>

			</div>

	

			<div id="left_sidebar_name_action">

				<span class="mediumtext">
					<a href="http://details.at/members/members.cfm?q=pbi">edit profile</a>

				</span>

			</div>		

		</div>

	</div>


</div>

 

[Broheim]

before Ispend too much energy on this, does it look wrong in all browsers?

 

[TechBoyJK]

before Ispend too much energy on this, does it look wrong in all browsers?

yea, exactly the same in Chrome, FF, and IE

 

[Broheim]

have you tried adding some padding to the #left_sidebar_border div, might be the easiest fix

 

[911paramedic]

If this is the address you are talking about: http://details.at/members/members.cfm?q=mpv1&url=jasonallenking (pulled from your code) it looks like its working fine with FF6.

 

[PhatoseAlpha]

Remove div #left_sidebar_pic entirely, moving the anchor inside up a level. Give the profile img itself a class, float it left and put .5em margins all around. Float #left_sidebar_name_action_container left. Remove 100% height from #left_sidebar_border

 

[911paramedic]

BTW, if you post the entire HTML for that page I will look at it, but I'm not going to construct the page and then fix it. 🙁

 

[TechBoyJK]

hey... wait a sec.. might have it figured out

 

[TechBoyJK]

yea guys hang tight.. making some recommended changes.

 

[TechBoyJK]

thanks

 

[TechBoyJK]

got it! thanks!