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%;">
Related
.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..."
Sorry. I had to edit my question: I made the second image in Photoshop.
**I am trying to find a DIV equivalent to a Table. How do you get divs to behave like TDs: All TDs adjust their height as the content grows, and all TDS have the same height to the bottom of the Table element. ** Why is this so hard with DIVs? After all these years, is'nt there a standard solution?
How do you get the two column divs to always be the same height (or always go down to the bottom) of the container DIV?
As the innner content grows, the wrapper DIV (in red) will grow with it, and maintain its padding (just like a table would).
yeah, your concept appears really tough to accomplish in CSS alone, for some reason. JQuery could handle it a lot better if you're open to it.
At any rate, here is is another alternative. It uses a clever trick as follows:
#container div { float: left; background: #ccc; width: 200px; margin-bottom: -2000px; padding-bottom: 2000px; }
Check it out here:
http://jsfiddle.net/jplew/yPMVJ/
try this
<div name="outer">
<div name="inner>put your contents here</div>
<div style="clear: both"></div>
</div>
you need a div that has the "clear:both" style (clear both simple makes the div takes up a entire line, nothing can float around it) at the very end of your inner divs so the outer div knows to extend to the end.
Possibly you have floats in the children divs. In that case you can do either of the followings:
Add overflow:auto; to the parent div's style.
Use CSS Clearfix
Add another tag (last tag under the parent div) containing clear:both style like the answer above.
I mocked up a solution on JSfiddle using simple percentages:
http://jsfiddle.net/xLSQX/
Otherwise, as mentioned above pay attention to the overflow: attribute and clear: both.
I want all the divs inside the container to act like table cells and the outer div to act like the element. The height of the outer div to be flexible and adjust to the height of all the content inside the other divs.
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.
My basic layout is a couple of divs within a div - http://jsfiddle.net/nxPhy/ - I'm looking for a css way to have the const div always visible regardless of any horizontal scrolling of the parent div (so only the content div is actually scrolled).
Add position: relative; to container, and remove floats and add position: fixed; to the block you want to fixate.
Result:
http://jsfiddle.net/nxPhy/1/
You want to add:
position:fixed
to the div that you want fixed. Doing this will position this div and it's containing elements fixed.
I want to center a div, but the general way is
#selector{position:relative;margin:0px auto;}
What exactly is wrong below
#crp{top:40%; position:absolute; margin:auto;}
The Div below is not nested but a standalone. The #crp is going to the extreme right.
<div id="crp">...something goes here....</div>
Thanks
Jean
It is because its position is absolute, it does not work according to margins anymore, it is expecting you to fix its position.
Just like you are setting its vertical position with the top property, you have to set its horizontal position as well.
To center a div using margin:0 auto; you must specify width of the element.
You could also use text-align:center; on the parent container.
Also remove any absolute positioning because it breaks standard element flow.