Solved

Position <div> with CSS using margin-top with percentage

Posted on 2013-06-06
10
466 Views
Last Modified: 2013-06-06
Here is my test page:
http://secure.bbdesign.com/watersedgepa

See attached screenshot. I am getting inconsistent placement of one of my elements (I added a red border around it for easier identification).

The element is <div id="contentwrapper"> and is styled like this:

div#contentwrapper{
position:absolute;
top:0;
left:50%;
margin:30% 0 0 -30em;
padding-bottom:2.5em;
width:60em;
border:1px solid #c00;}

I'm sure the problem is the 30% margin-top.

The reason for the percentage is that we are trying to change the position of various elements over the background image, depending on the browser window's size and proportions. A percentage seemed to be the way to go.

It basically works the way we want, however with Safari is much higher up than in any other browser. All others appear to be about the same (including IE).

I'm not sure I understand 100% how a percentage in margin-top is supposed to work. Is there something I can modify in my CSS that will make this more consistent? Or is this an inherent browser inconsistency problem that I will need to find a workaround for?

Thank you!
1.jpg
0
Comment
Question by:bbdesign
  • 4
  • 4
  • 2
10 Comments
 
LVL 9

Expert Comment

by:Ishaan Rawat
Comment Utility
try this...

div#contentwrapper{
margin-top:30%;
margin-left: -30em;
}

Open in new window

0
 

Author Comment

by:bbdesign
Comment Utility
I tried that. It should be semantically identical, though, correct? It doesn't seem to have any effect.
0
 
LVL 9

Expert Comment

by:Ishaan Rawat
Comment Utility
Try adding position: relative instead of position:absolute to div#contentwrapper
0
 

Author Comment

by:bbdesign
Comment Utility
That moves things around a bit, but its still inconsistent from Safari to all other browsers, by the same amount.
0
 
LVL 9

Accepted Solution

by:
Ishaan Rawat earned 500 total points
Comment Utility
Sorry about the guessing.. but I don't have safari...

so try this this might work 80% chances...

div#contentwrapper {
position: absolute;
top: 50%;
left: 50%;
margin-left: -30em;
padding-bottom: 2.5em;
width: 60em;
border: 1px solid #c00;
}
0
How to improve team productivity

Quip adds documents, spreadsheets, and tasklists to your Slack experience
- Elevate ideas to Quip docs
- Share Quip docs in Slack
- Get notified of changes to your docs
- Available on iOS/Android/Desktop/Web
- Online/Offline

 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
Comment Utility
I think you would be better of using media queries https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries
0
 

Author Comment

by:bbdesign
Comment Utility
IshaanRawat - yes, it had occurred to me to try putting it in "top" instead of "margin-top", but still no effect.

Padas - do you mean I should try to detect the Safari browser and give it a different percentage? I normally only use Media Queries when doing responsive web design for browser widths.

It seems Safari calculates its percentages based on the parent element differently from other browsers?

Thanks!
0
 
LVL 9

Expert Comment

by:Ishaan Rawat
Comment Utility
Yp for that try this...

if ($.browser.safari) {
    $("#contentwrapper").css("margin-top", "50%");
}

but make sure to use it with jQuery version < 1.9   ....
Because jQuery has disabled that since 1.9

See here... http://api.jquery.com/jQuery.browser/
0
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
Comment Utility
That might be the easier route even though the site it's self is not responsive.
0
 

Author Comment

by:bbdesign
Comment Utility
Actually, while playing around with this, I have realized that top:30% does seem to fix this. It didn't affect Safari, but it did actually "fix" the other browsers so they are now consistent. I don't know why I didn't notice this before. For now, I think we are good to go.

Thanks again!
0

Featured Post

IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

Suggested Solutions

Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
In this tutorial viewers will learn how to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…
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…

772 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

11 Experts available now in Live!

Get 1:1 Help Now