This question already has answers here:
Floated element gets outside of its parent?
(5 answers)
Closed 6 years ago.
The li height is not defined and it automatically changes with the content. However, it only changes with the right hand side of its content rather than the left. Have changed the left side to block but it does not work. The link is as follows:
[http://ec2-52-32-145-125.us-west-2.compute.amazonaws.com/#/posts][1]
Add this to your CSS:
.posts li {
overflow: auto;
}
Related
This question already has answers here:
Why is this inline-block element pushed downward?
(8 answers)
Missalignment with inline-block (other elements pushed down)
(2 answers)
CSS inline-block issue - element being pushed down [duplicate]
(3 answers)
Closed 3 months ago.
I am participating in a CSS class on Udemy. Unfortunately I got no answers on thier internal discord site, so I am trying here.
This is a question about the display of some elements. What I don't understand is that first div element is moving down on the page, because I wrote the text "Hey you" in it. It shouldn't move down in my opinion, it should stay on the top of the page inline with the other two elements.
Here is the html and CSS:
div {
height: 200px;
width: 200px;
background-color: olivedrab;
border: 5px solid black;
display: inline-block;
margin: 50px;
}
<div>Hey you</div>
<div></div>
<div></div>
First div moving down
I have tried to give the first div an id:
<div id="first_div">Hey you</div>
And give that id a position of absolute:
#first_div {
position: absolute;
}
But it doesn't really work since the absolute value of the position property removes the element from the document flow, and thereby places it on top of the second element, so only two out of the three divs is showing, so no fix really!
Divs are now incorrectly stacked
This question already has answers here:
How can I make a div not larger than its contents?
(43 answers)
Closed 11 months ago.
I am trying to style a <ul>'s items. What I am basically trying to do is when i hover the mouse over one <li> a subtle border should appear. But the problem is that the border is taking the entire list's width.
Code is:
li:hover {
border-style: dotted;
border-width: 0.1rem;
}
I have tried to apply display: inline-block or other things that came to me, but didn't manage to make it work.
Current behaviour in this image:
currentBehaviour
What is the solution and what is the cause of the current behaviour? Thank you!
It's because your li is taking the full width of ul tag.
You can use
width: fit-content;
Which will make the li take the length of only the text inside rather than complete ul
This question already has answers here:
When flexbox items wrap in column mode, container does not grow its width
(9 answers)
Closed 4 years ago.
I'm using a column wrap layout, and the page is going to load new content and append them as new children elements to the parent box element, so I hope the box width auto fit to the children elements.
Codes here: https://codepen.io/mashirozx/pen/exgRqV
What it looks now:
My hope (Notice the overflow-x bar):
Problem solved:
Adding overflow: auto to the flex box.
Try to change:
flex-container-content > div {
background-color: #EB213C;
width: auto;
margin: 10px;
text-align: center;
line-height: 75px;
font-size: 30px;`
This question already has answers here:
Grow height of parent div that contains floating nested divs
(6 answers)
What is a clearfix?
(10 answers)
What methods of ‘clearfix’ can I use?
(29 answers)
Closed 4 years ago.
In this example of a drop down menu navigation bar at w3school, when all the li elements gets float: left;, the background-color of ul is gone, but adding overflow: hidden; brings it back. How does that work?
The float: left removes li elements from the flow inside ul element. Since li are the only children of ul. 'ul' does not contain "anything" therefore no background. overflow: hidden is a technique similar to "clearfix" to force containment of float children.
Have a read on this link - Simple Tips on Containing Floats
This question already has an answer here:
Removing spacing under the image
(1 answer)
Closed 6 years ago.
i have this code (https://jsfiddle.net/26gvaekf/1/) and want that A height was exactly at IMG boundaries. However, there is small space after IMG
can anybody explain, why this happens? and which css property i should use (only not float one).
DEMO
css
img {
vertical-align:top /* img are default bottom aligned make it to top */
}
/* for demonstration purpose */
a {
display: inline-block /* to cover your img completely */
}