css-float – Tarik Billa

Parent Height doesn’t follow their float children [duplicate]

April 12, 2024 by Tarik

Add overflow:hidden; to the container: #mainContainer{ width: 1000px; /*height: 1000px;*/ height:auto; margin-left:auto; margin-right:auto; background-color: #ff6600; padding-bottom: 20px; overflow: hidden; /* <— here */ } Because its content is floated, the container div collapses. Using a ‘clearfix’ class or, as I mentioned, adding overflow:hidden will cause the container to contain the floated elements. UPDATE Explanation of … Read more

height when containing floating

January 2, 2024 by Tarik

Good options to contain the floats: Add overflow: hidden to the ul. Use clearfix.

CSS Floating with Overlap

December 31, 2023 by Tarik

z-index property will not apply to statically positioned elements. In order to use z-index the CSS must also include any position value other than static (ie relative, absolute, fixed). .left { float: left; width: 96px; background-color: red; border: 2px solid orange; z-index: 3; margin-right: -2px; position: relative; } .right { float: left; width: 396px; background-color: … Read more

CSS force new line

December 19, 2023 by Tarik

Use the display property a{ display: block; } This will make the link to display in new line If you want to remove list styling, use li{ list-style: none; }

Why does adding float:left to my css make my link unclickable?

December 18, 2023 by Tarik

The fix is pretty simple and cross browser too, add this (to your unclickable link): #QuestionEditLink, #QuestionHistoryLink { position: relative; z-index: 10; } The fix here is the z-index, but it won’t work if position isn’t relative/absolute/fixed. For more info on z-index see https://developer.mozilla.org/en-US/docs/Web/CSS/z-index Have used this all the time, is simple, works in all … Read more

CSS – width not honored on span tag

December 18, 2023 by Tarik

Span is an inline element and you can therefore not set a width. To set a width you must first set it to a block element with display:block; After that you can set a width. Since span is a native inline element, you can use inline-block too and it will even work in IE: display:inline-block;

Why does overflow: hidden have the unexpected side-effect of growing in height to contain floated elements?

December 15, 2023 by Tarik

To put it most simply, it is because a block box with an overflow that isn’t visible (the default) creates a new block formatting context. Boxes that create new block formatting contexts are defined to stretch to contain their floats by height if they themselves do not have a specified height, defaulting to auto (the … Read more

Float a div right, without impacting on design

December 10, 2023 by Tarik

What do you mean by impacts? Content will flow around a float. That’s how they work. If you want it to appear above your design, try setting: z-index: 10; position: absolute; right: 0; top: 0;

Bootstrap 3: Span elements floating right in list-group-item do not consume vertical space

December 10, 2023 by Tarik

To keep the buttons aligned wrap a new element around them and float the wrapping element. Then clear the float on list items with the .clearfix class to fix their height. <div class=”list-group”> <a href=”#” class=”list-group-item clearfix”> <span class=”glyphicon glyphicon-file”></span> Lorem ipsum dolor sit amet, consectetur adipisicing elit. <span class=”pull-right”> <button class=”btn btn-xs btn-info”>CCS</button> <button … Read more

Restrict border width to text width in a block element

December 1, 2023 by Tarik

This works on Chrome. h2 { width: fit-content; }