How would I set a grid inside the box?

WebMachine · February 13, 2017, 1:46am

Why 26? Which fiddle are you referring to? I think you switched in mid question.

asasass · February 13, 2017, 1:47am

that’s what it says.

coothead · February 13, 2017, 1:51am

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
<title>untitled document</title>
<!--<link rel="stylesheet" href="screen.css" media="screen">-->
<style media="screen">
body {
    background-color: #f0f0f0;
    font: 1em/1.632em verdana, arial , helvetica, sans-serif;
 }
#container {
    width: 29.25em;
    margin: auto;
    border-bottom: 0.375em solid #f00;
    border-left: 0.375em solid #f00;
    box-shadow: 0.25em 0.25em 0.25em #999;
    background-color: #fff;
    overflow: hidden;
 }
#container div {
    float: left;
    width: 9.375em;
    height: 7.5em;
    border-top: 0.375em solid #f00;
    border-right: 0.375em solid #f00;
    box-shadow: inset 0 0 0.75em #999;    
 }
</style>
</head>
<body> 
  <div id="container">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
</body>
</html>

coothead

WebMachine · February 13, 2017, 1:51am

I’m looking at http://jsfiddle.net/hpth187g/1/

The large grid is set at 470px. That is the only space you have in which to fit the three boxes. The 6px border on the right does not count.

