1 reply [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 CSS below :

                .wrap {
				overflow: hidden;
			}
 
			.float-4 {
				float:left;
				width:33.3333333%;
				min-height: 300px;
			}
			div .float-4:nth-child(odd) {
				background: #eee;
			}
			div .float-4:nth-child(even) {
				background: #444;
			}
 
			.v-height {
				height: 350px;
				background:red;
			}

and have a look at the HTML code below :

 
              <div class="wrap">
 
			<div class="float-4"></div>
			<div class="float-4"></div>
			<div class="float-4"></div>
 
			<div class="v-height"></div>
 
			<div class="float-4"></div>
			<div class="float-4"></div>
			<div class="float-4"></div>
 
		</div>	

now why is there not a gap after the 1st 3 float-4's , should't v-height be causing a gap inbetween ?

I played around the styles of

and if i add the following styles to it :

.v-height {
				height: 350px;
				background:red;
				width: 100%;
				float: left;
			}

why does just the below declaration , not work :

.v-height {
				height: 350px;
				background:red;
 
			}

I.E. Why does height:350px , not work ?

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

Just because?

The .v-height div does not have a block formatting context, so lies behind the floats.

It would wrongly act as you expect in IE<8, as height would confer haslayout1 on the div in crap IEs.

cheers,

gary

1. MSFT's buggy version of block formatting context

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