CODEWITHSUNDEEP
htmlcss
Beaver
Beaver

Reputation: 51

Problems with box positioning

(I dont know English very well so sorry for errors)
Hello guys. I just want to know what I need to do in order to position boxes the way I want: I have some code (at the end) and I want to create 3 boxes and position them in a certain way. enter image description here

I simply want to have a box on the top, that will have width: 100%; height: 100px, and I assume that putting the flexbox in a column with flex-direction: column; automatically set the width to 100%

Then I want to create an article_box that has a width of 65% of the screen, so it resizes when I change the screen resolution, and this box has to have margin-top: 0; so it will be attached to the header. It also needs to be at the center, so margin-left: auto; margin-right: auto;\

Then finally I want to create an aside_box that will be positioned on the left of the article_box, and the margins will be like showed in figure.

How do I put box next to each other and how do I set this margins the way I want?

* {
  margin: 0;
  padding: 0;
}

/*------------------------------------------------------------*/

.box_class {
  widht: 499px;
  height: 499px;
  border: 1px solid red;
  display: flex;
  flex-direction: column;
}

.box_class * {
  display: flex;
  align-items: center;
  justify-content: center;
}

/*------------------------------------------------------------*/

.header_box {
  height: 100px;
  background-color: blue;
}

.content_box {
  margin-left: auto;
  margin-right: auto;
  width: 55%;
  height: 100%;
  background-color: yellow;
}

.aside_box {
  margin: 0px 20px;
  width: 100px; 
  height: 100px;
  background-color: green;
}
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="style.css">
    <title>Test</title>
  </head>
  <body>
    <div class="box_class">
      <div class="header_box">
        header
      </div>
      <div class="content_box">
        content
      </div>
      <div class="aside_box">
        aside
      </div>
    </div>
  </body>
</html>

Thanks in advance for help!!

Upvotes: 3

Views: 65

Answers (1)

tacoshy
tacoshy

Reputation: 13002

Alright as promised:

easiest way to achieve with a grid instead of flexboxes. I added a footer in case you need it. It will only consume space and show if you actually put something in there.

With CSS-Grid you can use a templating technique. in this case I template the page in to header, content and footer. The content has 3 columns. the content-center has a width of 65% as you asked for. the left and right side therefor the remaining 17.5% each. To achieve thta, this css-grid has a declared column size of: grid-template-columns: 17.5% 65% 17.5%;

the header and footer uses the full screen width because they span all 3 columns because of: grid-column: span 3;.

the header has a declared height of 100px as you asked for and will stay fixed at this height.

the content will use all remaining height of the screen and expand with a scrollbar beyond it as necessary. This is because the row height for the gird is set to: grid-template-rows: min-content auto min-content;. min-content means only as heigh as the content. because the body min-height is delcared as 100vh, the row height of auto will use up all the remaining space.

Last but not least: your Aside Box is a child of the content-left. you can place it with margins as you want.

body {
  padding: 0;
  margin: 0;
  width: 100vw;
  min-height: 100vh;
  display: grid;
  grid-template-columns: 17.5% 65% 17.5%;
  grid-template-rows: min-content auto min-content;
  grid-gap: 0;
}

#header,
#footer {
  grid-column: span 3;
}

#header {
  height: 100px;
  background-color: blue;
}

#content-center {
  background-color: yellow;
}

#aside {
  margin: 0px 20px;
  background-color: green;
}
<body>
  <div id="header">
    Header
  </div>
  <div id="content-left">
    <div id="aside">Aside</div>
  </div>
  <div id="content-center">
    Article-Box
  </div>
  <div id="content-right">
  </div>
  <div id="footer">
  </div>
</body>

Upvotes: 1

Related Questions