Home/ Questions/Q 6798553
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-26T18:44:39+00:00

how to get the css floating property to work with four divs? I have

  • 0

how to get the css floating property to work with four divs? I have four divs I would like to get algin using the layout as an example,

                     div One     - div two
                     div Three   - div Four

Here is what I attempted using the following css and html code but not lining up correctly.

      <HTML>
      <HEAD>
      <TITLE>Layout Example</TITLE>
      <link rel="stylesheet" type="text/css" href="file:///C:/app3/css/custom-theme/jquery-ui-1.8.16.custom.css">
      <SCRIPT type="text/javascript" src="jquery-1.6.2.min.js"></SCRIPT>
      <style>
             .divs
             {
                width: 200px;
                height: 200px;
             }
             #one
             {
                background-color: black;
                float: left;
                color: white;
             }
             #two
             {
                background-color: blue;
                float: left;
             }
             #three
             {
                background-color: red;
                float: none;
             }
             #four
             {
                background-color: green;
                float: none;
             }

             </style>
             </HEAD>
             <BODY>
                   <div id="one" class="divs"> One </div>
                   <div id="two" class="divs"> Two</div>
                   <div id="three" class="divs"> Three </div>
                   <div id="four" class="divs"> Four </div>

             </BODY>
             </HTML>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Set them all to float: left and clear: both (or clear: left) the #third element.

    .divs
{
   width: 200px;
   height: 200px;
   float: left;
}
#one
{
   background-color: black;
   color: white;
}
#two
{
   background-color: blue;
}
#three
{
   background-color: red;
   clear: both;
}
#four
{
   background-color: green;
}

    http://jsfiddle.net/h2DHb/1/

    Another alternative could be to make a #container, with the overall height/width: 400px, then set the .divs to be height/width: 50%:

    <div id="container">
    <div id="one" class="divs"> One </div>
    <div id="two" class="divs"> Two</div>
    <div id="three" class="divs"> Three </div>
    <div id="four" class="divs"> Four </div>
</div>

#container {
   width: 400px;
   height: 400px;
}
.divs
{
   width: 50%;
   height: 50%;
   float: left;
}
#one
{
   background-color: black;
   color: white;
}
#two
{
   background-color: blue;
}
#three
{
   background-color: red;
   clear: left;
}
#four
{
   background-color: green;
}

    http://jsfiddle.net/h2DHb/2/

    • 0