Divide div (table-cell) further

HTML & CSS
1

Is it possible to further divide green div. For example if I wanted to split green div to one row of two cells and then below it 2 columns?

Green div https://codepen.io/stribor45/pen/OzQYjL to look like something from this

1141×572 13.7 KB
image

2

Your words don’t seem to match your drawing? (or make sense to me)

One row of two cells with 2 columns below sounds like 2 cells on top and 2 cells on bottom but your drawing shows one row on top and 3 cells on bottom :slight_smile:

If you just want to sub divide the green div then yes you can do it in many ways but it depends on how you want it to look and whether you are expecting the new sub divisions to match the height of the parent and adjoining elements. If so then flexbox would be best for the whole thing.

3

Hi Paul,’
Would you be able to show example how to use flex box. Split green div any way you want as long as everything fits within grin div. I just want to see simple example and then I will play with it and make my own.

Thanks Paul

4

Hi,

If you look at example 12 on this codepen (nested flexbox columns):

e.g.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
html {
	box-sizing: border-box;
}
*, *:before, *:after {
	box-sizing: inherit;
}
.wrapper {
	width:90%;
	min-height:150px;
	background-color: red;
	margin: 0 auto;
	display: flex;
}
.one, .two, .three {
	flex: 1 0 33%;
	background-color: green;
}
.two {
	background-color: yellow;
}
.three {
	background-color: tomato;
}
.one {
	display:flex;
	flex-wrap:wrap;
	flex-direction:column;
}
.top {
	background:orange;
	padding:10px;
}
.inner {
	display:flex;
	flex:1 0 0%;
}
.side1, .side2 {
	flex:1 0 50%;
	background:pink;
	padding:10px;
}
.side2 {
	background:teal;
}
</style>
</head>

<body>
<div class="wrapper">
  <div class="one">
    <div class="top">top</div>
    <div class="inner">
      <div class="side1">Side 1</div>
      <div class="side2">Side 2</div>
    </div>
  </div>
  <div class="two">
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
  </div>
  <div class="three"></div>
</div>
</body>
</html>
1 Like
5

Stribor45,
If you’ll look at the html Paul is using above, you’ll see that it is comprised of classes rather than IDs’

Looking at your html from the link you gave we see this…

<div id="wrapper">
    <div id="one"></div>
    <div id="two"></div>
    <div id="three"></div>
</div>

That is what I was talking about in post #12 of your other thread.

You could be in for a pretty bumpy ride when it comes time to style the actual content inside those divs with all the weight and specificity the IDs’ add. :slight_smile:

2 Likes
6

I’m not entirely sure what you are asking for, but this one wraps like in your drawing:-

1 Like
7

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