I have this:
http://jsfiddle.net/ETm93/
Now my floated element, leftPanel is having a margin-right: 20px; works fine. Now I want to give rightPanel_center a margin-left by 50px; and it do not wants to.
Why cant I do this and how should I solve it?
The margin for that element starts at the left side of the screen, not where you think it starts. If you set margin to 180px, 190px, etc. You will see that it starts to expand at that point (but probably not where you're expecting it to expand from).
Try to set float: right at profile_rightPanel_center div
Regards!
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;
}
Edit 1
Have updated with a jsfiddle link. http://jsfiddle.net/DrFSV/
See the wavy image in the last row? I'm trying to get that move outside of #outer_middle.
Advice?
This pertains to the original link. Have removed site's link.
I have a div container named #outer_middle, and inside that, I have two other containers named #middle and #sidebar.
I am trying to have a div inside #middle go a bit outside the container ...
So, I put position:relative to #outer_middle, and position:absolute to #diy (the one with black border) coupled with left:-90px;
(as per my understanding that if you're trying to get an inside container move outside of its outside container, you need to put relative and absolute positioning like this).
It affects the sidebar (pink column) and that goes underneath #middle and the diy image goes to the left inside the container, not outside.
Why?
How can I get the #diy move to the left outside of the container?
And is it possible to do this so #diy remains in the flow as well?
Advice, please? Please let me know if my question is unclear. Thanks.
Change your #outer_top and #top to the code below. See if that's what you are trying to achieve:
#outer_top {
background-color: red;
width: 1000px;
margin: 0 auto;
}
#top {
margin: 0 0 0 -90px;
width: 500px;
background-color: pink;
height: 100px;
}
If I understand your question correctly, it seems like your #diy element is already to the left of the container, it's just not "outside", as you put it.
Try adjusting the z-index CSS property of the #diy element. Elements with greater z-index are placed "higher up" on the page than elements with a lower z-index. To be sure #diy is going to be on top, add a z-index of 99:
z-index: 99;
To the CSS.
It seems as if if you set the overflow for the #outer_middle to visible (or, just remove it) you would get the result you want.
This should be really simple, and I thought I was doing it correctly...evidently not.
I need to get the light grey box that says "Test" into the darker grey area, to the right of the list on the left. It's supposed to be 270px tall (or whatever) and stretch to the right edge of the list on the left, and to the edge of the enclosing container on the right side.
Here's a Fiddle with my code. Easy peasy. Thanks, guys and gals.
There are two approaches to solving the problem, which stems from your use of float: right. You can either 1) Move the .theater gray box above the sidebar, and it will properly float to the right side of it, or 2) You can change the sidebar to float: left, remove the float from the gray box, and add a left margin.
Here's an example of the second approach.
You could also float both the sidebar and the gray box, but I would not suggest that.
You need to float:left or otherwise take the .revision-gutter div out of the flow
Floated left in my example: http://jsfiddle.net/trapper/f8yLh/1/
Just add float:left; to the .revision-gutter and your done!
YOUR CSS SHOULD BE
.revision-gutter {
width:270px;
height:inherit;
background-color:#333333;
overflow-y:scroll;
float: left;
}
And he updated Fiddle!
add float: left; to your revision-gutter class, and that should get you started.
I have the following situation. I have an image ( tag) and heading ( tag). I want to place heading on the image. How can I do it?
I tried to use negative margin http://jsfiddle.net/58H7c/1/ but in this case image lay on the heading. I tried to play with z-index - no effect.
Maybe you know better solution?
TIA!
PS
One another idea is to use image as a background. But in this case when I try to do padding for #imgPlace container - background image is stay on place (when the div-container was moved).
The correct way to do it:
Put them both in a container with position:relative;.
Put position:absolute; on the H1 only.
Put z-index:1 on the H1 only.
Alter left, right, top, bottom offsets of the H1 according to needs.
Profit.
Profit some more because you didn't break the flow of other surrounding elements.
http://jsfiddle.net/Trv2n/
For image
z-index:1;
position: relative;
For heading
z-index:10;
position: relative;
http://jsfiddle.net/58H7c/4/
I used absolute positioning to put the header 5px from the left and top.
I would like to position three items in CSS using float.
In the top left--logo
To the right of the logo, the navigation, which is an unordered list, ie floating left.
In the top right, a 2 line sign up for newsletter field--copy top row and form field with submit bottom in the second
I've given each it's own Div tag but can't see to get it to work with float. Only absolute positioning which doesn't look good when the site is resized. I put a table inside the div right now but would love a pure CSS solution.
I can get the logo to float left and the sign up field to float right but can't seem to get the navigation properly positioned. Either it goes all the way left or I put a clear in and it goes below the logo and field.
Any suggestions would be appreciated.
What about the following?
.floatleft_logo
{
float: left;
width: 200px;
}
.floatleft_nav
{
float: left;
width: 600px;
}
.floatright_email
{
float: right;
width: 300px;
margin-left:-250px;
}
Put all three in a 850px-wide container div and this works for me in a test page.
If I've understood it correctly, maybe you could set the first and second element to float: left, and then set the margin of the third element equal to the width of the first and second?
You could also set the first element to float left, the third to float right, and the second with a margin equal to the width of the first element. Like a three-column layout.