1

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;
}
TJXStyles
  • 267
  • 5
  • 15
  • My first question is do they truly have to be position: absolute;? What is your desired visual and functional result, as I'll bet big bucks you can do it a different way. table-cell sounds potentially applicable. – Michael Feb 26 '14 at 20:49
  • What do you mean by resize the boxes? – Huangism Feb 26 '14 at 20:50
  • 3
    May I ask why exactly are the divs absolute positioned? – LcSalazar Feb 26 '14 at 20:50
  • Hi, They require absolute positioning because I am using this as part of a bigger project where I am laying out these boxes to represent tables at a restaurant. I can't use floats because they have to be positioned specifically within the div they nested in. – TJXStyles Feb 26 '14 at 21:38
  • @TJXStyles If you're drawing a picture/floorplan, it might be better to go with a vector SVG or other image. – Alexander Lozada Feb 26 '14 at 21:42
  • I have thought of that, but the shapes I am using are very simple, so using CSS to draw basic shapes will suffice. – TJXStyles Feb 26 '14 at 21:50
  • @Huangism For Example, If I resize the box to 100px, they maintain their absolute position and just overlap. – TJXStyles Feb 26 '14 at 21:51
  • @TJXStyles - just some further clarification. We understand you're using it for a floorplan sort of thing. My next question is for what purpose may they need to be resized? To simulate putting two tables next to each other for a party in which the box would become 50px by 100px for instance? If so, what is it that's going to make that change? Is it dynamic in any way, or are you changing it later for whatever reason yourself? – Michael Feb 27 '14 at 14:55

1 Answers1

0

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.

Community
  • 1
  • 1
Alexander Lozada
  • 4,019
  • 3
  • 19
  • 41
  • 1
    Never ever recommend tables for layout. Please do not give additional page rank to disreputable sources (see: http://w3fools.com/). – cimmanon Feb 26 '14 at 21:02
  • @cimmanon Why should you never use tables for layouts? Even so, I provided two other solutions. As for linking w3schools, I encourage you to read the page and find any problems with it. I took a breeze through to check it out, and it seems fine to me. If not, I also provided an additional link to temple.edu, in case you missed it. – Alexander Lozada Feb 26 '14 at 21:06
  • What year is this that we still have people asking why you should never use tables for layout? I mean, other than the fact that the W3C said not to back in the [HTML 4 specification](http://www.w3.org/TR/html401/struct/tables.html)? http://stackoverflow.com/questions/83073/why-not-use-tables-for-layout-in-html – cimmanon Feb 26 '14 at 21:27
  • @cimmanon, I appreciate the response. I'll edit in this link you've shared with me. Still, OP never said he was using it for a page layout, so I'll keep it in my answer in case it suits his/her needs. – Alexander Lozada Feb 26 '14 at 21:37
  • Tables should only ever be used to hold tabular data, like an excel sheet. If you need or want the functionality of a table for layout purposes, use div's and use display: table/table-cell to mimic the table functionality with the div's instead. – Michael Feb 27 '14 at 14:51