Each of your boxes is (150 + 6) px wide. You said 156 x 3 is 468 (which is 12 px less wide than the space you have.

asasass · February 13, 2017, 1:53am

468 works but width won’t be 476

WebMachine · February 13, 2017, 1:54am

Where in that fiddle do you get 476 from? The 6 px border on the large box does not count as part of the inside of that box where you put the smaller boxes.

asasass · February 13, 2017, 1:56am

div.gridcontainer {
  width: 470px; /*476*/
  line-height: 0;
  border-right: 6px solid red;
  border-bottom: 6px solid red;
}

WebMachine · February 13, 2017, 1:59am

That is the width that you have to work with, when fitting in the smaller divs. Your smaller divs only add up to 468px.

How wide do you want your actual grid to be? If it is 470px plus 6px right border, you won’t be able to fit 3 boxes inside it without a gap.

asasass · February 13, 2017, 2:00am

I just realised that.

WebMachine · February 13, 2017, 2:02am

Okay, so you want to put this grid inside the box in that code you pasted in post #8?

asasass · February 13, 2017, 2:04am

How would I move it ?

<style type="text/css">

.outer {
  max-width:464px;  /*476*/
  border:solid 6px #38761d;
  background-color: #000;
  margin: 0 auto;  /* top+bottom  left+right */
  position: relative;
}

.hr3 {
  color: #38761d;
  font-style: normal;
  font-size: 50px;
  font-family: georgia;
  text-align: center;
  padding-bottom: 0px;
  margin-top:6px;
  margin-bottom: -9px;

}

.hr3 span {
  display: block;
  height: 5px;
  background-color: #15c;
  transform: rotate(-.9deg);
  margin-top: 0px;
  margin-left: 26px;
  margin-right: 20px;
}

  .hr4 {
  display: block;
  padding-bottom: 372px;
  border-top: 6px solid #38761d;
  margin-top: 27px;
}

div.gridcontainer {
  width: 468px;
  line-height: 0;
  border-right: 6px solid red;
  border-bottom: 6px solid red;
}

div.griditem {
  display: inline-block;
  border-left: 6px solid red;
  border-top: 6px solid red;
  width: 150px;
  height: 120px;
}

</style>

</head>
<body>

<div class="outer">
    <p class="hr3">text text text text<span></span></p>
<div class="hr4"></div>
</div>
<div class="gridcontainer">
  <div class="griditem"></div><div class="griditem"></div><div class="griditem"></div><div class="griditem"></div><div class="griditem"></div><div class="griditem"></div><div class="griditem"></div><div class="griditem"></div><div class="griditem"></div>
</div>

</div>
</body>
</html>

WebMachine · February 13, 2017, 2:06am

You just re-posted the code. You didn’t answer my question (in words). If you learn how to describe what you want to do in words, it makes it easier to figure out the answer.

In that code that you just posted, is the grid in the position you want it to be?

asasass · February 13, 2017, 2:07am

div.gridcontainer {
margin-left: 386px;
margin-bottom: 0px;
  width: 468px;
  line-height: 0;
  border-right: 6px solid red;
  border-bottom: 6px solid red;

}

WebMachine · February 13, 2017, 2:14am

Does it go underneath the other black box? How does it look to you now? I had to shut down my laptop for the night. I will check it in the morning. In the meantime you can fix the gaps.

asasass · February 13, 2017, 2:15am

It’s off by 1

<style type="text/css">

.outer {
  max-width:464px;  /*476*/
  border:solid 6px #38761d;
border-bottom:none;
  background-color: #000;
  margin: 0 auto;  /* top+bottom  left+right */
  position: relative;
}

.hr3 {
  color: #38761d;
  font-style: normal;
  font-size: 50px;
  font-family: georgia;
  text-align: center;
padding-bottom:25px;
  margin-top:6px;
  margin-bottom: -27px;

}

.hr3 span {
  display: block;
  height: 5px;
  background-color: #15c;
  transform: rotate(-.9deg);
  margin-top: 0px;
  margin-left: 26px;
  margin-right: 20px;
}

  .hr4 {
  display: block;
 

  margin-top: 27px;
}

div.gridcontainer {
margin-left: 386px;
margin-bottom: 0px;
  width: 468px;
  line-height: 0;
  border-right: 6px solid red;
  border-bottom: 6px solid red;
}

div.griditem {
  display: inline-block;
  border-left: 6px solid red;
  border-top: 6px solid red;
  width: 150px;
  height: 120px;
}

</style>

</head>
<body>

<div class="outer">
    <p class="hr3">text text text text<span></span></p>
<div class="hr4"></div>
</div>
<div class="gridcontainer">
  <div class="griditem"></div><div class="griditem"></div><div class="griditem"></div><div class="griditem"></div><div class="griditem"></div><div class="griditem"></div><div class="griditem"></div><div class="griditem"></div><div class="griditem"></div>
</div>

</div>
</body>
</html>

asasass · February 13, 2017, 2:27am

Trying to add a vertical line down the middle.

How do I add this code in?

  .hr4 span {
  display: block;
  height: 5px;
  background-color: #15c;
  transform: rotate(-90deg);
  margin-top: 0px;
  margin-left: 26px;
  margin-right: 20px;
}

<style type="text/css">

.outer {
  max-width:464px;  /*476*/
  border:solid 6px #38761d;
  background-color: #000;
  margin: 0 auto;  /* top+bottom  left+right */
  position: relative;
}

.hr3 {
  color: #38761d;
  font-style: normal;
  font-size: 50px;
  font-family: georgia;
  text-align: center;
  padding-bottom: 0px;
  margin-top:6px;
  margin-bottom: -9px;

}

.hr3 span {

  display: block;
  height: 5px;
  background-color: #15c;
  transform: rotate(-.9deg);
  margin-top: 0px;
  margin-left: 26px;
  margin-right: 20px;
}

  .hr4 {
  display: block;
  padding-bottom: 372px;
  border-top: 6px solid #38761d;
  margin-top: 27px;
}
  .hr4 span {
  display: block;
  height: 5px;
  background-color: #15c;
  transform: rotate(-90deg);
  margin-top: 0px;
  margin-left: 26px;
  margin-right: 20px;
}

</style>

</head>
<body>

<div class="outer">
    <p class="hr3">text text text text<span></span></p>


<p class="hr4"></div><span></span></p>


</div>

</body>
</html>

system · May 15, 2017, 9:27am

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.