0

Let say I desire the following layout:

 ___________ ___________
|           |           |
|           |     B     |
|     A     |___________|
|           |           |
|           |     C     |
|___________|___________|

To achieve this, my original thinking was that a block element would start on a new line only within the scope of its parent. Therefore, I thought I would try the following:

<span id="A">
  <!-- A's content-->
</span>

<span id="B_and_C">
  <div id="B">
    <!-- B's content -->
  </div>
  <div>
    <!-- C's content-->
  </div>
</span>

Unfortunately, it appears as though my <div>s are creating new lines entirely, resulting in:

 ___________ 
|           |
|           |
|     A     |
|           |
|           |
|___________|
|           |
|     B     |
|___________|
|           |
|     C     |
|___________|

Is there a way to make my <div>s act as block elements within the scope of their parent only? Otherwise, is there another recommended solution to achieve my desired layout?

Eric
  • 330
  • 3
  • 13

1 Answers1

0

There are 2 ways you can do this.

  1. Left float div A and the container div (remember to clear the parent after)
  2. Set display: inline-block on the div A and the container div

You can make use of display property to change your elements to inline, inline-block or block in order to manipulate the way it shows.

https://www.w3schools.com/cssref/pr_class_display.asp

https://developer.mozilla.org/en-US/docs/Web/CSS/display

I have made the below for your reference.

.example1 .box.a,
.example1 .bc {
  display: inline-block;
}
.example2:after {
  content: "";
  clear: both;
  display: block;
}
.example2 .box.a,
.example2 .bc {
  float: left;
}
.box {
  height: 50px;
  width: 50px;
  background-color: green;
}
.box.b {
  height: 25px;
  background-color: red;
}
.box.c {
  height: 25px;
  background-color: blue;
}
<div class="example2">
  <div class="box a"></div>
  <div class="bc">
    <div class="box b"></div>
    <div class="box c"></div>
  </div>
</div>
<hr>
<div class="example1">
  <div class="box a"></div>
  <div class="bc">
    <div class="box b"></div>
    <div class="box c"></div>
  </div>
</div>
Seegy
  • 374
  • 2
  • 15
  • Why do you have example2 before example1 in the HTML code? It's confusing me a bit which example is the float example and which is the display: inline-block answer. – Eric May 01 '20 at 05:04
  • Thanks for your answer @Seegy! That answers my question well. I don't know why this question was closed @Paulie_D since the "similar" question does not answer this? The "similar" question is asking how to have a block span two rows whereas my question is asking if a `
    ` can act as a block within its parent but not outside of it. Please consider reopening as Seegy's response helped me a lot :)
     – Eric May 01 '20 at 05:23