7 replies [Last post]
gautamz07
gautamz07's picture
Offline
Enthusiast
Last seen: 4 years 45 weeks ago
Timezone: GMT+5.5
Joined: 2014-04-24
Posts: 265
Points: 403

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 ?

FIDDLE HERE

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 3 days 4 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5343
Points: 2964

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

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 21 weeks 4 days ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

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;
}
The text-align and the outline are added to improve the demo's clarity.

You're not reading the specs every day at bedtime. Wink What you learn today may make something you half knew from last week crystal clear, and vice versa.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

bgmhq
bgmhq's picture
Offline
newbie
Seattle
Last seen: 6 years 7 weeks ago
Seattle
Timezone: GMT-7
Joined: 2015-06-08
Posts: 1
Points: 1

gary.turner wrote: Always!

gary.turner wrote:

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;
}
The text-align and the outline are added to improve the demo's clarity.

You're not reading the specs every day at bedtime. Wink 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.

gautamz07
gautamz07's picture
Offline
Enthusiast
Last seen: 4 years 45 weeks ago
Timezone: GMT+5.5
Joined: 2014-04-24
Posts: 265
Points: 403

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 !

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 21 weeks 4 days ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

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

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

gautamz07
gautamz07's picture
Offline
Enthusiast
Last seen: 4 years 45 weeks ago
Timezone: GMT+5.5
Joined: 2014-04-24
Posts: 265
Points: 403

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.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 21 weeks 4 days ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

By that

I mean the capabilities and limitations of the UA (user-agent/browser) in use by your visitor.

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.