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
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
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:
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.


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

On Demand Webinar - Networking for the Cloud Era

This webinar discusses:
-Common barriers companies experience when moving to the cloud
-How SD-WAN changes the way we look at networks
-Best practices customers should employ moving forward with cloud migration
-What happens behind the scenes of SteelConnect’s one-click button

Question has a verified solution.

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

Unordered lists (HTML ul tags) are very handy to create menus of all types, shapes and sizes.  All it takes is a little knowledge of CSS and the possibilities are endless. First off, you should know the general format for menus created using the …
As a result of several questions about how to use Bootstrap I thought it would be a good idea to write down the development aspect of creating a Bootstrapped website in as little time as possible. Part 1 of this article will only concentrate on g…
In this Micro Tutorial users will learn how to embed custom fonts into websites using @font-face in CSS Select a font: Ensure the EULA allows you to use @font-face: Download the font: Get the browser-compatible files you need: Edit your CSS       - Name …
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
Suggested Courses

632 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