CSS Positioning Issues...

Posted on 2011-03-10
Last Modified: 2012-05-11
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 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.
Question by:mikegeorge2
LVL 16

Assisted Solution

SSupreme earned 50 total points
ID: 35101314
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=""></a></p>
<a href="">				
<a href="">						</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">(</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?
LVL 83

Assisted Solution

by:Dave Baldwin
Dave Baldwin earned 100 total points
ID: 35101476
Positioning is difficult because a lot of it is not intuitive.  W3Schools has a good section on CSS and Quirks Mode 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.
LVL 23

Assisted Solution

jeremyjared74 earned 100 total points
ID: 35101543
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:
Live: Real-Time Solutions, Start Here

Receive instant 1:1 support from technology experts, using our real-time conversation and whiteboard interface. Your first 5 minutes are always free.


Author Comment

ID: 35101800
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!

Accepted Solution

A_Nilsson earned 250 total points
ID: 35101875

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=""></p>
<p><a href=""></a></p>

Good luck!
LVL 83

Expert Comment

by:Dave Baldwin
ID: 35101925
You need to check your page in Firefox because it is broken there.

Featured Post

Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Having a little issue with EDGE/IE CSS display of after 2 38
How to get this page layout correct 13 28
Bottom border change 5 13
Box Locations 6 16
"I want to put my photos online, but I don't want them stolen.  What settings should I use?" When You Put Photos Online First and foremost, any digital file published on the WWW can be copied, stored, modified, retransmitted, etc.  Remember Naps…
Creating a CSS block that only applies to printing By default, all of your CSS applies to every possible view of your page - whether on screen, printed, landscape, touch-screen, or whatever.  You can, however, add CSS that only applies under certai…
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at Browse or search based on font properties or name to find a suitable font for…

813 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

10 Experts available now in Live!

Get 1:1 Help Now