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.
Related
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.
Take a look at this Fiddle.
I'm puzzled as to why #wrapper doesn't expand to accommodate the divs inside it. What's missing here?
As a side note, any idea as to why my <hr> isn't displaying properly?
The wrapper doesn't expand because the items inside are floating and taken out of the natural flow of the document.
You can tell the wrapper to expand past the floating elements by adding a block level element to the end of the wrapper and telling it to clear all floats:
#wrapper:after{
content:".";
display:block;
clear:both;
visibility:hidden;
}
Also, you had the height of the wrapper set to 100px.
Here's an updated version of your fiddle: http://jsfiddle.net/kWJ79/9/
As for your hr, what exactly are you wanting to do? It looks like you're wanting to create a vertical bar between the 2 divs. Is this correct?
UPDATE
If you're wanting to create a line between the left and right divs I'd consider a slightly different route.
What I'd do is put the left div inside its own container which has a right padding, margin and border. This way you don't have a redundant div floating around in your code and recudes the need to use a hr.
Here's an updated fiddle with this example: http://jsfiddle.net/kWJ79/15/
#left_wrapper{
margin-right:5px;
padding-right: 5px;
border-right:1px solid red;
float:left;
}
Notice that I've removed the float:left; from the #left div and placed it on the #left_wrapper instead.
You have specified the height value.
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!
I have an image with rounded corners(png transparent on the corners), about 150px wide, and 25px height, so i'm trying to use it, but it doesn't work for me:
<button><span>Click me</span></button>
And the css:
button{
border:0;
background:url(../images/button.png) no-repeat top left;
height:24px;
padding-left:10px;
}
And
button span{
display:block;
background:transparent url(../images/button.png) no-repeat top right;
height:24px;
padding-right:10px;
}
But it doesn't work correctly, the right corner isn't displayed correctly.Any help?
Best Regards,
Using Firebug (use it!) it is clear what is happening. Your right corner shows, but as the the button underneath it continues, you simply don´t see it.
You can solve that using two images, a small one (not so wide, minimum width the padding on the left side) for the left corner and a very wide one for the right corner. That way your buttons don´t overlap and you get the desired effect.
First things first: How is it displayed?
You're using the same background images for both left and right corner. Is that in order? (I realize that technically it could be) Also, you might want to try and switch the two (left/right), as span is not a block element, and that might be causing your problems (much in the same way that you can't, say, set a width to a span, unless you also set it to render as a block)
your span and button elements have the same height (which is smaller than image height by the way). Another observation: why do you need span element at all?
start with the simplest way to do something:
<button>Click me!</button>
button {
border: 1px solid #ff0;
padding: 10px;
display:block;
background:transparent url(../images/button.png) no-repeat top centre;
height:25px;
}
this should display your image. Use border property to debug CSS
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.