Creating div elements inside other divs can be achieved by using different positioning properties such as left, right, top,

Question

Creating div elements inside other divs can be achieved by using different positioning properties such as left, right, top,

I have divs named bottom, left, right, and top. I am looking to place a div called "center" inside each of them in order to achieve the following layout:

======top======
| left-  center  -right |
------bottom-----------

Although it seems straightforward, I encounter issues with my divs escaping their designated positions.

body {
  !important margin: 0 auto;
}

#container {
  margin: 0 auto;
  width: 50%;
}

#headertop {
  background-color: #0000CD;
  margin-top: 50px;
  padding-bottom: 80px;
}

#left {
  background-color: #6495ED;
  padding-bottom: 400px;
  width: 10%;
  float: left;
}

#right {
  background-color: #0000CD;
  padding-bottom: 400px;
  margin-left: 600px;
  width: 10%;
  float: right;
}

#bottom {
  clear: both;
  background-color: #6495ED;
  padding-bottom: 80px;
}

<div id="container">
  <header>
    <div id="headertop">
    </div>
  </header>
  <main>
    <div id="center">
    </div>
  </main>
  <aside>
    <div id="left">
    </div>
    <div id="right">
    </div>
  </aside>
  <footer>
    <div id="bottom">
    </div>
  </footer>
</div>

html css

Answer 1

Answer №1

Here is a potential solution that utilizes flexbox:

div {
  height: 20px;
}

#top {
  background-color: pink;
}

#left {
  background-color: #0000ff;
}

#center {
  background-color: #6666ff;
}

#right {
  background-color: #9999ff;
}

#bottom {
  background-color: pink;
}

.flexbox {
  display: flex;
}

.item--flex-1 {
  flex: 1;
}

<div id="top"></div>
<div class="flexbox">
    <div id="left" class="item--flex-1"></div>
    <div id="center" class="item--flex-1"></div>
    <div id="right" class="item--flex-1"></div>
</div>
<div id="bottom"></div>

Answer 2

Here is a potential solution that utilizes flexbox:

div {
  height: 20px;
}

#top {
  background-color: pink;
}

#left {
  background-color: #0000ff;
}

#center {
  background-color: #6666ff;
}

#right {
  background-color: #9999ff;
}

#bottom {
  background-color: pink;
}

.flexbox {
  display: flex;
}

.item--flex-1 {
  flex: 1;
}

<div id="top"></div>
<div class="flexbox">
    <div id="left" class="item--flex-1"></div>
    <div id="center" class="item--flex-1"></div>
    <div id="right" class="item--flex-1"></div>
</div>
<div id="bottom"></div>

Answer 3

Answer №2

Streamline, simplify, streamline. It is also advisable to minimize the use of floats for layout unless absolutely necessary and have a clear understanding of how elements behave when using them.

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh; /* Allows flex-grow for .content to extend page height. */
  margin: 0;
}

.content {
  display: flex;
  flex-grow: 1;
}

main {
  flex-grow: 1;
}

/* Style exemplification */
header,
footer {
  background-color: whitesmoke;
}

aside {
  background-color: cornsilk;
}

main {
  background-color: aliceblue;
}

<header>Header</header>
<div class="content">
  <aside class="left-sidebar">
    Left Aside
  </aside>
  <main>
    Main
  </main>
  <aside class="right-sidebar">
    Right Aside
  </aside>
</div>
<footer>Footer</footer>

Answer 4

Streamline, simplify, streamline. It is also advisable to minimize the use of floats for layout unless absolutely necessary and have a clear understanding of how elements behave when using them.

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh; /* Allows flex-grow for .content to extend page height. */
  margin: 0;
}

.content {
  display: flex;
  flex-grow: 1;
}

main {
  flex-grow: 1;
}

/* Style exemplification */
header,
footer {
  background-color: whitesmoke;
}

aside {
  background-color: cornsilk;
}

main {
  background-color: aliceblue;
}

<header>Header</header>
<div class="content">
  <aside class="left-sidebar">
    Left Aside
  </aside>
  <main>
    Main
  </main>
  <aside class="right-sidebar">
    Right Aside
  </aside>
</div>
<footer>Footer</footer>

Answer 5

Answer №3

Using a grid layout would be an effective way to achieve this as it allows all elements to be siblings within the same parent container.

body {
  display: grid;
  grid-template-areas: 'header header header'
                       'left   main   right'
                       'footer footer footer';
  grid-template-rows: max-content 1fr max-content; /* Modify this to adjust column widths */
  grid-template-columns: max-content 1fr max-content;
  min-height: 100vh; /* Ensures full page height */
  margin: 0;
}

body > * {
  padding: 1em;
  outline: 1px solid red;
}

header {
  grid-area: header;
}

.left-sidebar {
  grid-area: left;
}

.right-sidebar {
  grid-area: right;
}

main {
  grid-area: main;
}

footer {
  grid-area: footer;
}

<header>Header</header>
<aside class="left-sidebar">
  Left Aside
</aside>
<main>
  Main
</main>
<aside class="right-sidebar">
  Right Aside
</aside>
<footer>Footer</footer>

Answer 6

Using a grid layout would be an effective way to achieve this as it allows all elements to be siblings within the same parent container.

body {
  display: grid;
  grid-template-areas: 'header header header'
                       'left   main   right'
                       'footer footer footer';
  grid-template-rows: max-content 1fr max-content; /* Modify this to adjust column widths */
  grid-template-columns: max-content 1fr max-content;
  min-height: 100vh; /* Ensures full page height */
  margin: 0;
}

body > * {
  padding: 1em;
  outline: 1px solid red;
}

header {
  grid-area: header;
}

.left-sidebar {
  grid-area: left;
}

.right-sidebar {
  grid-area: right;
}

main {
  grid-area: main;
}

footer {
  grid-area: footer;
}

<header>Header</header>
<aside class="left-sidebar">
  Left Aside
</aside>
<main>
  Main
</main>
<aside class="right-sidebar">
  Right Aside
</aside>
<footer>Footer</footer>

Creating div elements inside other divs can be achieved by using different positioning properties such as left, right, top,

Answer №1

Answer №2

Answer №3

Similar questions

Incorporating a complex React (Typescript) component into an HTML page: A Step-by

How can I display different data values on each individual circle counter, rather than all circles showing the same data?

Failure to respond to dual part form by RemoveClass

How can you apply a class to a different element by hovering over one element?

What is the procedure for downloading a file within a brackets-shell application?

Troubleshooting a Header Styling Problem in Shopify Theme Sections (Liquid)

Exploring Vue 3: Choosing between using import statements in main.js and configuring additionalData in vue.config.js to load a global scss file

Managing Variants in SCSS with BEM Approach: A Comprehensive Guide

What is the best approach to bring a button into focus after it has been enabled in a React.js application

The footer div appears distinct on various pages despite being the same

"Enhance User Experience with Autoplay.js for Interactive Content and Sound Effects

How come my menu items are crammed together on a small screen?

creating an interactive element that seamlessly integrates with a dynamic background image slideshow

Switching the input to LTR changes the overall direction to LTR while maintaining the RTL placeholder

Troubleshooting Problems with Owl Carousel Loading

Eliminating the default inline style automatically

Send Angular to different Controller post successful Login

Steps for populating results in input field from td tag

The Iframe contains its own scroll feature within the body

Change the Div's Position to Fixed Upon Scrolling to a Specific Location - Using jQuery