Float left is blocked and not aligned to left

StackOverflow https://stackoverflow.com/questions/14416782

  •  16-01-2022
  •  | 
  •  

Question

Consider the code below

<!DOCTYPE html>
<html lang="en">
  <head>
    <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css" rel="stylesheet">  
  <style>
     #block0 {
      width:400px
     }

     #block1, #block2, #block3 {
       float: left;
       display:inline;
     }

     #block1 {
        background-color:red;
        width:48%;
        height:200px;
      }

      #block2 {
        background-color:blue;
        width:48%;
        height:120px;
      }

      #block3 {
        background-color:green;
        width:48%;
        height:140px;
      }

  </style>

  </head>
  <body>

      <div id="block0">
          <div id="block1"></div>

          <div id="block2"></div>

          <div id="block3"></div>
      </div>

  </body>
</html>

How to make the block3(green) block align to the left and make it under the block1(red) block, and with the limitations:

  1. without adding extra HTML markup
  2. if need to apply new css, need to apply to all blocks

Example: http://jsfiddle.net/L4VWq/

Update: limitations

Was it helpful?

Solution 2

add a clear: left to the css for block3

  #block3 {
    background-color:green;
    width:48%;
    height:140px;
    clear: left;
  }

OTHER TIPS

 #block1, #block2, #block3 {
   display:inline-block;
   vertical-align: top;
 }

(no float)

To fight the space left from the markup you can also add a negative right margin as outlined here: http://css-tricks.com/fighting-the-space-between-inline-block-elements/

Simply add clear:both; to #block3

See the revised fiddle.

(http://jsfiddle.net/tech0925/L4VWq/1/)

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top