CSS Advanced float / grid layout

Question

I'm a bit smitten with my grid layout in CSS. I have a wrapper (1000px wide) and want to put divs with float:left; and a margin from 23px between each. This would be easily achievable using the :nth-child selector. But now I have a text block in the left top corner whose height is variable and the number of grid items is variable too.

So I set the right-margin of the text block and the grid items to 23px. But when the most right grid element has 23px right-margin, it breaks to the next line.

I cannot use nth-child here because I do not know, how many rows of two items and how many of three items I will get.

I hope there is a CSS-only solution for my problem.

UPDATE

Here is a Fiddle which shows the attempts I made: jsfiddle.net

Here is my layout how it should be:

+-------------------------------------------+
|+---------------+ +----------+ +----------+|
||               | |          | |          ||
||               | |          | |          ||
||               | |          | |          ||
||               | +----------+ +----------+|
||   Textblock   | +----------+ +----------+|
||               | |          | |          ||
||               | |          | |          ||
||               | |          | |          ||
|+---------------+ +----------+ +----------+|
|+----------+     ^            ^           ^|
||          |  (margin)     (margin)  (no margin)
||          |                               |
||          |                               |
|+----------+                               |
+-------------------------------------------+
^
(no margin)

Could use `min-height` or `max-height` with `overflow-y` on the text container. — Dom, Jun 09 '13 at 14:14

score 1 · Accepted Answer · edited May 23 '17 at 12:11

You could do something like this: http://codepen.io/pageaffairs/pen/svxLg

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
.float, .boxes div {background: #f7f7f7; }
.wrap {width: 1000px; margin: 0 auto; padding: 20px 0; background: #30353b;}
.float {float: left; width: 476px; height: 440px; margin: 0 23px 23px 0;}
.boxes {text-align: justify;}
.boxes div {width: 238px; height: 238px; display: inline-block;}
.boxes:after {content: ''; width: 100%; display: inline-block;}

</style>
</head>
<body>

<div class="wrap">
    <div class="float"></div>
    <div class="boxes">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>

</div>

</body>
</html>

I got this solution partly from another conversation the other day, which cited this very handy trick of setting inline-block elements to text-align: justify: http://www.barrelny.com/blog/text-align-justify-and-rwd/

Here's another version with different sizing: http://codepen.io/pageaffairs/pen/JrqIf

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
.float {background: #ccc;} 
.boxes div {background: #f7f7f7; }
.wrap {width: 1000px; margin: 0 auto; padding: 20px 0; background: #30353b;}
.float {float: left; width: 318px; height: 400px; margin: 0 23px 23px 0;}
.boxes {text-align: justify;}
.boxes div {width: 318px; height: 200px; margin-bottom: 23px; display: inline-block;}
.boxes:after {content: ''; width: 100%; display: inline-block;}

</style>
</head>
<body>

<div class="wrap">
    <div class="float"></div>
    <div class="boxes">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
</div>

</body>

</html>

EDIT: I see you've posted an example now, so here's that example applied to your code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>

#main {
    width:1000px;
    position:relative;
    background-color:rgb(88, 88, 88);
}
#welcometext {
    float: left;
    width:318px;
    margin-right:23px;
}
#welcometext p {
    width:100%;
    margin-top:30px;
}
.navelement {
    width:318px;
    height:189px;
    overflow:hidden;
    margin-top:40px;
    border-radius:10px;
    background-color:white;
    display: inline-block;
}

.nav-wrap {text-align: justify;}
.nav-wrap:after {content: ''; width: 100%; display: inline-block;}


</style>
</head>
<body>

<div id="main">
    <div id="welcometext">
        <p>aximinctus incte pa idis sequati velit exero to tem si disci- enderi doloressit odi reptatum dolorrum et et autet aliti- assi rerio corum hitius am quidelibus. 318 px giatemporro esequam, eicias arum doleni vidis pre pa do- lupti orerum qui doluptatiam, voluptae conseritaque sita [...] imuscimin ne niendit.</p>
    </div>
    <div class="nav-wrap">
        <div class="navelement">
        </div>
        <div class="navelement">
        </div>
        <div class="navelement">
        </div>
    </div>
</div>

</body>
</html>

Wow! GREAT answer! The only problem is that if the last line has two elements, they get justified to and stick left / right. The author of the article in your link used placeholders. But since the content comes from a CMS, I have no influence on the content. — Julian F. Weinert, Jun 09 '13 at 14:57
Hm. I guess at a pinch you could use JS to count the number of boxes and add in extra placeholders as needed. — ralph.m, Jun 09 '13 at 15:05
Okay... So I see there is no better solution. I'll try to hook into the CMS. I'm sure there is a way to get the count of elements. Thanks again, good job! — Julian F. Weinert, Jun 09 '13 at 15:14
No probs. Sorry I couldn't offer a better option. I guess if you *knew* there was a final stranded box like that, you could do something like this: `.boxes div:last-child {position: relative; left: -341px;}` — ralph.m, Jun 09 '13 at 15:25
Well... Your solution is really good! I already tried exactly what you did. But it does not help if the last line has two items and `:last-child` also applies when the last line is full... I'm quite sure I'll be happy with counting the items... I'll see. — Julian F. Weinert, Jun 09 '13 at 16:36

CSS Advanced float / grid layout

1 Answers1