How can you position inline-block elements within a flex container?

I have a main div set up as a flex box. Inside this main div, there will be three elements positioned as inline-block: two advertisements on the left and right sides, with the content in between. My goal is to have the advertisements aligned to the left and right, and have the content in the middle act as if the ads were the margins of the page. I'm currently using a lot of   spaces to create this layout, but I'm wondering if there's a more direct way to place the two ads on either side of the flex box. I've tried using the position:right and float:right; properties, but they didn't produce the desired results.

Here's the code snippet:

<!---==MAIN FLEX BOX==-->
<div id="content-flex" style="display:flex;">


    <!--====LEFT SIDE ADVERTISEMENT====-->

    <div style="display:inline-block; position:left;">
        <span style="color:white;">Advertisement</span><br/>
        <a href="http://www.bmw.com.au" target="_blank">
            <img src="https://media.giphy.com/media/zuTk53kSNOJJC/giphy.gif" />
        </a><br/>
    </div>

    <!--LOTS OF &nbsp; USED HERE-->



    <!--====MIDDLE CONTENT====-->

    <div style="display:inline-block;">

        <p>Loreum Ipsum...</p>

    </div>

    <!--LOTS OF &nbsp; USED HERE-->



    <!--====RIGHT SIDE ADVERTISEMENT====-->

    <div style="display:inline-block; position:right;">
        <span style="color:white;">Advertisement</span><br/>
        <a href="http://www.bmw.com.au" target="_blank">
            <img src="https://media.giphy.com/media/zuTk53kSNOJJC/giphy.gif" />
        </a>

    </div>

</div>

Currently, this is how the page appears:

https://i.sstatic.net/A8CgQ.png

htmlcssflexbox

Answer №1

By applying the flex: 1 property to the middle div, it will expand to occupy all the available space, pushing the right ad to the right side. Additionally, setting display: flex on the parent element will disable the float property on its child elements.

#content-flex > div:nth-child(2) {
  flex: 1;
}
<div id="content-flex" style="display:flex;">

  <div>
    <span style="color:white;">Advertisement</span>
    <br/>
    <a href="http://www.bmw.com.au" target="_blank">
      <img src="https://media.giphy.com/media/zuTk53kSNOJJC/giphy.gif" />
    </a>
    <br/>
  </div>

  <div>
    <p>Loreum Ipsum...</p>
  </div>

  <div >
    <span style="color:white;">Advertisement</span>
    <br/>
    <a href="http://www.bmw.com.au" target="_blank">
      <img src="https://media.giphy.com/media/zuTk53kSNOJJC/giphy.gif" />
    </a>
  </div>

</div>

Answer №2

To enhance the layout of your outer div, consider applying the following style:

justify-content: space-between;

You may also try:

justify-content: space-around;

For additional alignment options using flex, check out this resource.

Answer №3

Here is an example of managing layout using the flexbox model:

#content-flex,
#AdLft,
#AdRgt{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  flex-direction: row;
}
.Middle{
  width:100%;
}
<div id="content-flex">

  <div id="AdLft">
    <a href="http://www.bmw.com.au" target="_blank">
      <img src="https://media.giphy.com/media/zuTk53kSNOJJC/giphy.gif" />
    </a>
  </div>

  <div class="Middle">
    <p>Loreum Ipsum...</p>
  </div>

  <div id="AdRgt">
    <a href="http://www.bmw.com.au" target="_blank">
      <img src="https://media.giphy.com/media/zuTk53kSNOJJC/giphy.gif" />
    </a>
  </div>

</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What could be causing the slider element to select the incorrect value in Firefox and Internet Explorer?

Attempting to test a slider control on a webpage using Selenium, here is the HTML: <div class="slider theme1 ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all" data-action="Slider" data-step="True" da ...

htmlseleniumslider

Does Google's caching process differ when using <span> tags instead of <h> tags for headings?

Does the choice between using <span class="heading"> and <h> tags impact search engine optimization for Google? As I'm constructing a website, I decided to style the headings and subheadings with <span>. However, I began to wonder i ...

htmlcssseo

The inner panel height does not extend to 100% when there is overflow

When pressing the submit button on a panel containing components, an overlay appears but does not cover the entire parent panel if scrolled to the bottom. Additionally, I want the spinner to always be centered, whether scrolling or not. I've tried usi ...

htmlcssangular

Instructions on creating a simple text-based menu and sub-menu without any images or graphics

I'm currently working on implementing a drop-down menu for my website, which can be found at The menu I am trying to create should appear under the Health & Fitness and Gaming sections as a text-only drop-down. I've been experimenting with s ...

htmltextdrop-down-menu

Is there a way to make the primary button on the previous page function correctly again, just like it did before it was clicked?

