Basic layout and margins etc

I have this very basic layout:

http://page-test.co.uk/box.html

How is the best way to do it so everything is aligned correctly? I want boxes to match up on both the left and right edges and with a % margin between them. I also want this to happen at anything as low as 300px wide and up to 190px wide. If you adjust the width of my example it’s all over the place.

I’m guessing this is simple, but I can’t get the hang of it.

Thanks

Do you insist on a percent margin between the boxes or would a fixed margin be satisfactory?


<!DOCTYPE html>
<html>
<!--

-->
<head>
    <title>old school</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta http-equiv="content-language" content="en-us">
    <style type="text/css">

.row {
    display:table;
    width:100%;
    border-spacing:8px 4px;
}
.row div {
    display:table-cell;
    width:20%;
    height:30px;
    border:1px solid #080;
    background-color:#cfc;
    text-align:center;
}

    </style>
</head>
<body>

<div class="row">
    <div>text</div>
</div>
<div class="row">
    <div>text</div>
    <div>text</div>
</div>
<div class="row">
    <div>text</div>
    <div>text</div>
    <div>text</div>
</div>
<div class="row">
    <div>text</div>
    <div>text</div>
    <div>text</div>
    <div>text</div>
</div>

</body>
</html>

Hi. Thanks.

I’m fine with the fixed margin. Just wondering, you put the title of the page as ‘old school’, is this because it’s old coding standards?

I seem to be getting different ideas for this problem from different people.

The fact I notice the use of display:table-cell, is that modern standards as I know the use of the HTML <table> tag isn’t modern standards. Is this the same thing?

Thanks again for the help.

ronpat’s solution seems a good one to me. Getting the elements to align nicely would be harder with other methods—but almost impossible (I’d say) with % margins, as browsers end up calculating things in pixels, which may not always add up exactly—especially since you are mixing % and px with those red borders.

display: table etc. has been in CSS for a long time, but it has been under used because it wasn’t supported by InternetExplorer until version 8. So although it’s not modern, it’s usage is fairly modern, so to speak. It’s fine to use in small doses, and nothing to do with HTML tables. CSS is for presentation, and this is a presentational use of CSS, so it’s fine. Using it for whole page layouts, however, kind of does get you back to the same problem as with HTML tables, as layouts become rather inflexible in terms of reorganizing content.

Hi Ralph.

Thanks for looking at this.

I want to create an entire layout using this, along with media queries so the layout can be set differently on different mobile devices. I’m not keen on the current grid layouts out there.

Is there a better solution?

We probably need more info on how you want to lay out your page, but personally, I prefer to use floats that become full width on smaller devices via @media.

The problem is I don’t want this problem:

…which is why I believe I need to avoid floats.

But using vertical align has problems with the widths hence this topic.

And I want to be able to everything this can:

http://page-test.co.uk/g.html

