473,386 Members | 1,786 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,386 software developers and data experts.

centering question

Does anyone know how to make a div take the width of what it contains?
NOT the width of what contains it. This is usefull when we don't know
the size of the content in advance. Thank you so much.

Alex
Feb 7 '08 #1
6 1514
On 2008-02-07, Alex K <al*********@gmail.comwrote:
Does anyone know how to make a div take the width of what it contains?
NOT the width of what contains it. This is usefull when we don't know
the size of the content in advance. Thank you so much.
Make it float: left (or right), display: table-cell, display: table, or
display: inline-block.

Of those only the first is reliable cross-browser.

Judging by the Subject line your next question is going to be how do I
centre this shrink-to-fit container. Unfortunately if you chose float
you can't.

If you need a centered shrink-to-fit block that also works in IE, the
only option is HTML tables.
Feb 7 '08 #2
In article <sl*********************@bowser.marioworld>,
Ben C <sp******@spam.eggswrote:
On 2008-02-07, Alex K <al*********@gmail.comwrote:
Does anyone know how to make a div take the width of what it contains?
NOT the width of what contains it. This is usefull when we don't know
the size of the content in advance. Thank you so much.

Make it float: left (or right), display: table-cell, display: table, or
display: inline-block.

Of those only the first is reliable cross-browser.

Judging by the Subject line your next question is going to be how do I
centre this shrink-to-fit container. Unfortunately if you chose float
you can't.

If you need a centered shrink-to-fit block that also works in IE, the
only option is HTML tables.
Perhaps OP will benefit from:

<http://netweaver.com.au/alt/shrinkTo...teringShrinkTo
Fit.html>

--
dorayme
Feb 7 '08 #3
dorayme <do************@optusnet.com.auwrote in news:doraymeRidThis-
97*******************@news-vip.optusnet.com.au:

[snip]
>
Perhaps OP will benefit from:

<http://netweaver.com.au/alt/shrinkTo...teringShrinkTo
Fit.html>
Oh is see a mistake. Silly me, what was I thinking when I used inline-box
for IE. It should be inline-block, but I suppose that is the reason I added
zoom:1; to the rule all in an effort to trigger hasLayout.

Now that is done display:inline-box; should be display:inline-block; and
since I don't recall if IE less then 6 needs zoom:1; or not I would leave
that is as well since it's in a conditional comment.

--
BootNic Friday February 8, 2008 11:40 AM
Behind every successful woman...is a basket of dirty laundry.
*Sally Poe*
Feb 8 '08 #4
In article <Xn*********************@bootnic.motzarella.org> ,
BootNic <bo************@gmail.comwrote:
dorayme <do************@optusnet.com.auwrote in news:doraymeRidThis-
97*******************@news-vip.optusnet.com.au:

[snip]

Perhaps OP will benefit from:

<http://netweaver.com.au/alt/shrinkTo...teringShrinkTo
Fit.html>

Oh is see a mistake. Silly me, what was I thinking when I used inline-box
for IE. It should be inline-block, but I suppose that is the reason I added
zoom:1; to the rule all in an effort to trigger hasLayout.

Now that is done display:inline-box; should be display:inline-block; and
since I don't recall if IE less then 6 needs zoom:1; or not I would leave
that is as well since it's in a conditional comment.
I should have picked this one up myself. Perhaps at the time I
regarded anything for IE as like a smelly rat, best left to
professional pest inspectors. That's you, Bootnic!

I have taken the opportunity to add a comment in the source for
the page you refer to. It elevates you in a style that reminds me
of the way Virgil used to describe his characters, especially
heroes. See the Aeneid. You are now "the keen-eyed Bootnic".

<g>

--
dorayme
Feb 8 '08 #5
dorayme <do************@optusnet.com.auwrote in
news:do**********************************@news-vip.optusnet.com.au:
In article <Xn*********************@bootnic.motzarella.org> ,
BootNic <bo************@gmail.comwrote:
>dorayme <do************@optusnet.com.auwrote in
news:doraymeRidThis- 97*******************@news-vip.optusnet.com.au:

