Tips for aligning a single iframe with two other iframes

I have a total of 3 iframes: iframe_top, iframe_left, and iframe_right.

My goal is to display the two iframes iframe_left and iframe_right side by side.

In addition, I want the iframe iframe_top positioned above them in a way that aligns the left border of iframe_top with the left border of iframe_left and the right border of iframe_top with the right border of iframe_right.

So far, I have successfully achieved placing the two iframes iframe_left and iframe_right next to each other with iframe_top above them: 

<div id="div_top">
    <iframe id="iframe_top" name="iframe_top" src="">
    </iframe>
</div>

<div id="div_main">
    <iframe id="iframe_left" name="iframe_left" src="">
    </iframe>

    <iframe id="iframe_right" name="iframe_right" src="">
    </iframe>
</div>

However, I am struggling to find a way to properly align them.

I attempted setting the same width for the two divs div_top and div_main using CSS:

<style type="text/css">
#div_top {
    width: 100%;
}

#div_main {
    width: 100%;
}
</style>

Unfortunately, this styling did not have any effect. How can I achieve the desired alignment?

htmlcssiframe

Answer №1

When aligning items, using a wrapper is not necessary:

iframe {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
iframe#iframe_top {
    width: 100%;
}
iframe#iframe_left,
iframe#iframe_right {
    width: 50%;
    margin: 0px;
    vertical-align: top;
}
iframe#iframe_left {
    float: left;
}
iframe#iframe_right {
    float: right;
}
<iframe id="iframe_top" src=""></iframe>
<iframe id="iframe_left" src=""></iframe>
<iframe id="iframe_right" src=""></iframe>

While wrappers have their benefits, such as no default borders or margins, making them more layout-friendly (eliminating the need for box-sizing to modify <div>'s default style).

Answer №2

It seems like this might be the solution you've been searching for. To achieve the desired layout, wrap the two bottom iframes in a container element. Set the width of the first iframe to occupy half the space and then position the second one absolutely at 50% of the screen width.

#iframe_top {
    width: 100%;
}

#div_main {
    position: relative;
    width: 100%
}

#iframe_left {
    position: relative;
    width: 50%
}
#iframe_right {
    position: absolute;
    left: 50%;
    width: 50%
}
<div id="div_top">
    <iframe id="iframe_top" name="iframe_top" src="">
    </iframe>
</div>

<div id="div_main">
    <iframe id="iframe_left" name="iframe_left" src="">
    </iframe>

    <iframe id="iframe_right" name="iframe_right" src="">
    </iframe>
</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

Website route organization tool

Seeking assistance with implementing a route planning feature on my website. The user should be presented with multiple route options upon entering their origin and destination. Take a look at this reference site for inspiration: Any help would be great ...

phphtmlcsswebhttps

Creating a dynamic image slider that smoothly glides across a webpage

I've been working on a carousel (image slider) for my website and I need some help. Specifically, I want to reposition the entire slider slightly to the left on the webpage. You can see the slider in action on this site: and I also created a jsfiddle ...

javascriptjqueryhtmlcsstwitter-bootstrap

Trouble encountered with card flip style login form in Vue.js, as the card is not maintaining its position properly during transition animations

Need help styling a login/signup component in Vue.js where flipping between the two cards isn't working smoothly. The transition is causing one card to move down and right while the other comes in from the bottom right. It's hard to explain the i ...

javascripthtmlcssvue-componentvuejs3

Why is the combination of the overlay image, logo, and text not producing the desired outcome?

After adjusting the logo's resolution from 3400x1716 to 99x50 and overlapping it with a picture while adding text, I set the image dimensions to 300 height and 100% width to fill out the page. However, when looking at my code, the logo and text that w ...

htmlcss

IE encounters an absolute z-index problem when expanding concealed content

I'm having trouble with the positioning of a block (div). I am new to CSS, so any help would be greatly appreciated. Here is the code snippet: http://jsfiddle.net/9rEmt/ (please check it out) for viewing online in IE. When I use absolute for positio ...

javascriptjqueryhtmlcss

Leveraging JavaScript Fetch() and formData() for Database Updates

As I delve into my JavaScript project, utilizing the fetch() method, I find myself facing a puzzling situation. Despite having a grasp on the basics of fetch and formData, the code in question appears needlessly complex for its intended purpose, leaving me ...

