This question already has answers here:
What is the difference between block and inline-block with width: 100%?
(2 answers)
Closed 4 years ago.
I'm working on HTML.
I tried to center div in parent.
But there's always right margin extended out of the div.
So, now I changed to just a plain text, but it doesn't solve the problem.
How to fix this one?
That margin is because p is a block element.
Add following CSS.
p.myDiv {
display: inline-block;
}
Instead of margin: 0px;
Try margin:0 auto;
Try this one for your code.
<body>
<p class="mydiv">ok</p>
</body>
.mydiv {
width: 20%;
margin: 0 auto;
}
Paragraph is a block level element which takes the entire width by default. If you give width 20% remaining space will be filled with margin. If you don't want the remaining margin use inline block element. Check out w3scholl website for block and inline block elements.
Centering in CSS: A Complete Guide canu you read CSS TRICKS
Centering things in CSS is the poster child of CSS complaining. Why does it
have to be so hard? They jeer. I think the issue isn't that it's difficult to
do, but in that there so many different ways of doing it, depending on the
situation, it's hard to know which to reach for.
Related
This question already has an answer here:
How does padding percentage work?
(1 answer)
Closed 3 years ago.
I wonder if this is very stupid to ask but I am asking anyway because I haven't found the answer anywhere to my satisfaction yet.
I am trying to make a responsive page where I want to define padding of a div called content which contains another div as "text" and is sitting inside another div element called container which has predefined height and width and position: relative. Now the problem is that I defined padding: 45% 45%; and it works very well on the width by taking the root value of the parent container but it flush outside the parent when it comes to height
.container
{
box-sizing: border-box;
position: relative;
border: 1px;
height: 100px;
width: 600px;
margin:0 auto;
}
.content{
background-color: skyblue;
padding: 43% 43%;
}
#textlogo {
font-size: 4em;
}
<div class="container">
<div class="content">
<div id="textlogo">Text</div>
</div> </div>
Your issue seems to be with the box-sizing,
Set box-sizing: padding-box, this way the browse calculates the total width of the element together with the padding and it will clear off any overlay. Your padding is also a bit high and it's causing the problem.
You must note that the flushing is likely caused by your font-size: 4em. This is a large font and it will force the content div to extend in order to accommodate it #textlogo content..
You should very rarely use the padding property in CSS. Going all the way back to Internet Explorer 4 margin worked correctly.
Use margin on the child element instead of padding on the parent. If you use padding on the parent it automatically effects all the child elements. You can "blanket" apply margin to all child elements by using #parent > div selector in example and then cascade secondary margin for individual elements you need to adjust.
You should use padding if there are no child elements or you're dealing with bugs in rendering engines or the standards themselves (e.g. when implied "logic" is used instead of direct (actual) logic).
As Mosia mentioned there is the box-sizing property and while support at this point is pretty much universal if you want to learn CSS the way it was originally intended I wouldn't recommend that shortcut as it will rob you from a true understanding of the code.
This question already has answers here:
My inline-block elements are not lining up properly
(5 answers)
overflow:hidden + display:inline-block moves text upwards [duplicate]
(1 answer)
display:inline-block and overflow:hidden leading to different vertical alignment
(3 answers)
Closed 7 years ago.
So if I've got two sibling HTML elements like so:
<div>
<span id="child-one">ChildOne</span>
<span id="child-two">ChildTwo</span>
</div>
And one, but not both, of these two sibling elements have "display:inline-block" AND "overflow:hidden" in their styling:
#child-one {
display: inline-block;
}
#child-two {
display: inline-block;
overflow: hidden;
}
Then one sibling is shown offset a small distance below the other. (See it happening here: https://jsfiddle.net/reyan62/oqc71f25/) (P.S. I'm using Chrome)
Does anyone have an explanation for this? It seems very odd. I'm not super familiar with what "display:inline-block" does though.
Thanks!
I would suggest using overflow: hidden; on both elements. If it's not possible you can use vertical-align to address the issue. This question/answer explains the reason.
Add div > span { vertical-align: top; } to fix this.
Like so: https://jsfiddle.net/oqc71f25/2/
This is the best guide I used to understand how inline-block works, I hope it helps you,
http://learnlayout.com/inline-block.html
I would try to use overflow:hidden on the both of them or you can align them manually.
You could also position your elements into the div.
This question already has answers here:
How to remove the space between inline/inline-block elements?
(41 answers)
Closed 8 years ago.
I want to to display two divs inline, one div is 25% and the other 75%, when I use:
display: inline-block;
It seems to generate gaps in between the two divs, which obviously knocks the 75% div down.
How do I remove the gap? I used:
vertical-align: top;
This has removed the top gap... Now just the side gap needs to go.
See here jsfiddle.
The problem is that you have a white space between your two div elements, and because they are of inline-block display, it renders just like a space between two letters in a regular text.
The solution is using a negative word-spacing on the container:
word-spacing: -1em;
jsFiddle Demo
See more here: Fighting the Space Between Inline Block Elements
Also here display: inline-block extra margin
It's because of the whitespace between your divs in the HTML.. Make it like this:
<div class="grid_one">
</div><div class="grid_two">
</div>
http://jsfiddle.net/npP3p/1/
Or, use float:left;, but remember to clear the floating after that or give the container a height..
Just add float:left; to first class.
Fiddle
Tim is correct, its the whitespace that creates the margin.
Another solution to it is to add a margin-right: -4px to .grid_one, check the updated fiddle.
Float left was the precious gem you were missing
Float:left;
http://jsfiddle.net/npP3p/2/
Why not float: left; the divs?
This question already has answers here:
How to force child div to be 100% of parent div's height without specifying parent's height?
(31 answers)
Closed 9 years ago.
There is the following simple structure:
<div id="container">
<div id="header">...</div>
<div id="menu">...</div>
<div id="content">...</div>
<div id="footer">...</div>
</div>
I need that menu and content have got the same height, but I can't set in as constant. I set "min-height" for the both items as "600px", but now "content" is more than 600px, but "menu" has got 600px. How can I fix it?
If you don't care so much about IE6 and IE7, the simplest answer is setting
display: table-cell;
on each of your columns.
Just check http://ie7nomore.com/css2only/table-layout/ for this pure CSS2.1 solution (both columns are contenteditable so you can easily add lines and lines of text in one and/or another column)
And no it isn't "using tables" as some may argue : the table value of the CSS property display renders the same way as a the HTML element table but it's still the semantic of a div (i.e. none) or whatever element it's applied to ;)
Then for IE6 and IE7, you can use conditional comments for a simple fallback (like applying background to one of the column and if the other is longer in some pages ... nevermind and forget it, it's old IE and your text is still readable)
Another method (a visual trick) is the technique of faux-columns
I used display: inline-block, is this what you are looking for?
http://jsfiddle.net/SMxRs/1/
#header, #menu, #content, #footer {
width: 600px;
height: 500px;
background: #ccc;
padding-left: 10px;
display: inline-block;
}
#container {
width: 2500px;
}
I have a few divs which makes a little bit too spacey between the footer and the body. So i want to convert one div to a span. But when I do that, it messes the footer's content a bit up.
How can i do this and keep the styles that already have been defined for the footer?
Thanks in advance!
Edit
div.footer {
width: 986px;
margin: 0 auto;
padding-bottom:18px;
border: 0;
text-align: left;
color:#000000;
}
As you already know, the difference between a <div> and a <span> is just that one defaults to display:block; and the other to display:inline;. To make one act as the other, just set the display style to the other type.
However, you already said you tried this and it didn't achieve the effect you were looking for. There is another display property, which is less well known, but provides a half-way house between the two:
display:inline-block;
What it does is display it inline, but still with block-like properties. (This is basically how an <img> tag works by default).
Could this be the answer you're looking for?
To convert a div to a span, simply add:
.myDiv
{
display: inline;
}
But I'm really not sure that this is the solution you're after.
Quote:
there are 2 divs next to eachother which creates a hugh gap between the body and the footerbody and the footer
Solutions:
Remove empty div(s) from HTML
Remove empty div(s) by adding display:none
Reduce height of the div(s)
Reduce margin or padding of the div(s)
Set position:relative; top:-[yourownnumber]px to .footer
Try adding overflow:auto; to your span. Also add display:block;
If there is too much space between the footer and the body, have you looked at what the margins and paddings are on the affected divs? Does something have a height or a min-height that is making some of the content within the body taller than the natural end of the content? Firebug is a great tool for this.
Div is a block element. Other block elements are paragraphs, headings, lists, etc. Span is an inline element. Other inline elements are strong, image, anchor, etc.
You still need the body to be contained in a block-level element.
How if add this:
position:relative /*optional*/
float:left;
left:0px;
I always do this before i know to use span when I first learn css I always do to my element content.