Question

Display Inline and Centered

Asked by: Kokoglen

I made a sample page to demonstrate the problem.
http://www.commadot.com/jquery/simple.htm
 
I want to make a centered div with another div hugging it close.  (The real application is more complex, but I think this is the simplest demonstration)
 
Firefox and IE act totally differently for this page.  IE6 and IE7 act the same as each other.  What is Firefox doing?  And why can't I get any combination to do centered and tight border without explicitly declaring the width?
 
Thanks for the help.

This Question has been solved and asker verified All Experts Exchange premium technology solutions are available to subscription members.

Subscribe now for full access to Experts Exchange and get

Instant Access to this Solution

  • Plus...
  • 30 Day FREE access, no risk, no obligation
  • Collaborate with the world's top tech experts
  • Unlimited access to our exclusive solution database
  • Never be left without tech help again

Subscribe Now

Asked On
2007-04-25 at 14:20:35ID22534478
Tags

div

,

inline

,

centered

,

display

,

width

Topics

Cascading Style Sheets (CSS)

,

Hypertext Markup Language (HTML)

Participating Experts
1
Points
250
Comments
16

Trusted by hundreds of thousands everyday for fast, accurate and reliable tech support.

  • "The time we save is the biggest benefit of Experts Exchange to Warner Bros. What could take multiple guys 2 hours or more each to find is accessed in around 15 minutes on Experts Exchange." Mike Kapnisakis, Warner Bros.
  • "Our team likes having a resource that is more secure than just using Google and most experts using this service really know their stuff. It's nice to look here first versus using Google." Dayna Sellner, Lockheed Martin
  • "Anytime that I've been stumped with a problem, 9 out of 10 times Experts Exchange has either the accepted solution or an open discussion of the potential solution to the problem." Kenny Red, eBay Inc.

See what Experts Exchange can do for you.

Got a question?

We've got the answer.

Experts Exchange has been collecting answers to technology questions since 1996…3 million and counting! If you have a question, chances are we already have your answer.

Screenshot of Experts Exchange Knowledgebase

Need individual assistance?

Our experts are ready to help.

If you can't find the exact answer you're looking for, ask our exclusive community of 50,000 experts. You’ll get a personalized answer from a trusted professional.

Screenshot of Experts Exchange Knowledgebase

Want to learn from the best?

Read articles from industry experts.

Thousands of free tech tips, tricks, how-to’s and tutorials are available in our peer reviewed articles section. See for yourself how smart our experts are, no login required.

Screenshot of an Article

Working on a long term project?

Store your work and research.

Save solutions to your questions, answers you’ve discovered through searching plus helpful articles in your personal knowledgebase for easy future access.

Screenshot of Experts Exchange Knowledgebase

Access the answers to your technology questions today.

Subscribe Now

30-day free trial. Register in 60 seconds.

What Makes Experts Exchange Unique?

Members of the expert community talk about why the experience at Experts Exchange is different than what you will find anywhere else.

Trusted by the world's most respected brands.

image of each brand's logo

Faithfully serving IT professionals since 1996.

Experts Exchange Logo

Try it out and discover for yourself.

Subscribe Now

30-day free trial. Register in 60 seconds.