Issue Description: I am facing an issue on the order page where I need to link the "Continue" button to a booking page. After reaching the booking page, I expect users to be able to navigate between the two pages seamlessly even when they use the browser& ...

javascripthtml

Hide the menu when a user taps on an item on mobile or tablet devices

I'm facing a unique challenge and could use some guidance. The issue is with the mobile version of my website, accessible at . On tablets or mobile devices, the menu is condensed into a button. To navigate through the menu, I have to click the button ...

javascripthtmlcssmobile

AngularJS button click not redirecting properly with $location.path

When I click a button in my HTML file named `my.html`, I want to redirect the user to `about.html`. However, when I try using `$location.path("\about")` inside the controller, nothing happens and only my current page is displayed without loading `abou ...

javascripthtmlangularjsnode.js

Customizing the arrow of a Bootstrap tooltip and adjusting its positioning

I've implemented a bootstrap tooltip to show an image in it. So far, I've been successful in achieving this. https://i.sstatic.net/hgzyL.png However, my current requirement is as follows: https://i.sstatic.net/xcxWZ.png I would like to adjust ...

javascripthtmlcssbootstrap-4

Repetitive Anchor IDs and Web Standards Compliance

Today, I encountered the task of converting outdated attributes on a page to make it more XHTML friendly. This led me to consider the anchor tag and its usage: Initially, I had anchor tags in the form of <a name="someName"></a>. However, upon ...

htmlasp.netvb.netxhtmlw3c

Mysterious gap found between image and table

Hey there! I've been struggling with an unusual gap between a top image and a table on my website (www.tradecaptaincoaching.com). The table was created using . Despite spending hours on it, I can't seem to get rid of the huge 200 pixel gap that& ...

htmlcss

The CSS float is positioned beneath the Bootstrap navigation bar

Having an issue with the menu bars in my Rails 4 app. Specifically, I'm struggling with two divs overlapping. The goal is to align the "Register" and "Log In" blocks with the left-hand side menu while floating right. It should not float slightly belo ...

csstwitter-bootstraptwitter-bootstrap-3

Tips for resolving an issue with an overflowing Uber React-Vis multicolor bar chart

I am trying to create a multi-colored bar chart using Uber's react-vis library. However, I am encountering an issue where the leftmost bar of the chart is overflowing below the YAxis instead of remaining contained to the right of it. You can view the ...

javascriptcssreactjsreact-vis

The art of fluidly positioning elements in Bootstrap columns

My goal is to showcase objects in 3 columns using Bootstrap 4. However, when I implement the code provided, the objects are only displayed in a single column, as shown here: example of 1 column layout. What I actually want is for the objects to be arrange ...

cssangularjstwitter-bootstrapbootstrap-4

Show secret information once radio button is selected through JQuery code

I am dealing with two checkboxes ABC XYZ When the ABC checkbox is checked, the abc content div is displayed, and when the XYZ checkbox is checked, the xyz content div is shown. Everything works fine, except that if the ABC checkbox is checked by defaul ...

jqueryhtmlcss

What methods can I use to achieve a stylish and responsive design for my images?

I have been encountering difficulties styling the images for my website. Despite multiple attempts, I am unable to apply CSS properties such as border-radius and responsive design to the images on my page. The images load fine, but they do not seem to acce ...

htmlcssimageresponsive

How to deactivate or modify the href attribute of an anchor element using jQuery

My HTML code looks something like this: <div id="StoreLocatorPlaceHolder_ctl07_ctl00_ctl00_pager_ctl00_ctl00_numeric" class="sf_pagerNumeric"> <a href="http://www.domain.com/store-list">1</a> <a href="http://www.domain.com/sto ...

javascriptjqueryhtml

The dimensions of my textarea and input field are different

Just starting out with HTML and CSS here. I'm trying to use flexbox to create a form, but the width of my input fields and text area is off for some reason. Any ideas on what might be missing from my code? Thanks in advance! Here's the CSS I&apo ...

htmlcss

Incorporating a dropdown menu into an HTML table through jQuery proves to be a

I loaded my tabular data from the server using ajax with json. I aimed to generate HTML table rows dynamically using jQuery, with each row containing elements like input type='text' and select dropdowns. While I could create textboxes in columns ...

javascriptjqueryhtmlajax

Display when moving up and conceal when moving down

Is there a way to make the div appear when scrolling up and down on the page? I'm new to jquery and could use some assistance, please. ...

javascriptjqueryhtmlcss

Utilize jQuery to create a dynamic image swapping and div showing/hiding feature

I'm having trouble implementing a toggle functionality for an image and another div simultaneously. Currently, when the image is clicked, it switches to display the other div, but clicking again does not switch it back. Can someone please advise on wh ...

javascriptjqueryhtmlcss