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.
Related
This question already has answers here:
Align inline-block DIVs to top of container element
(5 answers)
CSS vertical alignment of inline/inline-block elements
(4 answers)
Closed 3 years ago.
I have 3 divs placed side by side. When I'm trying to put a header (or any element) inside of the middle div (or any div), that div floats way down. Why does it do that?
CSS I used for divs:
div {
display: inline-block;
background-color: lightgray;
height: 600px;
width: 300px;
}
Add *{box-sizing:border-box} to your CSS. It defines how the width and height of an element are calculated.
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;
}
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.
This question already has answers here:
Shrink-to-fit div and paragraph, based on image?
(6 answers)
Closed 8 years ago.
I have a div with an img and a p tag. I want the div to "shrink-wrap" the image and let the text organically wrap. However, I'm trying to do this with absolutely no javascript or constraints (ie width=300px / 50% etc) as my frame needs to be fluid.
Here's an example of something similar to what I have now: How can I make the outer dive match the size of the "Google" image without using fixed sizes or javascript?
http://jsfiddle.net/pVF74/
div {
border:1px solid black;
display:table;
width:1%;
}
http://jsfiddle.net/pVF74/2/
Add display: inline-block; to your div's class.
Example here http://jsfiddle.net/r9rLr/
This question already has answers here:
White space at bottom of anchor tag
(5 answers)
Remove white space below image [duplicate]
(9 answers)
Closed 9 years ago.
I have the following code, and it allows the red to show through from the a element. Why is this. I would have expected that the a element would only expand to the size of the contents but it looks like it's a bit bigger than that. See the codepen here http://codepen.io/anon/pen/soqEz.
HTML
<img src="http://placehold.it/150x150" />
CSS
a{
background: red;
margin-bottom:0;
padding-bottom:0;
border-bottom:0;
}
img {
margin-bottom:0;
padding-bottom:0;
border-bottom:0;
}
EDIT: I see the answers below ... but can anyone also explain why the space is there AT ALL ( I mean given that it's a block level element ... what's the purpose of it in the first place ) ... as opposed to trying to get rid of it. Thanks
The img element is inline by default. inline elements act as text and default to a vertical-align: baseline. This means that the bottom of the image aligns with the bottom of your text. Notice that a lower case p or g goes below the bottom of the vertical text alignment. You can fix it by either adding vertical-align: bottom OR display: block.
It does this because it's an inline element. Change the display type
img {
display:block;
}
because the image is an inline element by default. Add display: block to your img rule and see.
In your case you need to add display:block, but to the image tag instead of the link tag.
add
img
{
display:block;
}