This question already has answers here:
How can I align two divs horizontally? [duplicate]
(10 answers)
Closed 4 years ago.
I'm having trouble trying to align two divs in a wordpress page. Here is my code:
div.container {
width: 100%;
}
div.left {
float: left;
}
div.right {
float: right;
}
<div class="container">
<div class="left">
<p id="cagliari" class="rtejustify" style="text-align: left;">Text Text Text</p>
<iframe style="border: 0;" src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d12364.675124477504!2d9.1242403!3d39.2163323!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0xad759bffc1fbf334!2sItalSecurity+Agency+%7C+Agenzia+Investigativa!5e0!3m2!1sit!2sit!4v1469542451708" width="400" height="300" frameborder="0" allowfullscreen="allowfullscreen"></iframe></div>
<div class="right">
<p id="oristano" class="rtejustify" style="text-align: left;">Text Text Text</p>
<iframe style="border: 0;" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3060.6645205664345!2d8.584972315150939!3d39.90414279457802!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x12dd9be3f40242ad%3A0x11a591da0ed6a074!2sItal%40Security+Agency!5e0!3m2!1sit!2sit!4v1469543170307" width="400" height="300" frameborder="0" allowfullscreen="allowfullscreen"></iframe></div>
</div>
But it doesn't works properly
Just use float: left and width 1/2 on both div
div.container {
width: 100%;
}
.div {
float: left;
width: 50%;
}
<div class="container">
<div class="div">
<p id="cagliari" class="rtejustify" style="text-align: left;">Text Text Text</p>
<iframe style="border: 0;" src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d12364.675124477504!2d9.1242403!3d39.2163323!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0xad759bffc1fbf334!2sItalSecurity+Agency+%7C+Agenzia+Investigativa!5e0!3m2!1sit!2sit!4v1469542451708" width="400" height="300" frameborder="0" allowfullscreen="allowfullscreen"></iframe></div>
<div class="div">
<p id="oristano" class="rtejustify" style="text-align: left;">Text Text Text</p>
<iframe style="border: 0;" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3060.6645205664345!2d8.584972315150939!3d39.90414279457802!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x12dd9be3f40242ad%3A0x11a591da0ed6a074!2sItal%40Security+Agency!5e0!3m2!1sit!2sit!4v1469543170307" width="400" height="300" frameborder="0" allowfullscreen="allowfullscreen"></iframe></div>
</div>
Blockquote
Give
**display:inline-block;
for both div elements
Try this, you need to assign width to both your .left and .right and even to iframes present insides those div.
body{
margin:0;
}
.container {
width: 100%;
}
.container > .left {
float: left;
width:49%;
height:auto;
}
.container > .right {
float:right;
width:49%;
height:auto;
margin-left:1%;
}
<div class="container">
<div class="left">
<p id="cagliari" class="rtejustify" style="text-align: left;">Text Text Text</p>
<iframe style="border: 0;" src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d12364.675124477504!2d9.1242403!3d39.2163323!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0xad759bffc1fbf334!2sItalSecurity+Agency+%7C+Agenzia+Investigativa!5e0!3m2!1sit!2sit!4v1469542451708" width="100%" height="300" frameborder="0" allowfullscreen="allowfullscreen"></iframe></div>
<div class="right">
<p id="oristano" class="rtejustify" style="text-align: left;">Text Text Text</p>
<iframe style="border: 0;" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3060.6645205664345!2d8.584972315150939!3d39.90414279457802!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x12dd9be3f40242ad%3A0x11a591da0ed6a074!2sItal%40Security+Agency!5e0!3m2!1sit!2sit!4v1469543170307" width="100%" height="300" frameborder="0" allowfullscreen="allowfullscreen"></iframe></div>
</div>
The best way to achieve this is using flex-box
flex-box also help you to achieve responsiveness also. I've added media-query of just one line to make it responsive on mobile screen. In mobile screen it will come like one below the other and in desktop it will come side by side (You can remove media-query if you dont want).
div.container {
display: flex;
}
.container div{
margin: 1em;
}
#media screen and (max-width: 480px){
div.container{
flex-direction: column;
}
}
<div class="container">
<div class="left">
<p id="cagliari" class="rtejustify" style="text-align: left;">Text Text Text</p>
<iframe style="border: 0;" src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d12364.675124477504!2d9.1242403!3d39.2163323!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0xad759bffc1fbf334!2sItalSecurity+Agency+%7C+Agenzia+Investigativa!5e0!3m2!1sit!2sit!4v1469542451708" width="400" height="300" frameborder="0" allowfullscreen="allowfullscreen"></iframe></div>
<div class="right">
<p id="oristano" class="rtejustify" style="text-align: left;">Text Text Text</p>
<iframe style="border: 0;" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3060.6645205664345!2d8.584972315150939!3d39.90414279457802!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x12dd9be3f40242ad%3A0x11a591da0ed6a074!2sItal%40Security+Agency!5e0!3m2!1sit!2sit!4v1469543170307" width="400" height="300" frameborder="0" allowfullscreen="allowfullscreen"></iframe></div>
</div>
Here is the updated Demo
try this
div.container {
width: 100%;
display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
display: -ms-flexbox; /* TWEENER - IE 10 */
display: -webkit-flex; /* NEW - Chrome */
display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
}
div.right {
margin-left:10px;
}
<div class="container">
<div class="left">
<p id="cagliari" class="rtejustify" style="text-align: left;">Text Text Text</p>
<iframe style="border: 0;" src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d12364.675124477504!2d9.1242403!3d39.2163323!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0xad759bffc1fbf334!2sItalSecurity+Agency+%7C+Agenzia+Investigativa!5e0!3m2!1sit!2sit!4v1469542451708" width="400" height="300" frameborder="0" allowfullscreen="allowfullscreen"></iframe></div>
<div class="right">
<p id="oristano" class="rtejustify" style="text-align: left;">Text Text Text</p>
<iframe style="border: 0;" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3060.6645205664345!2d8.584972315150939!3d39.90414279457802!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x12dd9be3f40242ad%3A0x11a591da0ed6a074!2sItal%40Security+Agency!5e0!3m2!1sit!2sit!4v1469543170307" width="400" height="300" frameborder="0" allowfullscreen="allowfullscreen"></iframe></div>
</div>
Related
Hello Im trying to add a title under a video for a site I'm building. I using an iframe in a flex-box. I tried adding another flex-box with just text and I can align the text with the videos above. Im very new to all of this and after 2 hours of trying to figure it out I wanted to see if anyone can point me in the right direction maybe. Thanks,
.box-tricks {
display: flex;
flex-direction: row;
justify-content: space-around;
padding-top: 20px
}
<div class="box-tricks">
<iframe width="300" height="300" src="https://youtube.com/embed/BzGHbj7lquk"
frameborder="0" allowfullscreen>></iframe>
<iframe width="300" height="300" src="https://youtube.com/embed/DGBBkqamB80"
frameborder="0" allowfullscreen>></iframe>
<iframe width="300" height="300" src="https://youtube.com/embed/KRZtEXDeLVc"
frameborder="0" allowfullscreen>></iframe>
</div>
You should wrap each iframe tag inside another tag. Not only to put the title inside but to make your CSS cleaner.
TIP: Better for SEO if you make the tag with the title as h2 or `h3. Depends of the whole page tags order.
.box-tricks {
display: flex;
flex-direction: row;
justify-content: space-around;
padding-top: 20px
}
<div class="box-tricks">
<div class="iframe-wrapper">
<iframe width="300" height="300" src="https://youtube.com/embed/BzGHbj7lquk"
frameborder="0" allowfullscreen>></iframe>
<div class="iframe-wrapper__title">MY TITLE</div>
</div>
<div class="iframe-wrapper">
<iframe width="300" height="300" src="https://youtube.com/embed/BzGHbj7lquk"
frameborder="0" allowfullscreen>></iframe>
<div class="iframe-wrapper__title">MY TITLE</div>
</div>
<div class="iframe-wrapper">
<iframe width="300" height="300" src="https://youtube.com/embed/BzGHbj7lquk"
frameborder="0" allowfullscreen>></iframe>
<div class="iframe-wrapper__title">MY TITLE</div>
</div>
</div>
the right way is to create a wrapper div for iframes and put the title in the div element.
.box-tricks { display: flex; flex-direction: row; justify-content: space-around;
padding-top: 20px } .title { margin-top: 20px; text-align: center; }
<div class="box-tricks">
<div>
<iframe
width="300"
height="300"
src="https://youtube.com/embed/BzGHbj7lquk"
frameborder="0"
allowfullscreen
>></iframe
>
<div class="title">title</div>
</div>
<div>
<iframe
width="300"
height="300"
src="https://youtube.com/embed/DGBBkqamB80"
frameborder="0"
allowfullscreen
>></iframe
>
<div class="title">title</div>
</div>
<div>
<iframe
width="300"
height="300"
src="https://youtube.com/embed/KRZtEXDeLVc"
frameborder="0"
allowfullscreen
>></iframe
>
<div class="title">title</div>
</div>
</div>
I have an HTML, which is displaying a lot of PDF files. They are arranged in a table, and the table scales dynamically.
For a while this format was working:
.main .work {
display: table-row;
width: 100%;
height: 100%;
float: left;
position: relative;
overflow: hidden;
}
.main .work .media {
width: 100%;
}
.main .work .caption {
position: absolute;
display: block;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: #ffffff;
opacity: 0;
}
.main .work a:hover .caption {
opacity: 1;
}
<table width="100%" height="100%" border="1" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td width="33%" height="100%">
<div class="work">
<a href="inner_004.html">
<embed src="https://www.oic.qld.gov.au/__data/assets/pdf_file/0006/7755/other-sample-googleanalytics-report.pdf#toolbar=0&navpanes=0&scrollbar=0" width="100%" height="100%" type="application/pdf" padding-bottom="1000pt">
<div class="caption">
<div class="work_title">
<h1>Report1</h1>
</div>
</div>
</a>
</div>
</td>
<td width="33%" height="100%">
<div class="work">
<a href="inner_005.html">
<embed src="http://www.googleguide.com/print/adv_op_ref.pdf#toolbar=0&navpanes=0&scrollbar=0" width="100%" height="100%" type="application/pdf" padding-bottom="1000pt">
<div class="caption">
<div class="work_title">
<h1>Report2</h1>
</div>
</div>
</a>
</div>
</td>
<td width="33%" height="100%">
<div class="work">
<a href="inner_006.html">
<embed src="https://www.oic.qld.gov.au/__data/assets/pdf_file/0006/7755/other-sample-googleanalytics-report.pdf#toolbar=0&navpanes=0&scrollbar=0" width="100%" height="100%" type="application/pdf" padding-bottom="1000pt">
<div class="caption">
<div class="work_title">
<h1>Report3</h1>
</div>
</div>
</a>
</div>
</td>
<td width="1%">
<div class="work">
<a href="MQBOVERALL.html">
<img src="https://assets.mspcdn.net/t_c-desktop-normal,f_auto,q_auto,d_c:noimage.jpg/c/12200-67-3.jpg" class="media" alt="">
</a>
</div>
</td>
</tr>
</tbody>
</table>
The HTML was working fine for a while, the PDFs were scaling with the table. I even have that Scaler image at the end of the table as a 4th cell, which makes sure that the cells should have a ration of 1:1.
I think in one of the recent updates in chrome made this happen.Now it's completely broken, and the PDFs have a fixed height. Is there any way to fix this?
Thank you in advance!
Edit: The same goes when I try to insert an HTML instead of the PDF:
<td width="33%" height="100%">
<div class="work">
<a href="inner_010.html">
<iframe src="https://www.google.com/" width="200%" height="190%" style="-webkit-transform:scale(0.5);-webkit-transform-origin: top left;-moz-transform: scale(0.5, 0.5); -moz-transform-origin: top left;">
<p>Your browser does not support iframes.</p>
</iframe>
<div class="caption">
<div class="work_title">
<h1>Measurement and Analysis<br>Overview</h1>
</div>
</div>
</a>
</div>
</td>
Edit2:
So basically a while ago this code resulted PDFs and HTML previews dinamically scaling with the other elements of the table. As you can seee there's that scaler image, which scales well if I change my window size in the live version. However the PDF and HTML previews' height remains a constant 150 for some reason. I want them to scale with the image, however only their with is scaling, not their height.
I am building a website: http://akce.region-tour.cz/ahoj-vsichni/
If you scroll down, you will see 4 boxes (pictures with a link above). Every image is on a different row now. What I want to do is to style It, so there are two rows and each row has two boxes (see picture)
THIS IS HOW I WANT IT
<div style="width: 400px;">Krkonoše<img class="alignleft size-full wp-image-131" src="http://akce.region-tour.cz/wp-content/uploads/2017/08/krkonose.jpg" alt="Krkonoše" width="400" height="150" /></div>
<div style="width: 400px;">Lužické hory<img class="size-full wp-image-132 alignleft" src="http://akce.region-tour.cz/wp-content/uploads/2017/08/luzicke-hory.jpg" alt="Lužické hory" width="400" height="150" /></div>
<div style="width: 400px;">Krkonoše<img class="alignleft size-full wp-image-133" src="http://akce.region-tour.cz/wp-content/uploads/2017/08/orlicke-hory.jpg" alt="orlické hory" width="400" height="150" /></div>
<div style="width: 400px;">Jizerské hory<img class="alignleft size-full wp-image-130" src="http://akce.region-tour.cz/wp-content/uploads/2017/08/jizerky.jpg" alt="Jizerské hory" width="400" height="150" /></div>
you would make two rows, and each row has a right and left div
.row {
float:left;
width:100%;
margin:1em 0;
}
.row .left {
width:48%;
float:left;
}
.row .right {
width:48%;
float:right;
}
<div class="row">
<div class="left">img here</div>
<div class="right">img here</div>
</div>
<div class="row">
<div class="left">img here</div>
<div class="right">img here</div>
</div>
my above example is clean html and css and fully responsive.
There are numerous solutions and #HollerTrain provides a clean one. Here is a different solution using CSS3 flexbox which I find to be an excellent construct for providing flexible layouts.
CSS
.flex-container {
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
width: 850px;
}
.flex-container div {
width: 400px;
height: 160px;
margin: 10px;
}
HTML
<div class="flex-container">
<div style="width: 400px;">Krkonoše<img class="alignleft size-full wp-image-131" src="http://akce.region-tour.cz/wp-content/uploads/2017/08/krkonose.jpg" alt="Krkonoše" width="400" height="150" /></div>
<div style="width: 400px;">Lužické hory<img class="size-full wp-image-132 alignleft" src="http://akce.region-tour.cz/wp-content/uploads/2017/08/luzicke-hory.jpg" alt="Lužické hory" width="400" height="150" /></div>
<div style="width: 400px;">Krkonoše<img class="alignleft size-full wp-image-133" src="http://akce.region-tour.cz/wp-content/uploads/2017/08/orlicke-hory.jpg" alt="orlické hory" width="400" height="150" /></div>
<div style="width: 400px;">Jizerské hory<img class="alignleft size-full wp-image-130" src="http://akce.region-tour.cz/wp-content/uploads/2017/08/jizerky.jpg" alt="Jizerské hory" width="400" height="150" /></div>
</div>
Fiddle
<html>
<head>
<style>
.row{
width:100%;
float:left;
margin:0 auto;
}
.colum1{
width:48%;
float:left;
margin:0 auto;
}
.colum2{
width:48%;
float:right;
margin:0 auto;
}
.colum3{
width:48%;
float:left;
margin:0 auto;
}
.colum4{
width:48%;
float:right;
margin:0 auto;
}
</style>
</head>
<body>
<div class="row">
<div class="colum1">
content here..
</div>
<div class="colum2">
content here..
</div>
<div class="colum3">
content here..
</div>
<div class="colum4">
content here..
</div>
</div><!-- ./row -->
</body>
</html>
I have this code:
<div align="center">
<iframe scrolling="no" src="//blockadz.com/ads/show/show.php? a=6NJWBKLSGP8CY&b=OYEPEGYYZ996L" style="overflow:hidden;width:468px;height:60px;" frameborder="0"; padding- bottom: 20px; display:inline-block;></iframe>
</div>
<div style="text-align:center;">
Advertise in this spot
</div>
<div align="center">
<iframe scrolling="no" src="//blockadz.com/ads/show/show.php? a=6NJWBKLSGP8CY&b=OYEPEGYYZ996L" style="overflow:hidden;width:468px;height:60px;" frameborder="0"; padding- bottom: 20px; display:inline-block;></iframe>
</div>
<div style="text-align:center;">
Advertise in this spot
</div>
I want to show in the same row, but don't know how?
I tried adding: display:inline-block; and white-space: nowrap; but nothing changed.
Any help?
Try adding CSS float to your main divs
<div style="float:left;">
<div align="center">
<iframe bottom:="" frameborder="0" padding-="" scrolling="no" src="//blockadz.com/ads/show/show.php?%20a=6NJWBKLSGP8CY&b=OYEPEGYYZ996L" style="overflow:hidden;width:468px;height:60px;"></iframe>
</div>
<div style="text-align:center;">
Advertise in this spot
</div>
</div>
<div style="float:right;">
<div align="center">
<iframe bottom:="" frameborder="0" padding-="" scrolling="no" src="//blockadz.com/ads/show/show.php?%20a=6NJWBKLSGP8CY&b=OYEPEGYYZ996L" style="overflow:hidden;width:468px;height:60px;"></iframe>
</div>
<div style="text-align:center;">
Advertise in this spot
</div>
</div>
See in jsfiddle
Two divs with width 50%:
HTML
<div id="first_column">
<div align="center">
<iframe width="560" height="315" src="https://www.youtube.com/embed/CevxZvSJLk8" frameborder="0" allowfullscreen></iframe>
</div>
<div style="text-align:center;">
Advertise in this spot
</div>
</div>
<div id="second_column">
<div align="center">
<iframe width="560" height="315" src="https://www.youtube.com/embed/CevxZvSJLk8" frameborder="0" allowfullscreen></iframe>
</div>
<div style="text-align:center;">
Advertise in this spot
</div>
</div>
CSS
#first_column,
#second_column {
width: 50%;
}
#first_column {
float:left;
}
#first_column {
float:right;
}
Example:
http://codepen.io/anon/pen/vyWrbX
You have a couple of different issues going on here:
You have invalid markup on the iframes (some of your CSS is outside the "style" attribute so won't have any effect.)
Your "advertise in this spot" divs are full page width, which will interfere with the side-by-side layout you're attempting to apply to the iframes.
The simplest solution is to add parent containers to each set of iframe-plus-link, and apply the layout to those containers. For clarity here I've pulled your inline CSS out into class declarations, and changed the sizes to fit within the SO layout, but you can adjust this to whatever sizes and styles you like:
.container {
width: 200px;
display:inline-block;
}
iframe {
height: 100px;
width: 200px;
}
.ad {
text-align:center
}
<div class="container">
<iframe src="//example.com"></iframe>
<div class="ad">Advertise in this spot</div>
</div>
<div class="container">
<iframe src="//example.com"></iframe>
<div class="ad">Advertise in this spot</div>
</div>
Just add css to the siblings elements (in this case the parent <div> element) to make them show in the same line, like
div[align] { display: inline-block; }
or
div[align] { float: left; }
and define a width for them (if they are adapting to content width they can get on new line if too big)
div[align] { width: 50%; }
iframe { width: 100%; } /* or max-width */
I am trying to have a youtube video side by side with some text. My HTML is the following (http://jsfiddle.net/N5j7L/):
<div style="width: 100%; display: table;">
<div style="display: table-row">
<div style="width: 600px; display: table-cell;">
something</br>
something</br>
something</br>
something</br>
something</br>
something</br>
</div>
<div style="display: table-cell;">
<iframe width="480" height="360" src="http://www.youtube.com/embed/gDNsePOQVzU&list=UUoUXxtd712vGe5p5lBk_eMg?rel=0" frameborder="0" allowfullscreen></iframe>
</div>
</div>
</div>
I do not understand why the first column starts lower than the second one. Should I add something to CSS? Without iframe everything looks good.
Try this (added vertical-align:top for the left column):
<div style="width: 100%; display: table;">
<div style="display: table-row">
<div style="width: 600px; display: table-cell; vertical-align:top;">
something<br/>
something<br/>
something<br/>
something<br/>
something<br/>
something<br/>
</div>
<div style="display: table-cell;">
<iframe width="480" height="360" src="http://www.youtube.com/embed/gDNsePOQVzU&list=UUoUXxtd712vGe5p5lBk_eMg?rel=0" frameborder="0" allowfullscreen></iframe>
</div>
</div>
</div>
You can directly use a table. If it isn't a restriction, then the following works.
<table cellpadding="15">
<tr>
<td>
<iframe width="480" height="360" src="http://www.youtube.com/embed/gDNsePOQVzU&list=UUoUXxtd712vGe5p5lBk_eMg?rel=0" frameborder="0" allowfullscreen></iframe><br/>
Video 1
</td>
<td>
<iframe width="480" height="360" src="http://www.youtube.com/embed/gDNsePOQVzU&list=UUoUXxtd712vGe5p5lBk_eMg?rel=0" frameborder="0" allowfullscreen></iframe>
<br/>
Video 2
</td>
</tr>
</table>
See the updated fiddle http://jsfiddle.net/N5j7L/4/
I would do it with simple flow layout. Flow your description to the left. then set a margin to the iframe container as width as your text block:
<div style="overflow: auto;">
<div style="width: 100px; float: left;">
<!-- text -->
</div>
<div style="margin-left: 100px;">
<iframe ...></iframe>
</div>
</div>
example: http://jsfiddle.net/N5j7L/1/