CODEWITHSUNDEEP
htmlcss
Ahu Son
Ahu Son

Reputation: 155

html css layout not rendering as intended

I am creating a responsive webpage.

This is what i am trying to do. jsfiddle

<div id="container">
    <div id="one">#one</div>
    <div id="two">#two</div>
    <div id="three">#three</div>
    <div id="four">#four</div>
    <div id="five">#five</div>
</div>

In desktop view I want #five to touch the bottom of #three.

When you make the screen size small (mobile view) the divs are arranged correctly in order.

How can I make #five touch the bottom of #three in desktop view?

Upvotes: 0

Views: 31

Answers (1)

Mohammad Usman
Mohammad Usman

Reputation: 39392

Remove float: right from #five and add overflow: hidden

#five {
  width:200px;
  height:70px; 
  background:#368736;
  overflow: hidden;
}


#container {
  max-width:500px;
  width:100%;
  color: #fff;
}
#one {
  width:300px;
  height:200px; 
  background:#66BCD9;
  float:left;
}
#two {
  width:200px;
  height:50px; 
  background:#A1A6E6;
  float:right;
}
#three {
  width:200px;
  height:50px; 
  background:#E3A1E6;
  float:right;
}
#four {
  width:300px;
  height:100px; 
  background:#ED5894;
  float:left;
}
#five {
  width:200px;
  height:70px; 
  background:#368736;
  overflow: hidden;
}
<div id="container">
  <div id="one">#one</div>
  <div id="two">#two</div>
  <div id="three">#three</div>
  <div id="four">#four</div>
  <div id="five">#five</div>
</div>

Upvotes: 2

Related Questions