Home/ Questions/Q 5845407
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-22T12:25:48+00:00

I am trying to place two divs next to each-other on the same line,

  • 0

I am trying to place two divs next to each-other on the same line, have a break and then have another full block div.

Here is what I have so far
body code

<body>
    <div class="noFloat">
        <div class="square bgBlue ltFloat">I'm Blue</div>
        <div class="square bgGreen ltFloat">I'm Green</div>
    </div>  
    <div class="dvCenter">I'm in the middle</div>
    <div class="dvCenter">I'm in the middle</div>
</body>

css

body {
    background-color: red;
}
.square {
    width: 100px;
    height: 100px;
}
.bgBlue {
    background-color: blue;
}
.bgGreen {
    background-color: green;
}
.dvCenter {
    float: none;
    margin: auto;
    width: 300px;
    background-color: purple;
}
.ltFloat
{
    float: left;
}
.noFloat
{
    display: block;
    float: none;
}

I am very stuck as to why this won’t work correctly. Any help is greatly appreciated 🙂
By break I intended to have the two left floated divs sharing no horizontal space with the centered divs.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Change the .noFloat rule to

    .noFloat
{
    display: block;
    float: none;
    overflow:auto;
    clear:both;
}

    demo at http://jsfiddle.net/gaby/53vVP/1

    Alternatively you can set clear:left; on the .dvCenter rule.

    demo at http://jsfiddle.net/gaby/53vVP/

    • 0