Related Solutions

  1. How to center with css for IE6 and IE7?
    How to center with css for IE6 and IE7? The following code works fine on "Safari" (MAC browser) and "Mozilla firefox"(PC). <html> <head> <style type="text/css"> div.centerdiv { position: absolute; margin-left: auto;...
  2. Small AJAX app works in Firefox & Opera, but not in IE6 …
    The attached test code works fine in Firefox and Opera. But in IE6 and IE7, a runtime error (unknown) is produced in: function stateChanged() on statement: document.getElementById("info").innerHTML=xmlHttp.responseText; when I click on the "Send Emails"...

Free Tech Articles

  1. WARNING: 5 Reasons why you should NEVER fix a computer for free.
    It is in our nature to love the puzzle. We are obsessed. The lot of us. We love puzzles. We love the challenge. We thrive on finding the answer. We hate disarray. It bothers us deep in our soul. W...
  2. SCCM OSD Basic troubleshooting
    SCCM 2007 OSD is a fantastic way to deploy operating systems, however, like most things SCCM issues can sometimes be difficult to resolve due to the sheer volume of logs to sift through and the dispe...
  3. Migrate Small Business Server 2003 to Exchange 2010 and Windows 2008 R2
    This guide is intended to provide step by step instructions on how to migrate from Small Business Server 2003 to Windows 2008 R2 with Exchange 2010. For this migration to work you will need the fo...
  4. Create a Win7 Gadget
    This article shows you how to create a simple "Gadget" -- a sort of mini-application supported by Windows 7 and Vista. Gadgets can be dropped anywhere on the desktop to provide instant information, ...
  5. Outlook continually prompting for username and password
    There have been a lot of questions recently regarding Outlook prompting for a username and password whilst using Exchange 2007. There are a few reasons why this would happen and I will try to cover t...
  6. Backup Exchange 2010 Information Store using Windows Backup
    There seems to be quite a lot of confusion around the ability to backup Exchange 2010 using the built in Windows Backup feature. This stems from the omission of this feature prior to Exchange 2007 s...

Cloud Class Webinars

  1. Avoiding Bugs in Microsoft Access
    Alison Balter takes and in-depth look at avoiding bugs in Access. In this webinar you will learn about using the immediate window to debug your applications, invoking the debugger, using breakpoints to troubleshoot, stepping through code, setting the next statement to execute, ...
  2. Top 10 Best New Features in Visio 2010
    Scott Helmers gives live demonstrations of the top 10 new features in Visio 2010. This webinar will teach you how to create compelling diagrams by adding shapes to the page with a single click, linking the shapes in a diagram to data in Excel (or SQL Server, or SharePoint), ...
  3. IT Consultant Business Secrets Revealed
    Michael Munger, Experts Exchange tech pro and IT consultant, pulls back the curtain on his very successful businesses and answers question on every IT consultant and business owner should know about. He shares secrets on what he did to solve the 5 most common problems in IT, ...
  4. Disaster Recovery and Business Continuity
    Quest CTO, Mike Billon, gives an overview of the steps involved in building a dunamic disaster recovery plan. Through case studies and an examination of software/hardware tooles for monitoring and testing, you'll gain a better understandin of where you are, where you want ...
  5. Organize Your Visio Diagrams with Containers and Lists
    Scott Helmers uses cross functional flowcharts, wireframe diagrams, data graphic legends and seating charts to teach you: how to ustilize all three new structured diagram components in Visio 2010, the best practices for organizeing shapes in previous version of Visio, how to organize ...
  6. How to Us Objects, Properties, Events and Methods in Microsoft Access
    Alison Dalter gives an in-depbth look at objects, properties, events and methods in Microsoft Access. In this webinar you will learn about using the object browser, referring to objects, working with properties and methods, working with object variables, understanding the ...

Join the Community

Give a Little. Get a Lot.

Join the community of experts here and help other tech pros by answering question in your area of expertise. You can earn FREE access to all Experts Exchange's premium features and resources.

Join the Community

Answers

 

by: VirusMinusPosted on 2007-04-25 at 16:37:12ID: 18978312

I'm not sure what exactly you're after,

Is it a centered div, with another div inside it taking up all the space? Is the inner div centered as well? Could you show a screenshot of what the desired layout is?

The doctype makes a big difference in browser and if they render to standards. Always try and use the strict DOCTYPE. This will go a fair way in correcting IE6's broken box model and other non-standard rendering of CSS.

and its semantically incorrect to have a block element such as a div inside any inline element, in your case a div forced as inline.

this with the strict doctype should work to get a centered div with another inside it taking up all the space (the effect is the same as 1 div with a border.. thats why i don't get what you're after)

<xmp>
Example E: Normal centered DIV with DIV inside
<div style="border: 1px solid red;width:100px;height:100px;margin:0 auto">
  <div style="height: 100%; background: yellow;">
    Text
  </div>
</div>
</xmp>
<div style="border: 1px solid red;width:100px;height:100px;margin:0 auto">
  <div style="height: 100%; background: yellow;">
    Text
  </div>
</div>

 

by: KokoglenPosted on 2007-04-25 at 16:51:47ID: 18978367

The desired effect is a centered yellow box with a red outline. Must be two seperate divs.

The "long story".  I am working on a landing page editor that sometimes takes HTML from other sources.  So I could have a "template" that might be centered including header/footer info, and then the editor I am working on would absolutely position on top of the template.  The problem is that if the template is centered, then my top left point (for positioning) must match the top left point of the template.  Thus it needs to hug it tight, and not expand 100%.

So I simplified the whole complication by saying, I have a centered block (yellow box) and I need an outer box to surround it. (red border div)

So ultimately, I need a centered yellow box with a red border.  Two divs.

I changed the DOCTYPE to XHTML strict. No Change.  I uploaded that one here
http://www.commadot.com/jquery/simpleStrict.htm

 

by: KokoglenPosted on 2007-04-25 at 16:56:05ID: 18978389

I just tried your example.  I can't declare the outer div to be 100px because I don't know in advance the width of the inner content.

 

by: VirusMinusPosted on 2007-04-25 at 17:14:31ID: 18978463

how about putting the centered block (yellow box) and the outer box (red border) both inside of a third outermost div. use this div's top left point as the reference for both divs.

OR i just thought of using min-width and min-height. try this example:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>
<head>
      <title>Untitled</title>
      <style type="text/css">
            #outer{border: 1px solid red;min-width:1px;min-height:1px;margin:0 auto}/*better browsers can use min-width and min-height to start with and expand based on inner's content dimensions*/
            * html #outer{width:1px;height:1px;} /*applies to ie6, width and height act as min-width and min-height for ie6*/
            #inner{height: 100px; width:100px; background: yellow;} /*change the width and height and the outer will still hug this*/
      </style>
</head>

<body>

<div id="outer">
  <div id="inner">
    Text
  </div>
</div>

</body>
</html>

 

by: KokoglenPosted on 2007-04-25 at 17:28:36ID: 18978588

Unfortunately, I do have to use transitional not strict, because the html sources people have are more likely to be transitional.

However, I just looked at your example in IE and FF as Strict and it didnt work.
Take a look at example E http://www.commadot.com/jquery/simple.htm

This is what I want.  Except this is flawed.  It is possible that the template is LEFT justified.  If it is, then the table would push it into the middle.  Really what I want is a way to say, "Wherever the Yellow box is, I want to put my DIV around it without expanding.  A tight border around whatever size and position the yellow box is.

 

by: KokoglenPosted on 2007-04-25 at 17:36:19ID: 18978614

Just added another example.  (F)
The red line hugs the yellow perfectly when I add Float:left.  I want everything float:left provides without moving the item to the left.  Float:middle!  What does Float do other than move left.  It is clearly doing something else.

 

by: VirusMinusPosted on 2007-04-25 at 17:39:52ID: 18978622

i think a safer option would be to have a script onload to determine the dimensions and position of the yellow box and then with script position and set the dimension of the outer box. if you can give both divs and ID and load a script onLoad, or just put it in a script block at the end of the page, you should be able to do it.

 

by: VirusMinusPosted on 2007-04-25 at 17:41:12ID: 18978628

float:left takes the element out of the normal flow of the document and puts it flush to the left of its parent container.

 

by: KokoglenPosted on 2007-04-25 at 17:41:50ID: 18978630

So no CSS only solution?  Maaaaaan. :(

What is float doing to make it work on the left?  It must be changing something about the box model, yes?

 

by: VirusMinusPosted on 2007-04-25 at 17:51:43ID: 18978663

i think you'll be hard pressed for a cross browser CSS usign floats and positioning. they can lead to problems. i would go script.

floating is not changing the box model. just taking it out of the flow. so it just fills out to its inner elements. it can't reference itself to its parent and take its width or height like in the previous examples.

I had an idea, and it might go some way.. but if you can alter the CSS on the fly it might work.

<div style="border: 1px solid red; float:left; position:absolute;left:50%;margin-left:-50px;">
  <div style="width: 100px; height: 100px; background: yellow;"></div>
</div>

but then again it would mean knowing what the width of the yellow box is which you've said you don't beforehand. thats why script to determine the width after it loads and then adjust and position seems a logical solution.

 

by: KokoglenPosted on 2007-04-25 at 17:56:50ID: 18978677

Don't forget, I need to deal with left-justified too.
The script solution is a fallback.  I definitely appreciate the effort you put in.

I don't want to give up just yet.
This is maddening but also fascinating.

Check out the example G.  What the heck is that???
In FF it created TWO bordered areas of 20px wide.
In IE it gives padding to the top and bottom but not the left and right.
This really does seem like a big hole in CSS.

 

by: VirusMinusPosted on 2007-04-25 at 18:05:07ID: 18978716

paddings and margins are not meant to work with inline elements, esp. width and left right. Firefox is doing what it can based on standards. IE as usual gets it wrong.

I look at it not so much holes in CSS, but holes in browers like IE.

 

by: KokoglenPosted on 2007-04-25 at 18:08:14ID: 18978729

Firefox seems to have extra options.  Like display:-moz-box.
This works in FF actually.  If I cant find a IE specific version of this...  Ooops, time for me to call it a day.  Ill work on this a little more, couple of days, if I can't do it, Ill accept the JS solution.

 

by: KokoglenPosted on 2007-05-01 at 09:17:02ID: 19009535

Try as I might, I can't seem to get the equivalent of display: -moz-box in IE.

Although using JS would work, I can't use it in this case.  I will have to modify the project strategy.
VirusMinus, thanks for the help and input.  Ill accept the last of your answers, which sums up the lack of answer.  Thanks again

 

by: VirusMinusPosted on 2007-05-01 at 16:47:47ID: 19012601

you're welcome :)

although a confirmation of lack of answer does not make it a 'B' grade solution

http://www.experts-exchange.com/help.jsp#hi55

 

by: KokoglenPosted on 2007-05-01 at 16:57:50ID: 19012646

I'm sorry if you felt I didn't report a grade you deserved.

I tried to be objective and honest.  I have been using e-e for 4 years and have tried to maintain the spirit and the letter of the guidelines.

Thanks again.

20120131-EE-VQP-002

3 Ways to Join

30-Day Free Trial

The Experts

98% positive feedback on 31,087 answers since March 2000. angeliii is a Microsoft Most Valuable Professional for his work with MS SQL Server & Develoment.

He has also proven his knowledge of Visual Basic Programming, PHP Scripting and Oracle Databases.

The Experts

97% positive feedback on 10,752 answers since July 2000. lrmoore has more than 18 years experience in the networking industry.

The six-time Mircosoft MVPs specialties include firewalls, virtual private networking, and network management.

Testimonials

"...and excellent source for support... Kind of like having your very own IT dept." Electriciansnet

Testimonials

"I was apprehensive at signing up at first. However... it has already made my life as an IT administrator much easier." JaCrews

Testimonials

"WOW! You guys have great, active, and knowledgeable people on here." moore50

Business Clients

Business Clients

In the Press

"If you’ve got a question... Experts Exchange can supply an answer.”

In the Press

"...an invaluable aid for both IT professionals and those who require tech support."

In the Press

"where IT professionals provide quick answers on just about any topic"

Business Account Plans

Loading Advertisement...