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


Tags: css

Problem :

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>


Solution :

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/


    CSS Howto..

    How to have margins not offset my grid

    How to make this css readable?

    selectCheckboxMenu: items are shown with bold font

    How to make full width image responsive? (no scale / stretch)

    CSS, borders: How do I prevent a border added to a table cell from displacing neighboring cells?
    I think you'll either need to size all non border cells wider and higher by the width of the line around it. or you given them all borders and set...
    Read more

    How to center multiple div elements within a parent div?

    How do i make my nav bar transparent when I scroll down and come back when I scroll up or when I hover my mouse over is?

    How to style in IE6 CSS?

    How can I get this css to display correctly in Chrome?

    How to make the css affect the new content loaded by jquery?

    how to apply css transition to background image

    how to detect a url path with jquery and change css

    How to change the CSS from the last child?

    How to prevent div become two rows?

    How to keep image lumpted with last word in a paragraph

    CSS - How to pad an elements width by 50% of itself?

    CSS: How to add icon/image after input element

    How does the padding work in responsive CSS square?

    How to do a dynamic pulsating button in javascript?

    How can I get a CSS class selector to override the input[readonly] selector?

    How to Dynamically Fit image in screen using css

    How to have different table styles in CSS

    How to open a CSS-only popup automatically on page load/using Javascript?

    How to Auto set the height of a div using the height of another div

    How do you structure css files for a web project?

    How to restrict the css star selector * to a class and all decendants?

    How to bottom-align these divs?

    Added ellipsis for long text but it showing below the text

    How to apply a CSS class to a SVG Text element

    How to remove CSS attribute such that HTML attribute will take effect again?