Mon, 2015-06-08 09:05
hey guys have a look at the below HTML and CSS ::
<div class="logo-holder"> <div class="logo-wrapper"> <img src="http://upload.wikimedia.org/wikipedia/commons/4/48/EBay_logo.png" alt="looking good furniture logo"> </div> <div class="banner-social-icons"> <i class="fa fa-facebook"> </i> <i class="fa fa-twitter"> </i> </div> </div> <!-- end of logo holder -->
CSS ::
.logo-holder { display: table; width: 100%; } .logo-holder > div { display: table-cell; vertical-align: middle; } img { max-width: 200px; width: 100%; display: block; }
now see how i have made the two child divs under .logo-holder as display:table-cell , now when i check in inspect element i was expecting the two child divs under .logo-holder to be 50% of thier parent div's width each , instead i see that the two child divs are unevenly devided . WHY So ?
Mon, 2015-06-08 19:58
#1
Hi gautamz07 It explains in
Hi gautamz07
It explains in the specs how the table cell widths are calculated.
http://www.w3.org/TR/CSS21/tables.html#width-layout
Mon, 2015-06-08 20:57
#2
ebay img is huge!
Always! Always crop and scale your images to a reasonable size before use. The width of 1000px+ is not reasonable. The table will try to accommodate that excessive width, then apply the css. The width property for table and table cell is a suggestion only; think of it as a min-width.
Try this change:
.logo-holder > div { display: table-cell; text-align: center; vertical-align: middle; outline: 1px dotted red; width: 50%; } img { max-width: 200px; }
You're not reading the specs every day at bedtime. 
What you learn today may make something you half knew from last week crystal clear, and vice versa.
cheers,
gary
Mon, 2015-06-08 23:31
#3
gary.turner wrote: Always!
Always! Always crop and scale your images to a reasonable size before use. The width of 1000px+ is not reasonable. The table will try to accommodate that excessive width, then apply the css. The width property for table and table cell is a suggestion only; think of it as a min-width.
Try this change:
.logo-holder > div { display: table-cell; text-align: center; vertical-align: middle; outline: 1px dotted red; width: 50%; } img { max-width: 200px; }
You're not reading the specs every day at bedtime. What you learn today may make something you half knew from last week crystal clear, and vice versa.
cheers,
gary
+1 on this, images should be optimized.
Tue, 2015-06-09 05:37
#4
Thanks tony and gary
@tony thanks for the link
@gary , "You're not reading the specs every day at bedtime" .. LOL , i'll try too and about the image width , i usually compress my images and leave nothing above a 60-100kb on a live website , this was just for demo purpose . Thanks for your inputs though .
Thanks alot guys !
Tue, 2015-06-09 16:57
#5
Even for demos
The oversized image grossly distorts the table's structure. A table always tries to accommodate its content. Yes, you can override the native size; usually, but don't depend on it. You are at the mercy of the visitor's UA. Make thing that work at the simplest level first.
cheers,
gary
Wed, 2015-06-10 07:28
#6
Thanks gary
Thanks gary , you are always so insightful ! but
"You are at the mercy of the visitor's UA".
can you explain the above line though in the current context ? i mean i have not resized the image (i should have , i agree) , but how am i at the mercy of the users UA.
Wed, 2015-06-10 16:41
#7
By that
I mean the capabilities and limitations of the UA (user-agent/browser) in use by your visitor.
gary