1 reply [Last post]
gautamz07
gautamz07's picture
Offline
Enthusiast
Last seen: 3 years 46 weeks ago
Timezone: GMT+5.5
Joined: 2014-04-24
Posts: 265
Points: 403

hey everyone ,

i have the following htm code :

	<button class="btn">
			<span>Hey press me</span> 
        </button>	

and Other CSS that styles this perticular button now there is a slight porblem :

check out the fiddle : fiddle

now see the CSS declaration for the span :

	.btn span{
	    display:block;
		width: 100%;
		height: 100%;
		position: relative;
		left: 0;
		background: green;
	}

inspite of the display:block and width and height set to 100% , the span is still not taking the 100% width of the parent .

Why ??

Thank you .

Gautam .

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 3 hours 43 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9761
Points: 3843

?

The button element's default display value is inline-block, which shrink-wraps its content. Try changing the display to block and give it a width or let it expand to its parent's width.

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.