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.
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!
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.
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?
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?
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:
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.
One way would be to give each a unique class. Another option would be to use sibling selectors:
<!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.
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!
appreciate it!