javascripthtmlajaxfetchform-data

Methods for switching the visibility of table rows

In my XSLT (html) xml style sheets, I am currently toggling the visibility of some table rows. Initially, I hide 3 out of the 6 rows, and then upon clicking, I want to hide 1 row and reveal 3 others. Here is the initial setup: on load xml first row - T ...

jqueryhtmlxslt

Running JavaScript code along with HTML elements extracted from a jQuery ajax callback

Alternatively, not exactly "executing," but rather updating a pre-existing function with a function returned in the response. Step 1 I have an HTML5 page detailing a specific location. The server-side includes a ColdFusion file called "MapFunction.cfm" ...

javascriptjqueryajaxhtml

Dimensions by the height of the content

In this particular div block, I have set a height as shown below: <div> <!-- content --> </div> Along with the following styles: div{ height:100px; } However, I am interested in dynamically adjusting the height of the div base ...

htmlcss

Tips for adding padding to a parent div without affecting a specific child element

This is the desired outcome I am aiming for https://i.sstatic.net/nKiz3.png The parent div has a white background, and I want to add padding to the left, right, and top, without applying it to the last child div. How can this be achieved using CSS? When ...

htmlcssreactjsjsx

Utilizing Jquery UI Autocomplete to Directly Populate a DIV Instead of a Form Field

Could someone lend a helping hand with my question, please? I have code that's functioning perfectly but I'm looking to display one of the selected results in a DIV instead of a form field. I've tried numerous methods on my own, but I can& ...

formsjquery-uihtmlautocomplete

Is there a way to modify the color of a checkbox within MUI?

I'm currently customizing the checkbox color in Material UI while using FormIk for data submission. I aim to change the default checkbox color to red, but I'm unsure about how to achieve this. <FormGroup> <Box display=" ...

cssreactjsformsmaterial-uiformik-material-ui

In next js, the component exceeds 100% overflow when padding is added

https://i.sstatic.net/W30tk.png Hey there, I've been encountering some issues with next js and styled-components. I have a parent component (sc-hgRfpC lbMBdR) with a width of 400px, and swap-div-5 with a width: 100%. However, when I add padding: 12px ...

cssnext.jsstyled-components

Choose a column in a table and organize it in ascending or descending order with the help

Does anyone know how to use JavaScript (without frameworks or plugins) to select and sort a specific column in a table? <table> <thead> <tr> <td>Col1</td> <td>Col2&l ...

javascripthtmlarrayshtml-tabletablesort

Reorganize divisions using Bootstrap

I am exploring different ways to manage responsiveness through the reordering of divs. While I am aiming for a solution that is highly flexible, any suggestion would be appreciated. Desktop View: https://i.stack.imgur.com/boSOa.png Mobile View: https:// ...

javascriptjqueryhtmlcsstwitter-bootstrap

How can you give a custom icon to the 'startIcon' of a MaterialUI button?

Below is the current code I am using: import { Button, Grid, Typography, } from '@material-ui/core'; import EditOutlinedIcon from '@material-ui/icons/EditOutlined'; <Grid item> <Button variant="outlined" ...

cssreactjsmaterial-ui

Utilizing JQuery to populate DIVs with JSON information

Hey! I recently received some helpful advice from a coding expert, and now I'm in the process of restructuring my code based on these recommendations: When using $.each(), you have the option to return true or false. If you return false, the loop wi ...

javascriptjqueryhtmlcssjson

Display the HTML content as a string using jQuery

I am working with JS code that uses jQuery to display errors from an array in a bootstrap container: var errors = [{ "Message": "The source document is not valid. Please see the 'Schema Validation Issues' section above at column &1, line ...

javascriptjqueryhtmlbootstrap-4

When utilizing Xpath, it consistently triggers the Python <li> element as the first child

I am attempting to click on multiple links with the following code: self.browser.find_element_by_xpath("//li[@onclick[contains(text(),"+origin_iata_code+")]]").click() The origing_iata_code is from this list: ['FLL', 'MCO', 'AFL ...

pythonhtmlseleniumonclickhtml-lists

The presence of ng-show dynamically adjusts the minimum height of a div element

I am encountering an issue with a div that has the class of wrapper. Inside this div, there is a parent div with the class of content-wrapper. The wrapper div includes a conditional directive ng-show which toggles between displaying or hiding its content. ...

javascripthtmlcssangularjs