[snip]
>
Perhaps OP will benefit from:

<http://netweaver.com.au/alt/shrinkTo...teringShrinkTo
Fit.html>

Oh is see a mistake. Silly me, what was I thinking when I used
inline-box for IE. It should be inline-block, but I suppose that is
the reason I added zoom:1; to the rule all in an effort to trigger
hasLayout.

Now that is done display:inline-box; should be display:inline-block;
and since I don't recall if IE less then 6 needs zoom:1; or not I
would leave that is as well since it's in a conditional comment.

I should have picked this one up myself. Perhaps at the time I
regarded anything for IE as like a smelly rat, best left to
professional pest inspectors. That's you, Bootnic!

I have taken the opportunity to add a comment in the source for
the page you refer to. It elevates you in a style that reminds me
of the way Virgil used to describe his characters, especially
heroes. See the Aeneid. You are now "the keen-eyed Bootnic".
LOL ... Not sure keen-eyed fits, after all it only took 3 months for me
to spot me own mistake.

Now me pants are back up tis time to tuck in me shirt. Tis one more
inline-box that needs to be changed to inline-block. On the URL you
provided that describes my indiscretion.

--
BootNic Friday February 8, 2008 5:46 PM
The only thing wrong with immortality is that it tends to go on
forever.
*Herb Caen*
Feb 8 '08 #6
In article <Xn*********************@bootnic.motzarella.org> ,
BootNic <bo************@gmail.comwrote:
Tis one more
inline-box that needs to be changed to inline-block. On the URL you
provided that describes my indiscretion.
Right, fixed now... was only looking at the demo mark up
before... <g>

--
dorayme
Feb 9 '08 #7

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

11
by: Jeff Thies | last post by:
I have a series of blocks that are float left that I need centered on the page. <div class="center" align="center"> <div style="width: 100 px;float: left">thumbnail 1</div> <div style="width:...
19
by: George Ziniewicz | last post by:
.. I try to use CSS when possible, though I am still learning and don't maximize its use. In particular, I still use a table to provide for a centered image in a few slideshows (though table...
7
by: Erik Schulp | last post by:
Hi all, I am trying to get a CSS defined layout to center on the page, have tried doing this with the <center></center> tags but than everything is centered, including text etc etc. What...
15
by: red | last post by:
How do I center two side by side divs ? I've been writing css pages for a while but there's one thing tha still eludes me. I can center a div with margin auto. I can place two divs side by side...
6
by: Axel Siebenwirth | last post by:
Hi, as described at http://www.quirksmode.org/css/centering.html, I try to do to centering with my site. I did exactly as told on that page but it only seems to center horizontally. My site...
3
by: John Pote | last post by:
1. Horizontal centering a <divin browser window. The current trend seems to be to place page content in a fixed width area in the middle of the browser window. How is this achieved? If I use a...
5
by: Markus Ernst | last post by:
Hello This is a test example: http://www.markusernst.ch/anthracite/ http://www.markusernst.ch/anthracite/living_divani.html After googling and experimenting for several hours, I ended up...
11
by: Cartoper | last post by:
Here is the code: http://cartoper.ueuo.com/centering.htm How do I get the big blue buttons to center themselves on Firefox and Safari on this web site? I know that the layout is a bit...
4
by: SAL | last post by:
Hello, is there a way to menu control dynamically center itself horizontally on a page? I have placed a menu control in a panel control (no ajax) and would like it to center itself. Depending on...
1
by: =?Utf-8?B?ZnJhbmt5?= | last post by:
Hello, I've created a table that has two rows that are span across three columns. The third row has three columns, each with an image. The last row is also span accross three columns. The span...
0
by: taylorcarr | last post by:
A Canon printer is a smart device known for being advanced, efficient, and reliable. It is designed for home, office, and hybrid workspace use and can also be used for a variety of purposes. However,...
0
by: Charles Arthur | last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
0
by: emmanuelkatto | last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel
0
BarryA
by: BarryA | last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
1
by: nemocccc | last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
1
by: Sonnysonu | last post by:
This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...
0
by: Hystou | last post by:
There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...
0
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...
0
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.