In this page I'm trying to vertically center the text "Details..." with "XYZ" using margin-top and margin-bottom, but to no avail. I also want to decrease the space between title and table.
Strange thing: when I put the red border around the title to see what I did wrong, the centered text dropped below the left and right floats (see bottom image). I just added a border, nothing else was changed.
Can someone please have a look at my code and suggest how to vertically align the title, and decrease the space below it?
give float to your div. without float property these all problems are occurring.
.class{
float:left;
width:100%;
}
Check this Link
Related
i'm no expert when it comes to css but i'm trying to get a floating div to work. I have two div's, the top one floats left and the other div should wrap right. It seems to sort of do this. The problem is that even though it looks right, it's not actually pushing the box to the right of it. I have a jsfiddle and you'll see what i mean. i set a red border on the div called content. You'll see the content looks about right, but the dotted red line under the h1 start from the begining of the floated object instead of under the H1 title. Please help me understand. here's the jsfiddle: http://jsfiddle.net/wCnY3/
<div id="subNav">box</div><div id="content">WELCOME</div>
Target your #content element with an overflow-x:hidden property.
#content {
overflow-x:hidden;
}
Like so: http://jsfiddle.net/wCnY3/1/
By design, the overflow:hidden has the effect of forcing your element to behave like a square/rectangle. Since you don't have a set width/height for your element, that just means its wrapping behavior is changed.
On my frontpage, I would like to CENTER the directory view (CONTENT AREA with headline 'Golfverzeichnis'): LINK
Name of the CSS-Element to be centered: jrDirView
Problem-Description: the images and left-aligned links underneath them should remain unchanged, but the whole directory view area, which is right now aligned left, should be centered, so the white space left and right is equal.
Add the fallowing into your CSS jrDirView class
.jrDirView{
margin: 0 auto;
width:1000px;
}
you can experiment with the width until you find the value you want.
If you look at the page, the content area is already centered.
You can prove this by putting a lot of tags under one of the images that shows up in the right most column.
The problem is that your content is not centered, so to the user, it appears that the the page is off center.
You can tweak the problem by setting the left margin of jrDirView arbitrarily to force the content to appear to be centered, but it won't be a very robust solution.
A better solution might be to force the text area to be the same width (approximately) as the known width of the image and then setting a left and right padding on jrListingThumbnail and jrContentDiv
I'm new here so forgive if anything sound very noobish.
I'm busy making a personal website and have two divs inside a wrapper, a content div and a sidepane div. their height is set on 99% and they overflow on auto. I want the page to not scroll (unless they make the screen smaller) but the divs must scroll.
The Problem: I want to have the bottom text of the divs to fade away so that when you scroll down the div it brings the text to normal. I could use a gradient image or just CSS if someone could lead me in the right direction. I'm struggling with this cause of the overflow. I want to know how one could keep the gradient at an absolute position at the bottom of the div, but now its not really at the bottom of the div if you get what I'm saying? Because the div has overflow on. I want it at the position where the div ends on the screen, but not where the text ends. I tried putting my code in
Here's a pic
If you check the right div, I want the bottom to be faded and as I scroll the gradient stays there at the bottom. (which is not actually the bottom of the div) - also need to be able to resize page and it stays in same position.
The key is background-position: fixed;
I have created a little fiddle for you to see what i mean: Click me
I just hope i understood your problem correctly without any code and just a screenshot ;)
Also for CSS gradients see here
i'm having a rather unique problem with CSS and DIV with/without borders.
Now, when i use the DIV without any borders, there is a kind of automatic padding! when i add a border, the padding disappears.
Even when i use "margin:0;padding:0" it still doesn't clear off the padding.
does anyone have any ideas why it's behaving like this? As a result, i had to use a border with the same color as the page background, but now i have same problem with a set of 3 DIV that should be right next to each other and CANNOT have any borders at all.
HELP!
I am trying to align some divs a certain way. To help debug what's happening, I decided to add borders to the divs to research how they were getting positioned. But the border looks pretty strange.
Here's the html:
Here's the CSS:
And here's the result:
What am I doing wrong? Thanks!
It isn't funny (!!). The div appears to have 0 height, hence the top and bottom borders are touching each other, creating a funny (??) appearance.
The div appears to contain content but the content is probably floated or absolutely positioned, therefore it does not stretch the funny (!?) div vertically.
demo here
Height is one way to do it, but its a bit hackey, another is to float the div that is surrounding other floated divs:
http://jsfiddle.net/Ewd4x/2/