Float :; not working CSS

Question

Float :; not working CSS

Navigation

#1 by (3 votes)
#2 by (2 votes)

2

I want to align these blocks horizontally, but the use of float :; not responding, what error am I making?

.fl > div{ float:left;  }

div:nth-child(1){ position:relative; width:300px; height:300px; background-color:#066;}	
div:nth-child(2){ position:relative; width:300px; height:300px; background-color:#06F;}	
div:nth-child(3){ position:relative; width:300px; height:300px; background-color:#C30;}

<div class="fl">
<div class="bk">1</div>
<div class="bk">2</div>
<div class="bk">3</div>

</div>

html css

asked by anonymous 19.06.2018 / 03:01

2 answers

2

Because the .fl has the same size as the other 300px divs.

Better to use like this:

.fl {width: 100%;}
.fl .bk {float: left;}

.bk:nth-child(1){ position:relative; width:300px; height:300px; background-color:#066;} 
.bk:nth-child(2){ position:relative; width:300px; height:300px; background-color:#06F;} 
.bk:nth-child(3){ position:relative; width:300px; height:300px; background-color:#C30;}

<div class="fl">
    <div class="bk">1</div>
    <div class="bk">2</div>
    <div class="bk">3</div>
</div>

19.06.2018 / 03:12

Postgresql Autoincrement skips 1 value when the insert is made by a function What is the difference between memcpy and snprintf?

score 3 · Accepted Answer

Your selector is wrong. It should be:

.fl > div{ float:left; }

.fl div:nth-child(1){ position:relative; width:300px; height:300px; background-color:#066;}	
.fl div:nth-child(2){ position:relative; width:300px; height:300px; background-color:#06F;}	
.fl div:nth-child(3){ position:relative; width:300px; height:300px; background-color:#C30;}

<div class="fl">
   <div class="bk">1</div>
   <div class="bk">2</div>
   <div class="bk">3</div>
</div>

By setting div:nth-child(1) you are selecting div .fl itself. If you want to select the children of .fl , add .fl to the nth-child() selectors.

Explanation:

As div is a generic selector, it will select all, regardless of the level:

<div class="fl"> nth-child(1)
   <div class="bk">1</div> nth-child(1)
   <div class="bk">2</div> nth-child(2)
   <div class="bk">3</div> nth-child(3)
</div>

See that there are two nth-child(1) , so div .fl will have the same styles in:

div:nth-child(1){ position:relative; width:300px; height:300px; background-color:#066;}

So the div s within .fl will not stay side-by-side because div .fl has the same width width 300px %.