1

thanks for taking a look at my question. I am new to CSS and html and am attempting to create a skeleton web page. I am attempting to create a page with flexbox it has two SIDE BY SIDE rows, each with a nested column. The issue arises when I try to stretch the columns to the "parent height/number of columns" this is proving to be a difficult issue that has no easy solution (at least from what. for example, a column with two articles would need a height of 50% of the parent div, so the column fully fills it. with 3 items the articles must be 33% height to make the column fill the row.

Example illustration (2 rows, the left with one column item, the right with two.

OOOOOOOOOOOOOOOOOOOO
O--text--O---text--O
O--text--O--empty--O
O--text--O--empty--O
O--text--OOOOOOOOOOO
O--text--O---text--O
O--text--O--empty--O
O--text--O--empty--O
OOOOOOOOOOOOOOOOOOOO

How it currently looks:

OOOOOOOOOOOOOOOOOOOO
O--text--O --text--O
O--text--OOOOOOOOOOO
O--text--O --text--O
O--text--OOOOOOOOOOO
O--text--O--empty--O
O--text--O--empty--O
O--text--O--empty--O
OOOOOOOOOOOOOOOOOOOO

Can i do this with Java, and if so; Would somebody be able to lend me their wisdom?

My current code is:

.container {
  border: 1px red solid;
  width: 80%;
  margin: 100px auto 0 auto;
  height: 500px;
  /*height: auto; */
  position: relative;
}

section {
  background-color: #cccccc20;
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
}

.row {
  flex: 1;
  border: 1px black solid;
  height: 100%;
}

.col {
  column-fill: balance;
  border: 1px red solid;
}

.article {
  display: table-cell;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">

  <link rel="stylesheet" href="style/style.css">
  <link rel="stylesheet" href="style/structure.css">

  <title></title>
</head>

<body class="container">

  <section>
    <div class="row">

    </div>

    <div class="row">
      <div class="col">
        <div class="article">
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        </div>
      </div>
      <div class="col">
        <div class="article">
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        </div>
      </div>
    </div>
  </section>

</body>

</html>

Improve this question
4
  • you've not described any "issue" that arises, what's the problem and what's the desired look? Commented Sep 11, 2018 at 1:00
  • of course, an edited version is posted up top; thanks for the time! Commented Sep 11, 2018 at 1:23
  • sounds like 2 columns with rows? Maybe use a table? Commented Sep 11, 2018 at 1:46
  • the reason i have tried to stay away form tables is I'm trying to create a framework that can be easily modified for most websites; and from what ive read, tables are slow, and difficult to manage on larger sites. Commented Sep 11, 2018 at 1:54

2 Answers 2

Reset to default
3

Using flex-box makes your goal lot more easier.

I deleted the margins, position property(found on the section element with value of absolute), the display property from the .article elements(try to avoid tables they are not responsive), the selectors are based on the current HTML structure, and I set the box-sizing property to border-box for all the elements on the demo.

Here's a working demo:

* { box-sizing: border-box; }

.container {
  border: 1px red solid;
  width: 80%;
  margin: auto;
  height: 500px;
  /*height: auto; */
  position: relative;
}

section {
  width: 100%;
  display: flex;
  flex-flow: row nowrap;
  height: 100%;
  background-color: #cccc20;
}

.row {
  flex: 0 0 50%;
  width: 50%;
  max-width: 50%;
  border: 1px black solid;
}

.row:nth-of-type(2) {
  display: flex;
  flex-flow: column wrap;
}

.row .col {
  flex: 0 0 50%;
  height: 50%;
  max-height: 50%;
  overflow: auto; /* adds scroll bars if the content is more than the element's height */
  border: 1px red solid;
}
<body class="container">
  <section>
    <div class="row">Some content here</div>
    <div class="row">
      <div class="col">
        <div class="article">
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        </div>
      </div>
      <div class="col">
        <div class="article">
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        </div>
      </div>
    </div>
  </section>
</body>

Learn more about box-sizing property.

Learn more about flexbox.

Hope I pushed you further.

Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

Thank you so much, i will look into this and hopefully have a solution soon!
@ChristianPotts Did my answer helped you ?
I upvoted you answer btw, even though it wasn't written as specifed (in Java)
0

Another approach is to use css grid-area property:

.item1 {
  grid-area: main;
  height: 300px;
}

.item2 {
  grid-area: right1;
}

.item3 {
  grid-area: right2;
}

.grid-container {
  display: grid;
  grid-template-areas: 'main right1' 'main right2';
  grid-gap: 5px;
  background-color: #2196F3;
  padding: 5px;
}

.grid-container>div {
  background-color: #DCE1E7;
  text-align: center;
  padding: 10px 0;
  font-size: 15px;
}
<h2>Grid Layout</h2>
<div class="grid-container">
  <div class="item1">Main</div>
  <div class="item2">Right1</div>
  <div class="item3">Right2</div>
</div>

Improve this answer

2 Comments

I believe the OP wants to be able to add articles and have them flex into the container automatically, whereas this is more of a layout approach "With 3 items the articles must be 33% height to make the column fill the row."
display: grid isn't well supported among browsers.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.