resizing multiple divs in absolute positioning

I have a small problem, I have 4 divs that have a fixed width and height of 50px and positioned absolute. The sample layout is 2 x 2.

They are manually positioned with 10px gap in between them. The problem is if I need to resize the boxes, I will have to resize them individually and recalculate the space in between since they are absolute positioning and will get worse the more divs I have. I was told that Sass may help me solve this issue. So I am trying to use Sass to help but I am not sure how to go about doing this.

An example:

HTML:

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="test.css"/>
    <title></title>
</head>
<body>
    <div class="section">
        <div class="box" id="box-position-1"></div>
        <div class="box" id="box-position-2"></div>
        <div class="box" id="box-position-3"></div>
        <div class="box" id="box-position-4"></div>
    </div>

</body>
</html>

CSS:

.section {
    position: relative;
}

.box {
    width: 50px;
    height: 50px;
    position: absolute;
    border: 1px solid #000;
}

#box-position-3,
#box-position-4 {
    top: 60px;
}

#box-position-2,
#box-position-4 {
    left: 60px;
}

Answers


Instead of using absolute positioning, you can try something like float or display: inline-block (or even a table) which will make your div items flow together without having to manually adjust their distance from each other, or use individual ID's for each item.

There are multiple solutions you can try. I recommend the Table solution, but this can differ depending on your needs.

Using Float:

Check this JSFiddle

This is the easiest to set up! Just add float: left; to your .box class. This will allow the DIV elements to automatically position themselves one after another. Add margin: (number)px; in order to space these boxes a specific distance from each other.

Using inline-blocks:

Check out this JSFiddle

Same as above! Just add display: inline-block instead of the float. This will treat the divs like text, so be careful if you plan to insert these boxes in a block that contains text.

Using Tables:

This is most certianly the best way to go.

Here's a JS fiddle.

Tables are very well documented, so instead of explaining this code (which is completely different than the original) I'll provide you with some resources.

http://www.temple.edu/cs/web/tables.html

http://www.w3schools.com/html/html_tables.asp (I know people hate w3schools but this article seems fine)

Edit: Cinnamon makes the point that Tables are potentially frustrating depending on their usage. Take a look at this Stackoverflow question before you decide which method to use.

Good luck.

Another note: In your comment, you describe that you're creating a floor plan. I'd suggest using an SVG image to illustrate this, rather than HTML.


Need Your Help

get any UI element's on screen position for any application in windows

c# .net user-interface winapi

is there a way in any programming language, perhaps using the Microsoft SDK, to get the on screen position of UI elements within a window of any application ? If so, could you please provide guidance

How to debug webpage on nokia lumia 920

html css web responsive-design nokia

I created a wordpress website but I get the feedback that one of the menu's is not showing on a nokia lumia 920. Is there a way to simulate this ?