(from http://cssgrid.net)

…but that script has these problems:

(1) I can’t always know exactly the number of columns in a row. I don’t want to have to wrap ‘container’ and ‘row’ around everything. If I do this:

http://page-test.co.uk/g2.html

…then it messes up badly.

(2) I want more control over columns rather than every column dropping to full width on mobiles. I want to be able to do this:

<div class="quarter-width mobile-size-half-width>
XXX
</div>
<div class="quarter-width mobile-size-half-width>
XXX
</div>
<div class="quarter-width mobile-size-half-width>
XXX
</div>
<div class="quarter-width mobile-size-half-width>
XXX
</div>

…so it displays four boxes on full screens and drops to two wide etc. I want to be able to specify different sizes (and in fact have three different sizes (i) >1000px (ii) 480-1000 (iii) <480 etc.

(3) I don’t want to have to add ‘last’ to every last div in a row.

That’s where the display: inline-block comes in really handy. But I also feel that layouts with too much of this problem are probably not constructed that well. No matter how we lay out content—in boxes all over the place or whatever—it is essentially linear … as you see when viewing the raw HTML. I prefer not to have too many things in boxes that sit side by side and float all over the place, as it just seems like bad design to me. I don’t like to have to look this way and that on a page to find content. It seems to me that graphic designers forget this in their zeal to make pages interesting. I hate newspapers for this reason. I prefer to start from the top of a page and read down. I’m not convinced that people take much notice of boxes of content all over a web page. It makes us feel cool as designers, but what’s the real point?

That’s exactly what @media rules do. You can give elements different layout at a range of screen widths.

Thanks Ralph,

So I have two choices:

(1) display:inline-block but then I’m back to the problem at the very start of this topic.

(2) Use Ronpat’s example, but I’m aware of your advice:

It’s fine to use in small doses… Using it for whole page layouts, however, kind of does get you back to the same problem as with HTML tables, as layouts become rather inflexible in terms of reorganizing content.

I’m stuck really.

I’m also still looking at the possibility of setting different widths on the display:table one (as opposed to all columns being the same width) - so that may not even be possible.

Thanks again.

I’m still not clear on what that problem is, though …

I’d like to see a practical example of a layout you are looking at (like a set of screen shots of the whole page) to be able to suggest how I’d go about it.

http://page-test.co.uk/box.html

I want boxes to match up on both the left and right edges and with a % margin between them. I also want this to happen at anything as low as 300px wide and up to 190px wide. If you adjust the width of my example it’s all over the place.

That’s when Ronpat suggested the table idea, but you then said it wouldn’t be a good idea for general use. I’m also not sure if I can set varied widths on the table layout (e.g. like 3 columns of different widths).

I only really need to be able to do the box.html page nicely aligned, just like http://page-test.co.uk/table.html is (Ronpat’s example is nicely aligned) but need to be sure of not having problems with the table example, and need to have as much flexibility as both any of the grid layouts out there (most use float) and also as much flexibility as http://page-test.co.uk/box.html gives (but with the aligned edges).

Yeah, but as I said, using % margins is a real problem, especially when combined with px borders. Lose one or the other.

If I implied that there’s anything wrong with using display: table, then ignore the comment, as it’s fine to use. If you care about IE7 and under (which I don’t) you’ll have to find a fallback for them, that’s all.

My problem with the box.html is that it’s not a real layout. No page is likely to look like that, which is why I’d rather see a real page layout to comment further.

Ok, thanks Ralph, I understand.

I’ll play around with all of them and decide.

The only thing I’m thinking, and struggling with, is in Ronpat’s example, how to set different widths for the columns. I haven’t a clue why when he sets 20% width that all columns are even in width regardless if there is 1, 2 or 4 columns.

Strangely 5 columns or more doesn’t work unless I change the width to something less. In fact if I set width to 1%, it works better for all column widths (I think).

There must be a way to set a class on each div, e.g. ‘full’, ‘half’, ‘quarter’ etc. or something, but I can’t see how.

Also, if I do this:


@media screen and (max-width:480px) {
.mobile-size-half-width {
  //convert to 2 columns wide
}
}
<div class="row">
<div class="quarter-width mobile-size-half-width>
XXX
</div> 
<div class="quarter-width mobile-size-half-width>
XXX
</div>
<div class="quarter-width mobile-size-half-width>
XXX
</div>
<div class="quarter-width mobile-size-half-width>
XXX
</div>
</div>

…I don’t think it would work as I think each actual row needs <div class=“row”> wrapping around it, which isn’t ideal.

Thanks again for taking the time.

I don’t know the ins and outs of CSS tables (too lazy to read the specs!) but obviously adding a width of some sort forces the cells to display equally, despite the amount of content in each. Even 20% width on five cells works fine for me in Chrome.

As you say, CSS table layouts aren’t as flexible as they could be, partly because of the need for a row wrapper.

In your HTML example, it’s better not to have classes that represent a layout style, like “quarter-width”. If you later decide that thoe divs should display “half width”, etc, then those class names will look pretty silly. Name them according to their role, such as “boxes” or whatever. On a screen width of 480px or less, you then just set a width for boxes with that class. You wouldn’t want the class to be called “quarter-width” if you are going to set the element to full width, or half width, or whatever, on mobile devices.

Ditto everything that Ralph posted, especially a working example of your concept with behavioral preferences and/or absolutes! The overall context is important.

I chose to title the demo “old school” precisely to stimulate discussion <smile>.

I chose 20% because of your example and for convenience.
The rule is that the percentage width of all table-cells in a row cannot exceed 100%. Less than 100% is fine. The percent value does matter, but can be considered a nuance for the time being.
You can assign different percentage widths to the cells to change their relative widths (ratio) within the row. (see new demo)

Tables are blocks that shrink-wrap by default (full blocks, not inline and not floating).
Table-cells are containers that shrink to fit their content OR [uniformly] expand to fit the table container, if it has been given a width, by default.
Together, these two properties possess unique behaviors.

Actual table construction requires a selector with the table-row property, not just selectors with table and table-cell properties, and all cells in the same column have the same width (thus, the “table”); however, the table-row property is not necessary in most single row applications of these styles.

I see from the discussion that you are looking for a page layout mechanism. I don’t think you would be happy with table properties as a page layout scheme in the long run.

To answer your question about widths, the following example applies different widths to the table-cells within 100% width rows.

<!DOCTYPE html>
<html>
<!--
About cell widths:
The percentage widths of table-cells cannot exceed 100% in a row.
eg: in the first row, any width value represents 100% of the available width.
    in the second row, 20% & 30% will set the width of the first cell to 40/100 of the full width and the width of the second cell to 60/100 of the full width of the row.
    in the third row, 20:30:10 represents widths of 2/6 + 3/6 + 1/6 of 100%.
    in the fourth row, 20:30:10:40 assigns widths of 2/10 + 3/10 + 1/10 + 4/10 of the table to the respective cells.
In practice, I would not likely assign the same width to all cells (as I did in the previous demo).
    Instead, I would use classes (cell1,cell2,cell3) or adjacent sib selectors because the different cells are likey to contain other unique styles.
    Please don't confuse the simplicity of the demo with required styles.
-->
<head>
    <title>css table/table-cells</title>
    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
    <meta http-equiv="content-language" content="en-us">
    <style type="text/css">
html,body {
    width:100%;
}
.row {
    display:table;
    width:100%;
    border-spacing:12px 6px;
    margin:0px auto;
}
.row div {
    display:table-cell;
    width:20%;
    height:30px;
    border:1px solid #080;
    background-color:#cfc;
}
.row div + div {width:30%}
.row div + div + div {width:10%}
.row div + div + div + div {width:40%}
    </style>
</head>
<body>

<div class="row">
    <div></div>
</div>
<div class="row">
    <div></div>
    <div></div>
</div>
<div class="row">
    <div></div>
    <div></div>
    <div></div>
</div>
<div class="row">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>

</body>
</html>

Am kinda lost as to what you want specifically so I will attempt to provide a standardized answer which is, hopefully, on target.
Oh an there is NOTHING wrong with floats. I love display:inline, but sometimes you end up with a whitespace bug, which then takes display table to correct which then means you have to hack for IE and/or aren’t able to use RP/AP . In short there is no panacea in web design… only clever situational thinking… the quicker one accepts that the better off one is.

anyway, columns and margins.

Simply put, discounting IE6, which I keep alive only for the benefit of my parents. you could use adjacent selectors and a little math. Say it with me : “Math… love it … live it!”


<!DOCTYPE html>
<html>
<head>
<title>Title</title>

<style type="text/css">
.box{border:1px solid red}
.full { }
.half, .quarter {float:left; margin-right:-2px;}
.half {width:49%; }
.quarter {width:23.5%;   }
.half + div, .quarter + div { margin-left:2%}
.row +div{margin-left:0; clear:left}
</style>

</head>

<body>

<div class="box full row">11111111111</div>
<div class="box half ">22222222222</div>
<div class="box half row">33333333333</div>
<div class="box quarter ">44444444444</div>
<div class="box quarter">55555555555</div>
<div class="box quarter">66666666666</div>
<div class="box quarter row">77777777777</div>
<div class="box half ">Mix</div>
<div class="box quarter ">and</div>
<div class="box quarter">Match</div>
</body>

</html>

This is of course calibrated to percentages, and am compensating for your container borders. But ,as you can see, it works. I point out that at some point you get a pixel jog… that percentages for you (1-2px rounding errors that will happen because browsers round up round down or truncate)

Great. Thanks a lot everyone. I’ll try out all examples and decide on the best solution.

Thanks, this is great.

A few problems though if you or anyone can help with:

(1) I need to create these other box sizes:

  • three quarters
  • one third
  • two thirds
  • one eighth
  • one sixth
  • seven eighths

I can do this myself but don’t understand the calculation you’ve used. I see that the half-sized-box would use 49% width and 23.5% width. I also need to be able to mix all sorts in a row without manually (if possible) adjusting margins.

(2) IE7 is a bit of a mess. If I have the browser fully open then it’s dreadful. If the browser is about 1000px then it still isn’t right. My average CSS knowledge tells me that the code you posted includes an IE fix though.

(3) IE6 is actually better than IE7 but margins are ignored so there’s no gap between boxes.

Thanks again. I believe this is the best method by far.