All,
In a centred layout (960px width; margin: 0 auto;), I have two menu bars, one floated to the left & other to the right, underneath both of which I want to float an iframe.
Unfortunately, it does not appear to be floating. The iframe moves to the left most available space of the viewport. Unfortunately, I cannot use absolute positioning due to the layout being centred & having max. width of 960px.
Is there a way to make this happen please?
EDIT:
Further to the comments, for which Im grateful, here is the code.
HTML:
<iframe id="iframing" src="mannequin.html" width="640" height="500" frameborder="0" ></iframe><br />
CSS:
#container {
min-width: 960px;
height: 100%;
background: rgba(255,255,255,0.8);
margin: 0 auto;
position: relative;
} /* The is the main container on body */
#iframing {
float: left;
width: 640px;
height: 500px;
margin: 10px auto 10px;
clear: both;
}
HI all,
Its finally resolved, hurrah! I had set the width to min-width on the main container which was the reason of the iframe extending to the far end. Resolved. And thank you for helping with this. Cheers.
A centered layout and absolute positioning don´t exclude each other but I don´t think you need absolute positioning anyway.
As far as I can understand your question, the first thing I would do is add a clear:both to the iframe.
Does the iframe have a fixed with?
Take a look at this example, it should point you in the right direction: http://jsfiddle.net/WsyCb/
All you need to do to position the iframe within the centered layout is given the container a relative position and move the iframe left by the fixed width of the left content.
Additionally, as far the floats go, you might be able to fix this by selectively clearing the floats. I'm not sure of any other reason why the iframe wouldn't join the flow of the other floated elements. Try making the container overflow:auto.
Related
So basically, I want two divs to sit inside another div. The first one is sitting inside with no issues, but the second one floats underneath the parent. When I add overflow:hidden I can't see the div anymore. The closest I've gotten to a solution was to add overflow:auto, but that just creates a scroll bar. I have tried resizing, different positioning, overflow and clearfix but so far I can't find a solution. Any ideas guys? JSFiddle demo here http://jsfiddle.net/QLbGc/ Thanks for any help, it's been annoying me for a couple of days now.
You forgot to put float:left; at the slideshow div
It should be
#slideshow {
background-color: #000;
margin: 15px;
height: 95%;
width: 60%;
-moz-border-radius: 15px;
border-radius: 15px;
float: left;
}
So now you have the 'slideshow' div floating left and 'about' div floating right and they can fit inside the parent div.
Basically they were inside the parent div from the first time but the about div was under slideshow div.
Demo:
http://jsfiddle.net/QLbGc/2/
If you're looking to have the two divs side by side here's a fiddle for that.
http://jsfiddle.net/Hastig/QLbGc/6/
I stripped out a bunch of stuff as I wasn't sure you needed it or it was just stuff you were throwing at it to try and affect change.
Somebody mentioned you were missing a float: left; in what we assume you wanted as your left div.
Remember to compensate for margin and padding to match the container div.
In my example the main container was 500px wide. If I set each float div to 250px width when added to the 20px combined margins on those divs the total width goes to 520px and pushes that right div under the left div so you'll want each floated div at 240px to compensate. Same deal with percentages.
If I misundestood your intention and you're looking to hide one of those div use display: none; on it and double the width of the one you want to show.
try to put this code in your css.
.content::-webkit-scrollbar {
display: none;
}
Something strange is happening with a margin setting in Firefox, I have a div with an id "wrap" with a top margin of 20px, when a user is logged in a div appears above the wrap div with an id of user_nav I don't want any margin above this div, but Firefox is for some unknown reaslon propagating the top margin I have on the wrap div to the user_nav div above it, it isn't happening in any other browsers.
If I remove the top margin from the wrap div it is removed from both.
I can get rid of it by giving the user_nav div a negative top margin, but that messes up all the other browsers.
div#user_nav {
width: 980px;
margin: 0 auto;
}
div#wrap {
width: 980px;
margin: 20px auto 30px auto;
}
Any ideas about what is happening?
Thanks
Rob Fenwick
It is indeed quirky behaviour - and it appears to be one of the effects of this old bug related to clearing block elements (or one of its many, many duplicates):
https://bugzilla.mozilla.org/show_bug.cgi?id=451791
One way to get around it is getting rid of the <div class="clear"> and using the overflow method of clearing instead (though that's not always possible, e.g. - obviously - if you have content inside the cleared element that will extend outside it):
http://www.quirksmode.org/css/clearing.html
I.e., remove <div class="clear"> from inside user_nav_frame and apply overflow: hidden (and width: 100%) to it in the CSS instead to clear the floats:
div#user_nav_frame {
background-color: #0A4D84;
overflow: hidden;
width: 100%;
}
JSFiddle: http://jsfiddle.net/69aD9/2/
There are counter-hacks too, if this won't work out in your case. See the above bug report.
after reading this article:
http://css-tricks.com/absolute-positioning-inside-relative-positioning/
i am trying to achieve vertically stacked divs each containing 2 child divs positioned to the far left and right of each parent div. i found the same concept here:
Position absolute but relative to parent
but I can't figure out why mine isn't working.The in-progress file can be viewed here:
https://dl.dropbox.com/u/10388895/newPeterSalvatoDotCom/index.html
Any help would be greatly appreciated.
One way to fix this would be to give the projectDivs a height. They currently collapse to 0. Add the following to your stylesheet and see what happens:
.projectDivs{height:600px}
I think setting these rules to the .projectDivs class get what you want done. Let me know if they don't.
.projectDivs {position: relative;
margin-bottom: 50px;
clear: both;
float: left;
margin-left:auto;
margin-right: auto;
width: 100%;
}
i set the margins individually because you have a margin bottom set already.
I got a div which is of fixed width and height:
#containersimg
{
width: 900px;
height: 135px;
}
And I have many images inside, with width 90px and height 120px. So i want to have my images all in a row, and show only horizontal scroll bar to scroll through the images.
I need to make this work in both FF and IE8 and above. I tried the overflow-x and overflow-y but I didn't helped.
Any idea?? Hope can get some help here... thanks...
You need a wrapping div inside your scrolling container to ensure that they are not constrained by width and then set overflow-x: scroll on the container. I've mocked up a quick fiddle to demonstrate. http://jsfiddle.net/vUEYG/
Give this a go :)
-ms-overflow-x: hidden;
Taken from this great resource CSS div element - how to show horizontal scroll bars only?
you can add first overflow:auto
#containersimg
{
width: 900px;
height: 135px;
overflow:auto;
overflow-x:hidden;
}
may help you
I have a "ribbon" type header on the top of my website:
#top-wrapper {
border-bottom: 5px solid #A1C1BE;
width: 100%;
background-color: #59554E;
position: absolute;
top: 0;
left: 0;
margin-bottom: 100px;
padding: 10px 0 0 0;
color: #C0C0A8;
}
The absolute positioning is needed to make sure it occupies the complete width of the user's browser (as far as I know). However, the rest of my webpage (the main body which contains all my other divs) is hidden behind this ribbon:
#pagebody {
width: 60%;
margin-left: auto;
margin-right: auto;
}
The only solution I have been able to find is adding a bunch of <br> between the end of top-wrapper and the start of pagebody.
Is there a better way of doing this?
As per my comment in another answer:
You can just use width: 100%, but make sure you remove the default gap it leaves with:
html, body {
margin: 0;
padding: 0;
}
You should also check out necolas' normalize.css. It includes all of this basic CSS rules you're going to need in pretty much every site :)
Absolutely positioned elements (top-wrapper) are always on top of relative elements (pagebody), unless you do some hacky stuff with z-index (and even that is limited). What you probably want to do is move the pagebody element down just past the top-wrapper. I don't know how tall your top-wrapper is because it has no specified height. And you might not know it due to font-size differences. But overall, you simply need to add a top margin or padding to the pagebody tag, something like this:
margin-top:50px;
Absolute positioning takes an element out of the normal flow. You do not need absolute positioning to maximize width. You do that with width:100%.
There are many ways to do this. First, you can place your top wrapper outside the pagebody element and then just define its width as 100%.
If you have a graphic that is a ribbon and it is supposed to overlap the top of the pagebody element - as I think you are saying above - then you would use position absolute and z-index to place it above the pagebody element. Then add the proper padding-top to pagebody.
You didn't provide html so we don't really know what you're up to totally.