CODEWITHSUNDEEP
htmlcss
Tanjore Raj
Tanjore Raj

Reputation: 155

css div positioning with float

I have a div container of width and height 420px inside that container i have 4 small div's with width 140px and height 140px but 2nd divs height is 170px.if i apply css float property float:left to all the divs except container div. Q1).where will the 4th div sit. Q2).if i want the 4th div to come below 1st div how can i do it without using position:absolute or relative.

<div class="container">
  <div class="section1"></div>
  <div class="section2"></div>
  <div class="section3" ></div>
  <div class="section4"></div>
</div>

css

.container{width:420px;height:420px;border:1px solid black;}
.section1{width:140px;height:140px;background-color:green;float:left;}
.section2{width:140px;height:170px;background-color:yellow;float:left;}
.section3{width:140px;height:140px;background-color:red;float:left;}
.section4{width:140px;height:140px;background-color:orange;float:left;}

Here is the link for my code JSFiddle

Upvotes: 0

Views: 99

Answers (2)

Rohit Azad Malik
Rohit Azad Malik

Reputation: 32202

Define your .section4{clear:left;}

Demo

.container{width:420px;height:420px;border:1px solid black;}
.section1{width:140px;height:140px;background-color:green;float:left;}
.section2{width:140px;height:170px;background-color:yellow;float:left;}
.section3{width:140px;height:140px;background-color:red;float:left;}
.section4{width:140px;height:140px;background-color:orange;float:left;}


.section4{clear:left;}
<div class="container">
  <div class="section1"></div>
  <div class="section2"></div>
  <div class="section3" ></div>
  <div class="section4"></div>
</div>

2nd option your can try to display:inline-block as like this 

.container{width:420px;height:420px;border:1px solid black;font-size:0;}
    .section1{width:140px;height:140px;background-color:green;display:inline-block;vertical-align:top;font-size:12px;}
    .section2{width:140px;height:170px;background-color:yellow;display:inline-block;vertical-align:top;font-size:12px;}
    .section3{width:140px;height:140px;background-color:red;display:inline-block;vertical-align:top;font-size:12px;}
    .section4{width:140px;height:140px;background-color:orange;display:inline-block;vertical-align:top;font-size:12px;}
    <div class="container">
      <div class="section1"></div>
      <div class="section2"></div>
      <div class="section3" ></div>
      <div class="section4"></div>
    </div>

Upvotes: 2

n-dru
n-dru

Reputation: 9440

Add clear: both to your 4th div:

https://jsfiddle.net/8kyed4fx/1/

Upvotes: 0

Related Questions