CSS Grid Problem

**NathanDParker** · Sep 24, 2012 07:36

Hello everyone,

I noticed there are many experts on this forum so I joined to hopefully learn some tricks and get some help

I am a beginner studying CSS.
I have a grid layout that I need to replicate exactly which is attached to this post.

Layout_Assignment_flat.gif

I cannot seem to figure out how to make it in CSS. Every square needs to be a separate div because they need to be colored later.

- Problem 1 - I have no idea on why when I create a div square and all the light grey border that it doubles on top and bottom. The Border is suppose to be 10 px and the squares are 200 x 180 px. But between the top and middle, middle and bottom squares the border doubles to 20 px.

- Problem 2 - I cant seem to float the squares right so that it has the correct spacing between the lines of vertical squares. I have probably spent a good few hours and there seems to be no hope for me.

Any help on this would be greatly appreciated and I am excited to learn some things from you guys!

Thanks, Nathan

**ralph.m** · Sep 24, 2012 17:40

Hi Nathan. Welcome to the forums.

This shouldn't be too hard to do. Could you post the code you have so far?

For the border problem, you'd have to remove a top or bottom border where they meet.

For the second problem, it would be handy to know the larger context of all this. Will what you've shown in your screen shot be contained in a fixed width container, or will they just float all over the page etc? Is it safe for the boxes to have a fixed height? (If there is to be text in them, that's not really safe at all, though images would be OK.) Without fixed heights, it will be hard to control that layout perfectly.

**NathanDParker** · Sep 25, 2012 04:59

Hey Ralph!,

The grid has fixed dimensions of 800 px by 600 px. I am on my laptop so do now currently have the code (at work) but once I get home I will post it. The first problem seems like a simple fix but how do you go about taking one side of the border off of a square?

Thanks for your help!

**ralph.m** · Sep 25, 2012 07:33

It's not very efficient, but here's one way you could do it (just quicly knocked up):

Code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Boxes</title>

