I'm using divs to create margins on the left and right side of the page. In this JSfiddle you can see that this method works for paragraphs but not on a div with soundcloud embeds. In the fiddle I'm using 'padding' instead of 'margin' in order to display the area of the intended margin better.
How can I affect the soundcloud embeds with a margin?
The CSS looks like this:
* {
margin: 0;
padding: 0;
}
.left-margin {
float: left;
height: 100vh;
padding-left: 200px;
border-style: solid;
border-color: green;
}
.right-margin {
float: right;
height: 100vh;
padding-right: 100px;
border-style: solid;
border-color: green;
}
#sc /*soundcloud*/ {
position: absolute;
margin: 0 auto;
left: 0;
right: 0;
max-width: 520px;
}
The margins don't apply to the iframes because you are absolutely positioning them. Make them inside the flow.
http://jsfiddle.net/g6hk0va5/4/
HTML
<div id="content">
<p>One morning, as Gregor Samsa was waking up from anxious dreams, he discovered that in his bed he had been changed into a monstrous verminous bug. He lay on his armour-hard back and saw, as he lifted his head up a little, his brown, arched abdomen divided up into rigid bow-like sections. From this height the blanket, just about ready to slide off completely, could hardly stay in place. His numerous legs, pitifully thin in comparison to the rest of his circumference, flickered helplessly before his eyes.</p>
<iframe width="100%" height="197" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/3829252&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&visual=true"></iframe>
<iframe width="100%" height="197" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/154829271&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&visual=true"></iframe>
</div>
CSS
#content {
padding: 0 100px 0 200px;
}
Related
I've succeeded in doing this a dozen different ways on desktop, but nothing seems to work on a mobile phone.
I've tried:
- relative positions, absolute positions
- float
- various combinations of widths, margins and paddings
- I even tried using a 1x2 table, where the first cell used width to push the 2nd cell over to the right
Can it even be done? Surely I've seen it done?
How do you position a div containing iframe on right-hand side of screen?
You might try putting a wrapper around the iframe, then positioning the wrapper.
css
body {
position: relative;
width: 100%;}
.wrapper {
position: absolute;
right: 0;}
html
<div class="wrapper">
<iframe src="https://www.w3schools.com">
</iframe>
</div>
Without seeing the complete html/css of both the page and the iframe, that's the best recommendation I have. The iframe itself can (and likely does) have it's own CSS, so keep that in mind too.
Here is a working example https://www.w3schools.com/code/tryit.asp?filename=G86JSY65NPG2
The iframe contents didn't load properly on my mobile, but the iframe box is still there and positioned on the right.
OK, I finally managed something like it using tables.
Not only got on the right hand side, but also bottom right, which was a further goal.
<table id="table"><tr>
<td id="cell1"> </td>
<td id="cell2">
<div id="video">
<iframe src="https://www.youtube.com/embed/.......></iframe>
</div>
</td>
</tr></table>
html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
overflow: hidden;
position: relative;
}
#table {
height:100%;
width:100%;
}
#cell1 {
width:100%;
}
#video {
position: absolute;
width: 50vmax;
height: 50vmax;
right: -25vmax;
padding-bottom: 20vmax;
}
#video iframe {
border: 0px;
padding-bottom: 20vmax;
padding-top: 0vmax;
width: 20vmax;
height: 20vmax;
}
I need to create a page where I have 2 iframes next to each other with 100% height.
The left frame needs to have a fixed width of 140px and the right one needs to take the width of the rest of the screen. Keep in mind that both frames need to have 100% height.
Since there are different size screens I can't set a fixed with on the right iframe as I want it to take all the screen after the first 140px;
I kinds got it to work while using precentage. But the problem with percentage is the the left menu sometime show very wide
I created a fiddle to show you what I have done so far
http://jsfiddle.net/mwg3j17d/16/
#main_block {
display: block;
width: 100% height: 100%;
}
#left_frame {
width: 25%;
}
#right_frame {
width: 75%;
}
#left_frame,
#right_frame {
float: left;
}
iframe {
box-sizing: border-box;
}
.b_footer {
padding: 10px;
width: 100%;
background-color: blue;
text-align: center;
color: white: font-weight: bold;
}
<div id="main_block">
<iframe id="left_frame" src=""></iframe>
<iframe id="right_frame" src=""></iframe>
</div>
<div class="b_footer">
Footer
</div>
As you can tell, there are couple of problems with my code.
The footer background's color for some reason is also showing where under the iframs.
The second problem is that I am using 25% width for the left iframe where it should be set to 140px
Finally, the height of the iframe is not taking the entire height of the screen.
How can I correct the problems mention above?
EDITED
I also tried to use Table to get the job done but the left iframe does not have the correct width. Here is an updated Fiddle to show you
http://jsfiddle.net/mwg3j17d/19/
You can use width: calc(100% - 140px) to create your right column. Also, your .b_footer style was too large (10px padding + 100% + 10px padding) because you didn't specify box-sizing: border-box, so I added it.
Using float takes the elements out of the normal html flow, and has
odd side effects if you don't fully understand them. Use
display:inline block instead.
Use width: calc(100% - 140px) to create your right column.
Use 100vh for the height instead of 100%;
You will have issues with the footer because again, 100% + whatever the footer size is always going to be larger than the page height. Easiest solution is to fix the size of the footer, and use that in a height calculation.
I've added html,body { margin:0; padding:0; } to remove the margins and padding. If you want them, add them back manually so that all browsers will use the same values, and use the new values in your width/height calcs.
html,body { margin:0; padding: 0; }
#main_block {
display: block; /* Useless, divs are display:block */
width: 100%; /* Useless, display:block elements are width:100% by default */
height: 100%; /* Fairly useless now, should take children's height */
font-size:0; /* Force space between inline-block elements to be 0 */
}
#left_frame {
width: 140px;
}
#right_frame {
width: calc(100% - 140px);
}
#left_frame,#right_frame {
display: inline-block;
box-sizing: border-box;
height: calc(100vh - 50px);
}
.b_footer {
padding: 10px;
height: 50px;
background-color: blue;
text-align: center;
color: white;
font-weight: bold;
box-sizing: border-box;
}
<div id="main_block">
<iframe id="left_frame" src=""></iframe>
<iframe id="right_frame" src=""></iframe>
</div>
<div class="b_footer">
Footer
</div>
To display them next to eachother, there are several options, in this case, the easiest seems (to me, opinions differ), to add float:left; to both frames.
As for the problem with the frames not taking the full height, for this you can use height:100vh which means, 100% of the viewport height.
As for the footer being behind the iframes as well as under them this is fixed by forcing the footer to float at the bottom of the page at all times. This can be done by using position:absolute and bottom:0 as well as left:0
As for the width having to be 140px, calc(100vw-140px) will do nicely here
Your updated code
HTML
<div id="main_block">
<iframe src="http://www.w3schools.com" id="left_frame" src=""></iframe>
<iframe src="http://www.w3schools.com" id="right_frame" src=""></iframe>
</div>
<div class="b_footer">
Footer
</div>
CSS
html,
body {
margin: 0;
padding: 0;
}
#main_block {
display: block;
width: 100vw;
min-height: 100%;
}
#left_frame {
width: 140px;
}
#right_frame {
width: -moz-calc(100% - 140px); width: -webkit-calc(100% - 140px); width: calc(100% - 140px);
}
#left_frame,
#right_frame {
float: left;
height:100vh;
}
iframe {
box-sizing: border-box;
}
.b_footer {
width: 100%;
height: 100px;
position: absolute;
bottom: 0;
left: 0;
top:100vh;
background-color:blue;
color:white;
text-align:center;
}
Updated Fiddle
Hope this helps!
If you're going to have multiple iFrames that basically fill up the entire page, why don't you go with frameset?
<frameset rows="*,100">
<frameset cols="140,*">
<frame src="left.htm">
<frame src="right.htm">
</frameset>
<frame src="footer.htm">
</frameset>
This circumvents all your problems at once.
I need help on my Website i am doing for a family member of mine.
Here is a link to the website.
The Issue here is that the white background isn't going from the header to the footer.
The footer should be on the bottom of the website, even if the content is small.
I tried doing height 100% and some other things but it didn't help.
Thank you for your help :)
I know i have some validating errors which i am going to patch later on.
<div id="textfeld">
<img src="image/viertelkreis.png" id="kreis" />
<h6 class="ubertext">Standort</h6><br /><br />
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d664.691604579604!2d16.37821030367338!3d48.21111491260863!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x476d07a0425e484f%3A0x86fda9d1fb10b5ab!2sLaurenzerberg+5%2C+1010+Wien!5e0!3m2!1sde!2sat!4v1418075117771" width="700" height="500" frameborder="0" style="border:0"></iframe>
<table id="tabelletext1"><tr><td id="besonders">Laurenzerberg 5/12, 1010 Wien</td></tr><tr>
<td>Ecke Schwedenplatz 2/12</td></tr>
<tr><td>Telefonnummer</td><td>+43 1 909 34 95</td></tr>
<tr><td>E-Mail:</td><td> office#zitronenfalter-spa.com</td></tr>
<tr><td>Inhaberin:</td><td> Ying Qi</td></tr>
<tr><td>Unternehmensgegenstand:</td><td> Massagendienstleistungen</td></tr></table>
<br />
<br />
</div>`
You have padding on your header div. Take the padding off and you'll be fine.
#header {
padding-top: 10px;
}
Change the height on your image to
height: 350px;
And that works fine. It was your image that was the problem with your footer.
EDIT:
.background-white {
background: white;
width: 55%;
height: 795px;
}
Under your div tag which is:
<div align="center" id="wrapper">
Add another div called 'background-white' or whatever you wish to call it. Copy the styles above, may need a slight tweak to the height and width if you wish. That should work. Let me know how it looks.
For that, you need to make the #wrapper to have a height:100% corresponding with #textfeld to have a height:100%
For instance,
You need to make the below css change to achieve what you are looking for.
The CSS Change:
#wrapper {
height: 100%;
min-height: 100%;
position: relative;
}
#textfeld {
background: none repeat scroll 0 0 #ffffff;
border: 2px solid #999;
height: 100%;
padding-bottom: 80px;
padding-top: 20px;
width: 764px;
z-index: 1;
}
Hope this helps.
PS: You need to remove the footer value of bottom:0 for the above to work.
remove this style
#header {
padding-top: 10px;
}
you can always use min-height on #textfeld and count the value in jQuery.
var height = $(window).height() - $('#header').outerHeight() - $('#footer').outerHeight();
$("#textfeld").css({'min-height': height });
I have an image in my website that is defined with the following CSS:
#settings_big{
border: none !important;
margin: auto 0 0 0 !important;
padding: 0 !important;
float: right;
}
Because of the float the image obviously sits on the right side of the content. The top margin causes the image to sit right beneath the lowest hanging element in the content. This looks OK, but I would really prefer that the image sit as low as possible in the browser window to somewhat frame the content. I've seen multiple examples that use fixed positioning to achieve this, and this would work, however my content has a max and min width of 960px; using a fixed position of
bottom: 0;
right: 0;
causes the image to get pushed far right outside of the content to the edge of the browser window. Is it possible to push the image to the bottom of the browser window while keeping the
float: right;
positioning? I would rather not use JavaScript or jQuery but it is an option I suppose. Thanks in advance.
New answer:
<div class="container contentCont">
<div id="content"></div>
</div>
<div class="container imageCont">
<div id="image"></div>
</div>
With CSS:
.container {
width: 200px;
margin: 0 auto;
background: #ccc;
}
.contentCont {
min-height: 600px;
}
.imageCont {
position: fixed;
bottom: 0;
right: 0;
left: 0;
}
#image {
float: right;
width: 20px;
height: 20px;
border: 4px solid red;
}
Does it right as in this JSFiddle: http://jsfiddle.net/WYX7H/1/
The following might be close to what you need.
Assuming that your page layout vaguely looks like the following HTML:
<div class="wrapper">
<p>some words...</p>
<div class="slot">
<img src="http://placehold.it/200x200">
</div>
</div>
apply the following CSS:
.wrapper {
width: 600px;
height: 600px; /* for demo only, not critical... */
margin: 0 auto;
border: 1px solid blue;
}
.slot {
text-align: right;
position: fixed;
left: 50%;
bottom: 0;
margin-left: -301px;
width: 600px;
border: 1px dotted blue;
}
.wrapper img {
vertical-align: top;
}
See demo at: http://jsfiddle.net/audetwebdesign/6Xnxj/
If you don't know the width of the image (or you don't want to specify it),
create a wrapper that matches the width of the parent element and apply position: fixed to it.
The image can then be either floated or text-aligned to the right within the fixed block.
The fixed block can then be positioned to the left and bottom, and using margin-left
to keep it centered.
This should be easy, but I've spent a while trying to figure this out... I have a div that is 73px in height. I also have an Iframe that is suppose to stretch to the rest of the page but it overflows and I have two scroll bars (Iframe, and page). How can I have the div above the Iframe and have the Iframe in 100% height? I've also tried a negative margin and padding and that hasn't done anything.
Trying to get rid of the page scroll bar when using 100% and top: 73, but you can see the code for yourself.
I find this an interesting problem, so I've spent some time debugging the design on your page.
Now for me, the textarea always stretch exactly to the bottom of the page, not farther, and the page scrollbar does not appear.
Here are the modifications (I hope you did not change your code or stylesheets too much while I was debugging):
1.) - The "container" div:
Using bottom: 0 together with position: absolute ensures that the div stretch to the end of the page. Using height: 100% would cause the div to overflow! Using overflow: hidden does not allow the page scrollbar to show up.
<div class="container" style="position: absolute; top: 73px; bottom: 0; overflow: hidden; left: 50%; margin-left: -475px;">
2.) - The left pane ("span-12" div):
<div class="span-12" style="float: left; padding-top: 17px; width: 470px">
3.) - The right pane ("span-12 last" div):
You can use the same trick as with the "container"
div: absolute positioning and use of the top, right and bottom css properties.
<div class="span-12 last" id="friend_pane" style="position: absolute; top: 0; right: 0; bottom: 0">
4.) - And the iframe:
<iframe src="/friend/shell.php" frameBorder="0" allowTransparency="true" style="height: 100%; width: 100%">
EDIT - To make it center-aligned, I added "left: 50%; left-margin: -475px;" in the style of the "container" div. This tricks belongs to #clairesuzy, I didn't find it myself.
http://jsfiddle.net/HZTTp/:
<!doctype html>
<html>
<head>
<title></title>
<style>
html,
body {
margin: 0;
overflow: hidden;
}
body {
padding: 0 !important;
padding: 30px 0 0;
}
#top {
position: absolute;
top: 0;
left: 0;
height: 30px;
width: 100%;
overflow: hidden;
background: gray;
}
html
>
body
#bot {
position: absolute;
top: 30px;
bottom: 0;
width: 100%;
}
object {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div id="top"></div>
<div id="bot">
<object data="foo"></object>
</div>
</body>
</html>
You can use a wrapper div on the iframe to specify where you want it's sides to be (top:73px; left:0; right:0; bottom:0;) with the help of position:absolute.
HTML:
<div id="head"></div>
<div id="main">
<iframe src="http://i.reddit.com/"></iframe>
</div>
CSS:
body { margin:0; padding:0; }
#head { height:73px; background:#c33; }
#main { top:73px; left:0; right:0; bottom:0; position:absolute; }
#main iframe { border:0; width:100%; height:100%; display:block; }
Demo: jsfiddle.net/fErZY
A bit tricky.. and most solutions work OK for the main part but IE7 doesn't like when a iframe is set to 100% tall without it's parent having an explicit height (in px, not percent) - so my solution is to absolutely position the container so you get the 73px top and 0 bottom co-ordinate you need - then it should be as simple as setting the #friend_pane div to 100% height, and then subsequently the iframe to 100%.. but that's the bit IE7 doesn't like.. so adding position: absolute; right: 0; also to the friend_pane div, along with the 100% height - then makes IE7 apply the 100% height to the iframe too.
There is leakage (small?), if that's what you've been referring to in your comments, that is to do with the iframes natural box model, but I found setting a negative bottom margin -4px on the iframe counteracts that
So with your code; remove all inline styles from .container #friend_pane and the iframe #friendpane_area
and add these styles:
.container {
position: absolute;
top: 73px;
bottom: 0;
left: 50%;
margin-left: -475px;
background: #cff; /* for testing only */
}
#friend_pane {
position: absolute;
right: 0;
height: 100%;
background: #fcf; /* for testing only */
}
#friend_pane iframe {
border: 0;
padding: 0;
margin: 0;
width: 470px;
height: 100%;
margin-bottom: -4px;
}
Here's a demo of this with your page code:
JSBin HERE
Note: overflow:hidden; on the #friend_pane div instead of the negative 4px margin on the iframe will also cure the "leakage"
and to keep some general code in the answer.. a simplified demo
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>FriendsConnect | My dashboard</title>
<style type="text/css" media="screen">
body {
background-color: #4DA2CA;
margin: 0px;
padding: 0px;
}
#mainbar {
background-image: url('http://friendsconnect.org/bar_fade.png');
background-repeat: repeat-x;
background-color: #494949;
padding-top: 6px;
height: 67px;
}
#infobox_left {
color: #444444;
margin-bottom: 15px;
padding: 15px;
background-image: url('http://friendsconnect.org/grp2.png');
background-color: #F2F2F2;
background-repeat: repeat-x;
float: left;
width: 440px;
}
#com-status {
border: solid 1px;
border-color: #3B7D99;
background-color: #4794B7;
padding: 15px;
float: left;
clear: left;
width: 440px;
}
.container {
position: absolute;
width: 950px;
top: 73px;
bottom: 0;
left: 50%;
margin-left: -475px;
background: #cff; /* for testing only */
}
#friend_pane {
position: absolute;
top: 0;
right: 0;
height: 100%;
background: #fcf; /* for testing only */
}
#friend_pane iframe {
border: 0;
padding: 0;
margin: 0;
width: 470px;
height: 100%;
margin-bottom: -4px;
}
</style>
</head>
<body>
<div align="left" id="mainbar">Main bar</div>
<div class="container">
<div style="padding-top: 17px;" class="span-12">
<div id="infobox_left">
<font color="#000000">Welcome TEST, what's up?<br/></font>
SOCIAL POINTS <font color="#000000">0 Points</font><br/>
ACCOUNT STATUS <font color="#2C8231">No Problems Found</font><br/>
CONNECTBOX <font color="#000000">0 New Messages</font>
</div>
<div id="com-status">
<strong>Pete Allport commented on your status</strong><br/>Pete Allport Commented: Yeah bro thats beastt...
<div style="float: right;"><button>Close</button></div>
</div>
</div>
<div id="friend_pane">
<iframe id="friendpane_area" src="http://google.com" frameborder="0" allowTransparency="true"></iframe>
</div>
</div>
</body>
</html>
which you can see:
JSBin Here
You can wrap your iframe in a div and set the div's position:fixed with top:73px then right, bottom, and left set to 0 so the div fills remaining space below your 73px header. Once your wrapper is set you can specify height and width to 100% for your iframe.
example: http://jsfiddle.net/pxfunc/KTwxb/
HTML:
<div id="header">Header</div>
<div id="wrapper">
<iframe id="frame" src="http://www.supercalifragilisticexpialidocious.com/"></iframe>
</div>
CSS:
html, body {margin:0;padding:0;height:100%;font-family:helvetica,arial,sans-serif;}
#header {width:100%;height:73px;}
#wrapper {position:fixed;top:73px;right:0;bottom:0;left:0;}
#frame {width:100%;height:100%;border:0;}
Here is an example. Only way I was able to hide the scroll bar was to set the iframe's html overflow property to hidden.
http://jsfiddle.net/nERqu/
HTML:
<div class="top">
<p>div text</p>
</div>
<iframe class="iframeBottom" src="http://www.google.com">
</iframe>
CSS:
.iframeBottom {
height: 100%;
width: 100%;
position: absolute;
scrolling: no;
}
.top {
height: 73px;
width: 100%;
background-color: yellow;
position: absolute;
z-index: 999;
}
It seems like iframe is being treated as an absolutely positioned element whether or not you actually specify that in the css. If its container is absolutely positioned, it should be able to fill the container using width:100% and height:100%.
In other words, if my theory is correct, the iframe isn't sizing "correctly" because it is searching for a positioned (i.e. relative, absolute, just not static) parent element. It needs to figure out how to adjust its size and the closest abs pos element is the browser viewing area itself. 100% height of the screen would normally fill the screen height, but the iframe is positioned down 73px, thus making it overflow by 73px.
Play with this a bit, it should be a nice step in the right direction:
<div style="position:absolute; width: 515px; top:73px; bottom:0px; right:0px;">
<iframe id="friendpane_area" style="position:absolute; width:100%; height: 100%;" src="./FriendsConnect My dashboard_files/shell.htm" frameborder="0" allowtransparency="true"></iframe>
</div>