.testimonial .test-name img{float:left; padding-right:15px; display:block;}
above code is use to set image float left, but image comes out from the div.
can any one suggest me the correct property
The idea of float takes the element out of the container, this is expected behaviour.
Try adding the following code
.testimonial {
overflow: hidden;
}
It should keep the floated element within the container.
Can you provide the HTML that goes with this CSS?
My guess is that your containing div's height is '0', because the image inside it is floated.
try using the clearfix trick, or prevent giving the image "float..."
Related
I am trying to center this JS/jquery/ajax app screen here, such that no matter what size the user's screen is, it will all remain centered. Right now it is all left-aligned:
http://www.funtrivia.com/html5/indexc.cfm?qid=361927
No matter what I try, it simply does not center. When I do manage to center the outermost div, all of the inner stuff gets messed up.
your html is built wrong. everything seems to be positioned absolute and has a left/top defined. It does not help that your body tag has width: 790px;
This can be solved with just css. Try removing all the positioning styles from the markup and set #game to be margin: 0 auto (the centering trick)
Remove the width settings on your body tag
Use "margin: 0 auto" on your gameheader and game divs
and set your gameheader div and game div to use position:relative
A quick Google Search reveals How to Centre a DIV Block Using CSS
Use the following CSS where #content is the id of your main div element
#content {
margin-left: auto ;
margin-right: auto ;
}
The technique works because when both margins are set to auto, web browsers are required by the CSS standard to give them equal width.
jsFiddle
Here is jsfiddle example
Here is the code..
<div id="xxx1">
<div class="xxx1">
txt
</div> </div>
And CSS
#xxx1{
border:1px solid black;
min-height:25px;
}
.xxx1{
border:1px solid green;
height:50px;
position:relative;
top:-50px;
}
I want to remove extra space from div id "xxx1". How to do that? And I cannot use fixed height cause I want that div to increase its height if I want to add some more data inside that div.
Here is jsfiddle example
Provided I understood the question, get rid of padding on body.
jsFiddle
body {
margin:0;
}
You may also find box-sizing:border-box useful which integrates border and padding into width and height
jsFiddle
#xxx1{
box-sizing: border-box;
}
.xxx1{
box-sizing: border-box;
}
Edit
RE: no.. I want to remove blank space inside div id "xxx1".
Well you can do that in a variety of ways, the right way would depend on what the context is. Here are a couple:
Position .xxx1 using position:absolute so it's taken out of the flow of the page. jsFiddle
Set height:0px and set it with JavaScript when you add content to it.
Here try to change it like this
.xxx1{
border:1px solid green;
height:auto;
position:relative;
}
you cant remove the spacing added by relative positioning. setting the padding and margin on the body wont do it. setting the box-sizing wont do it. setting the font size to 0 wont do it. doing something with javascript is just silly.
You have these options:
make the next item have a negative margin (ick).
float the item, tho this wont allow overlapping (if you need that)
set the outer div to a relative position and the item you want to move to absolute position (and set the top (or bottom) and left (or right) values. this positions the item you want to move according to its outer div (not the window).
Number 3 is almost always the best way to go. Think about how the page will change with variable content to make sure you choose the right option (and correct corner to position from).
If the outer div that you set to a relative position is not adjusted in space (using top/bottom/left/right), then that div does not have any extra unwanted space. If you need to adjust the outer div AND the inner div, set all moving divs as absolute, and the closest parent as relative; the movement (top/bottom/right/left) will be based on that relative parent.
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.
im having a problem regarding using background property with url('location') value with a div element. All browsers do not show the background image for any content written within the div tag.
code:
HTML:
body has a div tag with the class = slide. this div tag contains some content and links.
CSS:
div.slide {
margin: 0 auto;
background: url(images/btnslide.gif);
}
please help me identify the error. maybe i have misused div tag. please point out the solution for the above problem
thanks in advance
You either haven't set the height for your .slide element, or you haven't cleared the floats for the elements inside .slide. Try setting a height or adding overflow: auto if you want to clear the floats inside your <div>.
This code should work by default, as everybody said something else is wrong.
Either the height is wrong or the image does not exist.
Which browsers are failing exactly?
If you like you can try writting the CSS with full syntax:
background: url(..) top left repeat;
i´ve got elements inside a containing div with a class.
i could use text-align: center on the div and that will center all elements.
how could i position the elements with exact pixels from the left?
(i dont want to use css on the element but on the containing div)
You can use padding-left on the container div. However this will augment the width of the div itself, since you're adding left padding to it. To solve this problem you should use margin-left on the inner divs, for example:
/* apply a margin left to all the divs
* inside div.container
*/
div.container div {
margin-left:20px;
}
The closest you could get with only the div is to play with the padding, but the correct solution would be to apply left/top to the inner elements.
Also, this belongs on doctype.com.
Set position: relative
Set top: ..px
Set left: ..px
I think this solution is prettier than setting margins/paddings.
(I'm typing this on an iPhone can't format it for ya)
Hello this is what your looking for
< div style="position:absolute;height:100px;width:100px;top:100px;left:100px;">
You can put that style on any tag you want Enjoy!
and to be into the middle use I.E
< div style="position:absolute;top:0px;left:50%;">