Home/ Questions/Q 7947519
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-04T01:27:16+00:00

This seems like it should be easy, but I can’t get it to work

  • 0

This seems like it should be easy, but I can’t get it to work :/
The total width of all the elements is less than 100%, so why dont they all fit nicely together next to each other?

edit sorry if I wasn’t clear. Why does the 3rd blue .square go underneath and stay on the right — instead of being pushed back to the left to underneath the 1st blue .square?

Any help would be greatly appreciated!

<div class="outer">
    <div class="square"></div>

    <div class="bigsquare"></div>

    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
</div>

.outer {position:absolute;width:80%;left:10%;height:100%;border:solid black 2px;
}
.square {
    height: 16%;width: 19%;border-radius: 0px;border:solid 1px #262626;float: left;margin:0px;overflow: hidden;position: relative;padding:0px;background-color:blue;
}

.bigsquare { height: 50%;    width: 57%;border-radius: 6px;background-color:green;border:solid 0px #262626;float: left;    overflow: hidden;position: relative;
    padding:0px;
}
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    UPDATED:

    “Float: left” doesn’t make them the element line up to the left margin, they go as far left as they can until they meet another element to block them. In this case the blue divs float left until they meet the green div.

    You could use absolute positioning or arrange as 3 “columns”: left col with blue div; middle col with blue divs, green div, blue divs; and last col with blue divs

    Update 2:

    Maybe if you think of them as building blocks it might help. The blue-green-blue fits across the top row. The next blue doesn’t so it moves down.It tries to go over to the left margin but the green block is in the way and it can’t go through the green block. Does that make sense?

    • 0