One inner DIV positioned in the center flanked by two others on either side

Question

One inner DIV positioned in the center flanked by two others on either side

In this scenario, we encounter two different situations:
1. Divs A & B are placed side by side within a container
2. Div A is centered in the same container

For reference, you can view an example here

.container_one, .container_two {width:200px; height:100px; background-color:red;}
.container_one .inner_a {width:100px; background-color:green; float:left;}
.container_one .inner_b {width:100px; background-color:blue; float:right;}
.container_two .inner_a{width:100px; margin:0 auto; background-color:green;}

<div class="container_one">
    <div class="inner_a">
        a
    </div>
    <div class="inner_b">
        b
    </div>
</div>
<br>
<div class="container_two">
    <div class="inner_a">
        a
    </div>
</div>

If both containers have the same class (unlike the given example), and the number of inner divs varies between 1 or 2, it becomes challenging to create CSS that accommodates both situations seamlessly. Despite numerous attempts, achieving this has proven to be difficult.

css

Answer 1

Answer №1

Consider using inline-block instead of floats for better layout consistency. Apply the inner_a rules to both divs and eliminate the need for floats.

.container_one, .container_two {
  background-color: #ff0000;
  height: 100px;
  text-align: center;
  width: 200px;
}

.container_two .inner_a {
  background-color: #008000;
  display: inline-block;
  width: 100px;
}

Answer 2

Consider using inline-block instead of floats for better layout consistency. Apply the inner_a rules to both divs and eliminate the need for floats.

.container_one, .container_two {
  background-color: #ff0000;
  height: 100px;
  text-align: center;
  width: 200px;
}

.container_two .inner_a {
  background-color: #008000;
  display: inline-block;
  width: 100px;
}

Answer 3

Answer №2

This amazing code is both efficient and effective:

.inner_a  {
  background-color: green;
  display: table;
  margin: 0 auto;
  width: 100px;
}

.container_one .inner_a  {
    float:left;
}
    .container_one,  .container_two  {
    width:200px;
     height:100px;
     background-color:red;
}

.container_one .inner_b  {
    width:100px;
     background-color:blue;
     float:right;
}

Answer 4

This amazing code is both efficient and effective:

.inner_a  {
  background-color: green;
  display: table;
  margin: 0 auto;
  width: 100px;
}

.container_one .inner_a  {
    float:left;
}
    .container_one,  .container_two  {
    width:200px;
     height:100px;
     background-color:red;
}

.container_one .inner_b  {
    width:100px;
     background-color:blue;
     float:right;
}

Answer 5

Answer №3

If you're looking to achieve a different layout, consider using the CSS property display:inline-block instead of floating elements. You can then style the divs with the class .inner_a specifically when they are the last child within their parent container.

.container_one>div{
    display:inline-block;
    width:100px;
}
.inner_a{
    background-color:green;
}
.inner_a:last-child{
    margin:0 auto;
}
.inner_b{
    background-color:blue;
}

Answer 6

If you're looking to achieve a different layout, consider using the CSS property display:inline-block instead of floating elements. You can then style the divs with the class .inner_a specifically when they are the last child within their parent container.

.container_one>div{
    display:inline-block;
    width:100px;
}
.inner_a{
    background-color:green;
}
.inner_a:last-child{
    margin:0 auto;
}
.inner_b{
    background-color:blue;
}

One inner DIV positioned in the center flanked by two others on either side

Answer №1

Answer №2

Answer №3

Similar questions

A guide on aligning text at the center of a List with an included image

Issue with color display inconsistency in webgrid across various segments

With Jquery, my goal is to position a div outside of another div element

Ensure Bootstrap input maintains a fixed pixel width unless on a smaller screen, where it should expand to

Enhance your iPhone web app with high-resolution retina images!

Ways to apply background to a div element

Incorporating PHP script within a stylesheet

What is the best way to retrieve the unique identifier of dynamically created divs and showcase a message based on that identifier?

The fadeOut() method is currently only functioning on the initial item

Comparing the positions of elements in Selenium WebDriver with PHP

Rearranging Elements with Bootstrap 4 Grid System When Resizing Window

The Impact of Navbar Size across Different Screen Sizes

When CSS width:auto expands beyond its intended length

Does the body element inherit the line height property?

When Ruby on Rails is combined with HTML and CSS and marked as selected, it will be displayed with

Looking to adjust the positioning of text being inserted into a column - unable to utilize text-align or float properties

Sass includes line-specific comments to indicate where a certain definition is located

What could be causing the h4 tag to disappear when a clip path is applied to a sibling div?

I am looking to improve my form submission process by using JavaScript to only submit the form itself, rather than the

What is the correct way to utilize Bootstrap grid offsets?