• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 266
  • Last Modified:

CSS Positioning Issues...

Hi All...two questions for you....

1. I'm pretty new to CSS and web design and I can't figure out why some of my elements won't position correctly. The "side-bar" content is supposed to be to the right of the main-content. When I give it the position: absolute CSS tag...it is pushed out of the main-content completely and rests in the footer area. Here is the site:


While I'm at it...I do wonder where a really good tutorial that sufficiently explains positioning can be found. I still have some trouble grasping this idea.

2. At the top of the navigation is a colored bar that matches the home bar. I have no idea why that exists and how to get rid of it.

Thank you all very much in advance.
4 Solutions
Replace part of your markup with this part
<div class="group" id="page-wrap">
			<div id="logo"></div>
			<h1>Nina Penny</h1>
			<p class="phone"><span class="skype_pnh_print_container">480.635.2410</span><span class="skype_pnh_container" dir="ltr" tabindex="-1"><span class="skype_pnh_mark"> begin_of_the_skype_highlighting</span>&nbsp;<span class="skype_pnh_highlighting_inactive_common" title="Call this phone number in United States of America with Skype: +14806352410" dir="ltr"><span class="skype_pnh_left_span" skypeaction="skype_dropdown">&nbsp;&nbsp;</span><span class="skype_pnh_dropart_span" title="Skype actions" skypeaction="skype_dropdown"><span class="skype_pnh_dropart_flag_span" style="background-position: -5849px 1px ! important;" skypeaction="skype_dropdown">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>&nbsp;&nbsp;&nbsp;</span><span class="skype_pnh_textarea_span"><span class="skype_pnh_text_span">480.635.2410</span></span><span class="skype_pnh_right_span">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span></span>&nbsp;<span class="skype_pnh_mark">end_of_the_skype_highlighting</span></span></p>
			<p><a href:=""></a><a href="mailto:nhpenny@msn.com">nhpenny@msn.com</a></p>
<a href="mailto:nhpenny@msn.com">				
<a href="mailto:nhpenny@msn.com">						</a><li><a href="#">Home</a><span></span></li>
						<li><a href="#">Refinancing</a><span></span></li>
						<li><a href="#">Reverse Mortgages</a><span></span></li>
						<li><a href="#">Mortgage Programs</a><span></span></li>
						<li><a href="#">Nina's Blog</a><span></span></li>
			<div id="main-content">
				<h3>Hello. My name is Nina Penny. </h3>
			<p>	I'm the mortgage broker who specializes in 
				customer service. With over 10 years experience, I offer the expertise to find the 	best options available for your mortgage needs.</p>

			<p>	If you are considering a home purchase; a refinance; or interested in learning about reverse mortgages, I can help make sense of the options available to you.</p>

			<p>	My clients know I'm true to my word and someone they can trust. <a href="#">(View testimonials) </a>Call (<span class="skype_pnh_print_container">480.635.2410</span><span tabindex="-1" dir="ltr" class="skype_pnh_container"><span class="skype_pnh_mark"> begin_of_the_skype_highlighting</span>&nbsp;<span dir="ltr" title="Call this phone number in United States of America with Skype: +14806352410" class="skype_pnh_highlighting_inactive_common"><span skypeaction="skype_dropdown" class="skype_pnh_left_span">&nbsp;&nbsp;</span><span skypeaction="skype_dropdown" title="Skype actions" class="skype_pnh_dropart_span"><span skypeaction="skype_dropdown" style="background-position: -5849px 1px ! important;" class="skype_pnh_dropart_flag_span">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>&nbsp;&nbsp;&nbsp;</span><span class="skype_pnh_textarea_span"><span class="skype_pnh_text_span">480.635.2410</span></span><span class="skype_pnh_right_span">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span></span>&nbsp;<span class="skype_pnh_mark">end_of_the_skype_highlighting</span></span>) or email <a href="mailto">(nhpenny@msn.com)</a> anytime to discuss your mortage needs.</p>

				<h3>I will work evenings and weekends to earn your business. </h3>
					<div class="widget">
						<div class="sidebar-post">
							<h4><em>Latest Post</em></h4>
							<div class="date">March 21, 2011</div>
							<h5>Reverse Mortgage Rates at all time lows!</h5>
							<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
						<div class="post">	<a href="#">View post</a></div>
						<div class="widget industry-news">

							<h4><em>Industry News</em></h4>

							<div class="sidebar-post">
								<div class="date">March 16, 2010</div>
								<h5>Why Refinancing is Good</h5>
								<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
							<div class="post">	<a href="#">View post</a></div>
						</div> <!--End main content-->	

Open in new window

Existed markup has problems with proper closing divs

Could you please make screenshot of colored bar?
Dave BaldwinFixer of ProblemsCommented:
Positioning is difficult because a lot of it is not intuitive.  W3Schools has a good section on CSS http://www.w3schools.com/css/default.asp and Quirks Mode http://www.quirksmode.org/compatibility.html can show you some of the differences in the way that the browser interpret CSS.

In addition, you're trying to do it with HTML5 tags and I don't think any browser fully supports HTML5 yet.  HTML5 is expected to be adopted in 2014 last I read.   IE8, Firefox, and Chrome show your page quite differently.
If you are using <div>'s and floats the property of surrounding elements are effected by the child elements. This is always a trouble spot for new designers (it was for me). I learned a lot from one of the best websites for learning about CSS call "A List APART".

Here is the link:
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

mikegeorge2Author Commented:
Thanks guys. Sometimes I guess just a second set of eyes helps one to notice something as simple as a missing closing tag.

@SSupreme..I copied and pasted the Skype code but it doesn't seem to be working right on the page. Is it a click that automatically calls? I am not very familiar with it. I think my client will mostly be dealing with senior citizens so I'm not sure if I need that extensive technology attached to the site. But it is something I will definitely use in the future. I've attached a screenshot of the bar...I use Chrome as my default browser and that's where the bar appears...I checked it in Safari and the bar doesn't appear. Weird.

Thank you @DaveBaldwin and @jeremyjared74. I will check out both of those links!

Question 1:

It is not necessary to use 'position: absolute', actually this will make the code more difficult to maintain. Here is a solution that will work:
1. Put the <aside> outside of the <div id="main-content">. This is done by moving the line '</div> <!--End main content-->'  to before the opening '<aside>' tag. Thereafter, you might need to adjust margin and width, but that will be easy.

Position: absolute specifies that the left, right, top, and bottom properties should be interpreted in respect to the parent element (that the element is inside of). For example, if used together with 'left:100px; top:150px;' means that the element places itself 100 pixels from the left edge of the outside div, and 150 pixles from the top of the outside div.
Position: relative specifies that the left, right, top and bottom properties is interpreted as 'from what would be natural'. For example, "left: -50px" places the element 50 pixles to the left of its natural position.

Question 2:
Here, there was a little mess with the a and p tags. Change the following:
<p><a href:"<a href="mailto:nhpenny@msn.com">nhpenny@msn.com</p>
<p><a href="mailto:nhpenny@msn.com">nhpenny@msn.com</a></p>

Good luck!
Dave BaldwinFixer of ProblemsCommented:
You need to check your page in Firefox because it is broken there.

Featured Post

Hire Technology Freelancers with Gigs

Work with freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely, and get projects done right.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now