<style media="all">
.wrap {width: 780px; height:600px; border: 10px solid white; overflow: hidden; margin: 30px auto;}
.box1 {width: 680px; float: left;}
.box2 {width: 90px; float: right;}
.box1 div, .box2 div {background: #666; border-color: #ccc; border-style: solid;}
.box1 div {margin-right: 10px; float: left; height: 180px; width: 200px;}
.box1 div.end {margin: 0;}
.box1 .sq1, .box1 .sq3 {border-width: 10px;}
.box1 .sq2 {border-width: 0 10px;}
.box2 div {height: 275px;}
.box2 .sq1.top {border-width: 10px;}
.box2 .sq1.bot {border-width: 0 10px 10px 10px;}
</style>
	
</head>
<body>

<div class="wrap">
	<div class="box1">
		<div class="sq1">
		</div>
		<div class="sq1">
		</div>
		<div class="sq1 end">
		</div>
		<div class="sq2">
		</div>
		<div class="sq2">
		</div>
		<div class="sq2 end">
		</div>
		<div class="sq3">
		</div>
		<div class="sq3">
		</div>
		<div class="sq3 end">
		</div>
	</div>
	<div class="box2">
		<div class="sq1 top">
		</div>
		<div class="sq1 bot">
		</div>
	</div>
</div>

</body>
</html>

**ronpat** · Sep 25, 2012 15:40

Not as efficient as Ralph's... but, I sometimes enjoy a different structure in markup; so, here's another method for your consideration.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<!--
http://www.sitepoint.com/forums/showthread.php?887891-CSS-Grid-Problem&p=5194224#post5194224
-->
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta http-equiv="content-language" content="en-us">
    <title>Aligning Boxes 3</title>
    <style type="text/css">

body {
    background-color:#ace;
}
.wrap {
    width:780px;
    height:580px;
    overflow:hidden;
    margin:30px auto;
    background-color:#fff;
    padding:10px;
}
.box1,
.box2 {
    width:230px;
    float:left;
}
.box2 {
    width:90px;
}
.rect {
    background-color:#666;
    border-color:#ccc;
    border-style:solid;
    border-width:0px 10px 10px;
    float:left;
}
.rect:first-child {
    border-width:10px;
}
.box1 .rect {
    width:200px;
    height:180px;
}
.box2 .rect {
    width:70px;
    height:275px;
}
    </style>

</head>
<body>

<div class="wrap">
	<div class="box1">
		<div class="rect"></div>
		<div class="rect"></div>
		<div class="rect"></div>
	</div>
	<div class="box1">
		<div class="rect"></div>
		<div class="rect"></div>
		<div class="rect"></div>
	</div>
	<div class="box1">
		<div class="rect"></div>
		<div class="rect"></div>
		<div class="rect"></div>
	</div>
	<div class="box2">
		<div class="rect"></div>
		<div class="rect"></div>
	</div>
</div>

</body>
</html>

**ronpat** · Sep 25, 2012 16:47

Even simpler. Same markup as previous post. Simpler css.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<!--
http://www.sitepoint.com/forums/showthread.php?887891-CSS-Grid-Problem&p=5194224#post5194224
-->
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta http-equiv="content-language" content="en-us">
    <title>Aligning Boxes 6</title>
    <style type="text/css">

body {
    background-color:#ace;
}
.wrap {
    width:780px;
    height:580px;
    overflow:hidden;
    margin:30px auto;
    background-color:#fff;
    padding:10px;
}
.box1,
.box2 {
    background-color:#ccc;
    padding:10px;
    float:left;
}
.box1 {
    margin-right:10px;
}
.rect {
    background-color:#666;
}
.box1 .rect {
    width:200px;
    height:180px;
}
.box2 .rect {
    width:70px;
    height:275px;
}
.rect + .rect {
    margin-top:10px;
}

    </style>

</head>
<body>

<div class="wrap">
	<div class="box1">
		<div class="rect"></div>
		<div class="rect"></div>
		<div class="rect"></div>
	</div>
	<div class="box1">
		<div class="rect"></div>
		<div class="rect"></div>
		<div class="rect"></div>
	</div>
	<div class="box1">
		<div class="rect"></div>
		<div class="rect"></div>
		<div class="rect"></div>
	</div>
	<div class="box2">
		<div class="rect"></div>
		<div class="rect"></div>
	</div>
</div>

</body>
</html>

**ralph.m** · Sep 25, 2012 19:18

Nice work, ronpat.

**ronpat** · Sep 25, 2012 20:22

Thank you, Sir. "Ah 'preciates the feedback." <big grin>

**NathanDParker** · Sep 26, 2012 04:56

Thank you very much! It is exactly what I was looking for. I can see all my errors too.. which there was many. Only one other question and then I can stop bugging you guys haha. How would I go about giving each of the boxes a different background color?

**ronpat** · Sep 26, 2012 05:33

Depends on which of the above layouts you are talking about.

With the last "Even Simpler" layout, the easiest way is to just assign a classname to each of the colors and add that classname to the desired box. Just be sure to delete the blanket color applied here:

Code:

.box1,
.box2 {
    background-color:#ccc;  
    padding:10px;
    float:left;
}

and add it to the respective boxes in the following manner:

Code:

.green {background-color:#00ff00;}
.yellow {background-color:#ffff00;}
.magenta  {background-color:#ff00ff;}
.cyan {background-color:#00ffff;}

<div class="box1 green">
<div class="box1 yellow">
<div class="box1 magenta">
<div class="box2 cyan">

boxes, squares, rectangles, borders...

If you are actually talking about the individual rects (squares), the same principle apples, except to different elements. You might choose a better convention than using colornames as classnames, too. Numbering or lettering the boxes might be more semantically appropriate.

**ralph.m** · Sep 26, 2012 05:46

Originally Posted by NathanDParker

How would I go about giving each of the boxes a different background color?

One way would be to give each a unique class. Another option would be to use sibling selectors:

Code:

<!DOCTYPE html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta http-equiv="content-language" content="en-us">
    <title>Aligning Boxes 6</title>
    <style type="text/css">

body {
    background-color:#ace;
}
.wrap {
    width:780px;
    height:580px;
    overflow:hidden;
    margin:30px auto;
    background-color:#fff;
    padding:10px;
}
.box1,
.box2 {
    background-color:#ccc;
    padding:10px;
    float:left;
}
.box1 {
    margin-right:10px;
}
.box1 div {
    width:200px;
    height:180px;
}
.box2 div {
    width:70px;
    height:275px;
}
.box1 div + div, .box2 div + div {
    margin-top:10px;
}

.box1 div {background: red;}
.box1 div + div {background: blue;}
.box1 div + div + div {background: yellow;}

.box1 + .box1 div {background: green;}
.box1 + .box1 div + div {background: violet;}
.box1 + .box1 div + div + div {background: pink;}

.box1 + .box1 + .box1 div {background: gray;}
.box1 + .box1 + .box1 div + div {background: purple;}
.box1 + .box1 + .box1 div + div + div {background: orange;}

.box2 div {background: black;}
.box2 div + div {background: brown;}

    </style>

</head>
<body>

<div class="wrap">
	<div class="box1">
		<div></div>
		<div></div>
		<div></div>
	</div>
	<div class="box1">
		<div></div>
		<div></div>
		<div></div>
	</div>
	<div class="box1">
		<div></div>
		<div></div>
		<div></div>
	</div>
	<div class="box2">
		<div></div>
		<div></div>
	</div>
</div>

</body>
</html>

@ronpat ; That's using your example from post #6, but with the classes removed. You don't actaually need the classes, because you can target each box with .box1 div instead of .box1 .rect etc.

**ronpat** · Sep 26, 2012 06:02

Very slick, Ralph! Gotta remember that! I had been thinking in terms of pseudo-classes but adjacent sibs are easier here. No end tag classes needed. Cool!

**NathanDParker** · Sep 26, 2012 10:04

A big thanks to the both of you! Problems are fixed and even learned some things

appreciate it!

User Tag List

Thread: CSS Grid Problem

Thread Tools

Display

CSS Grid Problem

Bookmarks

Bookmarks

Posting Permissions