Is there any way that i can align the text inside a div but without using text-align. I dont want to align it to a specific position(center,left etc) but i want to align it where ever i want by pixel.For example between the values center and left. Also i dont want to use another element inside div.
I am looking something like that:
HTML
<div id="div">TEXT</div>
CSS
#div{
text-align:220px;
}
Any ideas?
Are you looking for text-indent ?
#div{
text-indent: 220px;
}
If you use margin or padding to align the text, they will increase the size of your element as well, if you are aware of the CSS box model behavior, so if you are aligning them using padding or margin make sure you use the below
div {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
Though above will count the margin outside but will consider the padding and border inside the element.
Also, if you are looking to align only a single word, than better use text-indent property which will indent your text to a specific px you define.
Demo
But this will just indent 1st line so if you have a single word than this will suffice your needs, but if you want to align multiple elements, than the best thing to do here is to use span for each word and than indent it using padding
No you can not, text-align gives a general behavior for the text to align as opposed to px which is a measuring unit, also, logically speaking....220px wont tell browser, which side of screen 220px is referring to....i'll suggest using <p> or <span> instead
#div > span, #div > p{
/*some margin or padding like
margin-left : 220px;
padding-left : 220px;
*/
}
EDIT
To avoid a tag inside div, use :
div#cont {
width:300px;
height:400px;
padding-left:150px; /*left-right-top-bottom-depend on ur choice*/
border:1px solid #000;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
solution demo
Related
I have a element, and this element has another element which contains a <table>.
For some reasons, I can not manipulate the CSS of the inner <div> or the <table> it contains.
I need to horizontally align the <table> (or the inner <div> which contains the <table>, doesn't matter, I just need to show the table aligned in the center) in the center of the outer <div>, by manipulating the CSS of the outer <div> only.
The border and padding properties seem to move the outer itself, what I need is to place its contents in its center (horizontally). How can I do that?
The width of the outer <div> is 590px.
PS: I can use inline CSS only.
Not entirely sure that this meets you needs, but a simple margin rule on the table seems to do it (http://jsfiddle.net/tiesont/ujxh0mjj/1/):
#leftwrapper table
{
margin: auto;
}
Add the following 2 rules to your leftWrapper div:
display:flex;justify-content: center;
<div id="leftwrapper" style="width:590px;display:flex;justify-content: center; float:left; background-color:grey; overflow-y:auto; height:650px;">
FIDDLE
apply the css to your outer div:
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: - as per required;
Is there a way to give a div element some padding INSIDE its border? For example, currently all the text inside my main div element goes right to the edge of the element's border. I'd like, as a general rule on this site, to have at least 10 to 20 px of space between the text and the border.
Here's a screen shot to illustrate what I currently have:
The CSS property you are looking for is padding.
The problem with padding is that it adds to the width of the original element, so if you have a div with a width of 300px, and add 10px of padding to it, the width will now be 320px (10px on the left and 10px on the right).
To prevent this you can add box-sizing: border-box; to the div, this makes it maintain the designated width, even if you add padding.
So your CSS would look like this:
div {
box-sizing: border-box;
padding: 10px;
}
you can read more about box-sizing and it's overall browser support here:
https://www.paulirish.com/2012/box-sizing-border-box-ftw/
I see a lot of answers here that have you subtracting from the width of the div and/or using box-sizing, but all you need to do is apply the padding the child elements of the div in question. So, for example, if you have some markup like this:
<div id="container">
<p id="text">Find Agents</p>
</div>
All you need to do is apply this CSS:
#text {
padding: 10px;
}
Here is a fiddle showing the difference: https://jsfiddle.net/CHCVF/2/
Or, better yet, if you have multiple elements and don't feel like giving them all the same class, you can do something like this:
.container * {
padding: 5px 10px;
}
Which will select all of the child elements and assign them the padding you want. Here is a fiddle of that in action: https://jsfiddle.net/CHCVF/3/
Just use div { padding: 20px; } and substract 40px from your original div width.
Like Philip Wills pointed out, you can also use box-sizing instead of substracting 40px:
div {
padding: 20px;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
The -moz-box-sizing is for Firefox.
Padding is a way to add kind of a margin inside the Div.
Just Use
div { padding-left: 20px; }
And to mantain the size, you would have to -20px from the original width of the Div.
I have unordered list of images, in a responsive design. The images scale properly, when I resize window. But the trouble is wrapper UL element, which don't adjust its height accordance with image height. This create a big gab before following P element.
http://jsfiddle.net/6qrad/1/
How can I achieve height of ul element to adjust accordingly without floating li.
First of all whenever you are going for responsive design, be sure you use the below snippet
* {
margin: 0;
padding: 0;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
If you are aware of the CSS box model, the above will do exact opposite of that, it will count the padding, border inside the element instead of outside the element.
Now coming to the solution, you are using column-count property which I think is not required in your case, you can simply use float: left; and than use overflow: hidden; to clear the floating li
Demo
Use font-size: 0; if you want to get rid of the remaining pink portion at the bottom. (Using width: 33.33% to be precise, which will get rid of the pink color on the right hand side as well.)
Demo 2 (With gaps, used padding)
Also, as I was editing the question, you've mentioned you don't want to float, so I don't see any specific reason for not doing so, but still if you don't want to float, you can use display: inline-block; with a width set to 33% each, also make sure you use margin-left: -4px; to deal with the white-space by making your li elements inline-block
How do I create padding around a div but not pushing out the container?
http://codepen.io/vincentccw/pen/jgGtd
I create 2divs but then when I set a padding around it the child div got push out??
This is the normal behaviour of the default box model, i.e the padding and the border dimensions are added to the width property.
If you want to avoid clumsy calculations, you can change the default model (content-box) using box-sizing like so:
* {
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box; /* Opera/IE 8+ */
}
this would make the padding and border of all the elements part of the declared or inherited width and height, thus keeping your layout intact.
Now, if you were to declare a width of 100% or a 100px, and then add padding or border, it wouldn't have affected the total width, but would rather be included within the confines of the declared width.
HTML
<div>
<div>lol</div>
</div>
CSS
div{
background:yellow;
width:auto;
height:auto;
padding:1em;
}
div div{
background:red;
}
Padding is in the inside of the elements. I believe you want to use margin here, which is outside of block elements:
div{
background:yellow;
width:400px;
height:200px;
margin:1em;
}
div div{
margin:0; padding:0; border:0;
background:red;
}
Try This (Values can be changed based on what you are doing). I credit SoloLearn for helping me learn it (the app is Learn HTML for android).
<div width:100%;height:100%; style="background-color:white; color:black; padding:20px;">
Width and height auto fit themselves, background colors make box color, color is text color, and padding adds space after content. You can also nest tags if you want to change padding color since there is no value or element that I know of to do it inside of the tag.
This is a cheat, but it works when you just need some html to get the edges of the text in a few spaces:
div style="padding-left: 4em; padding-right: 4em"
As you can see from this example, the input seems to "overflow" its parent div. I'd like to add padding to the input without making it overflow its parent.
I would like to know the best solution/workaround for every browser (including IE, Firefox, Chrome, etc).
You can see this answer, but if you don't like it, you can use box-sizing CSS3 property like this:
input {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
Live jsFiddle example
Padding adds to the width of your object. One option would be to remove the left/right padding from the input and just use text-indent, although this removes the right padding.
.inside{
background: blue;
border: none;
padding-bottom: 10px;
padding-top: 10px;
text-indent: 10px;
width: 100%;
}
Alternatively, instead of using hardcoded pixel-widths for your padding, you could use percentages, and subtract that value from the width:
.inside{
padding: 3%;
width: 94%;
}
Don't specify the width of the inside div as 100%. A div will automatically fit the width of its parent container. Demo
Looks like the input is inside the div but is located in the top left corner. Because the input takes-up 100% of the div's width it obscures the red background of the div. The div is longer so it sticks out the bottom making it seem like the input is on-top. Do the following:
Apply the padding to the CSS of the outside div not the input box.
You could apply a margin to the input if you want but I think padding
the containing div is better.
Make the input box less wide than the div (<100%)