This question already has answers here:
Align inline-block DIVs to top of container element
(5 answers)
Closed 3 years ago.
Here's the code: https://jsfiddle.net/ohewuanx/
I'm working on part of a CSS lib with a react implementation, implementing a progress bar. It worked great in tests on the css side, but as soon as I implemented it in react, the actual filled bar was outside of its container. It sits a few pixels down. I realized the css tests didn't have <!DOCTYPE html> in the test files. Adding it broke the style, or revealed my already broken style.
I managed to fix it by swapping out
.progress-bar > * {
background: #008be1;
height: 4px;
display: inline-block;
}
for
.progress-bar > * {
background: #008be1;
height: 4px;
float: left;
}
but I have no idea why that fixed it, or why it didn't work in the first place. Heights are given, it's an inline-block element inside a block parent. There are no margins or paddings present. Why is the child div offset instead of being contained in the parent?
Remove both display:inline-block and float from that class. Why even add those
.progress-bar > * {
background: #008be1;
height: 4px;
}
Related
This question already has answers here:
CSS margin terror; Margin adds space outside parent element [duplicate]
(7 answers)
CSS: Margin-top when parent's got no border
(7 answers)
Why does this CSS margin-top style not work?
(14 answers)
is it a bug? margins of P element go outside the containig div
(3 answers)
Closed 4 years ago.
That's the best title I could come up with, sorry if it's not clear.
I have a table, which has a top-margin. Around that table I have a div, which has a blue background. This blue background only affects the table itself, and doesn't include the margin area (which seems weird considering the margin area should still be inside that div). Yet if I add a border to the div, the whole area (including the margin) gets that background.
#table_div {
background-color: blue;
border-color: red;
border-width: 5px;
border-style: solid;
}
#main_table {
margin: auto;
margin-top: 100px;
}
Is there any particular reason on why this happens?
To get a background without having to use a border I replaced the margin of the table to the padding of the div. I created this post not to ask how to get it to work, but really to understand what is happening and why it is happening
Example: https://jsfiddle.net/jxbmg4vx/1/
Remove the border lines to see what I mean
This is the CSS feature.
I have two solutions.
#table_div {
background-color: blue;
overflow:hidden;
}
or
#table_div {
background-color: blue;
padding-top:200px;
}
#main_table {
margin: auto;
}
This question already has answers here:
inline-block boxes not fitting in their container [duplicate]
(2 answers)
Closed 5 years ago.
I am making a header with 2 images as below:
<div id="header-logo">
<div class="header-logo"><img src="logo.png"></div>
<div class="header-name"><img src="logo-name.png"></div>
</div>
with the following css:
#header-logo { width: 538px; margin: 0 auto; }
#header-logo div { display: inline; height: auto; }
#header-logo div.header-logo { width: 183px; }
#header-logo div.header-name { width: 355px; }
The problem is that unless I make the parent div (#header-logo) 542px or bigger the child divs go below each other, I don't understand why as 183 + 355 = 538, where is the extra 4 pixels coming from?
You're dealing with the spaces that are characteristic of inline elements.
If you're writing text in a <p> element and you hit the space bar or add a line break, that space is rendered by the browser. This same behavior applies to all inline elements, like images and inputs.
The fastest way to resolve the issue is:
Add font-size: 0 to the parent element. In your code, just do:
div { font-size: 0; }, OR
Remove all spaces and line breaks between elements:
<div id="header-logo"><div class="header-logo"><img src="logo.png"></div><div class="header-name"><img src="logo-name.png"></div></div>
Other options include negative margins, omitting closing tags, using comment tags, floats and flexbox. See this article for details on each method:
Fighting the Space Between Inline Block Elements
For more details about this issue see:
How to remove the space between inline-block elements?
This question already has answers here:
CSS Margin Collapsing
(2 answers)
Closed 8 years ago.
Check this extremely simple html structure. One div inside another, the inner (green) div has margin-top: 100px, the outer (red) div has no margin-top. The outer div is twice (200px) as high as the inner div (100px).
So what would you expect the result to look like? If you're like me, you get the opposite of what you'd naturally expect to get.
My question is NOT how to prevent this. My question is WHY ist this happening this way consistently across all browsers? I mean, this obviously must be the way it's inteded to work, but to me it's strongly counter-intuitive.
.red {
background-color: #a00;
height: 200px;
}
.green {
background-color: #0a0;
margin-top: 100px;
height: 100px;
}
<div class="red">
<div class="green"></div>
</div>
http://jsfiddle.net/connexo/7txnoj7m/
Its normal way of rendering and it is called margin collapsing. More you can read here
I think its a parent/child dependency issue. The position of both Divs are default : 'static'. So the red Div is behind the green Div which has the margin-top.
This question already has answers here:
Using display inline-block columns move down
(2 answers)
Closed 8 years ago.
I have a web page of the following layout.
The sidebar on the left is of the following css:
.sidebar {
display: inline-block;
top: 0;
width: 200px;
height: 1000px;
}
and the content on the right of css:
.content { position: relative; display: inline-block; }
But on adding any content inside the sidebar, the layout becomes:
The sidebar goes downwards and can't even make it go up by changing the 'top' value.
How can i Align a sidebar successfully in the left side of the content?
You should use vertical-align: top; declaration instead for both inline block columns to keep them at the top, as follows:
.sidebar, .content {
vertical-align: top;
}
'vertical-align'
This property affects the vertical positioning inside a line box of
the boxes generated by an inline-level element.
top
Align the top of the aligned subtree with the top of the line box.
CSS top property is only applicable to none-static positioned elements. It doesn't have any effect on inline-blocks or any other inline level elements.
Try adding vertical-align: top;
try to use the fixed property:
posistion: fixed
Try to check the width of oyu content, if it properly fits into this 200px width.
If you have firebug on your browser should give a good hand on debuging it.
You need to use some sort of position rule or your top value has no effect. I would use position: absolute; . Using fixed is not ideal.
This question already has answers here:
Why doesn't the height of a container element increase if it contains floated elements?
(7 answers)
Closed 8 years ago.
Good day everyone. I'm a novice with css and I'm trying to float two div tags within one div tag but I'm getting the following
I gave the parent div tag a light grey background so I know something is wrong somewhere as the background has disappeared just after I floated the div tags.
Here's my css below.
.menu.container {
width: 100%;
background-color: #F0F0F0;
}
.category {
float: left;
}
Thanks a lot for your help!
when floating elements the parent container does not recieve information about width or height of the floated elements.
if you just want to align sports and News in a horizinal manner then try the following:
.category {
display:inline-block;
}
"display:inline-block" forms a block element that be on one line with another.