Home/ Questions/Q 9167413
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-17T15:23:04+00:00

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

  • 0

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

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    add a clear: left to the css for block3

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