This question already has answers here:
How to avoid empty clear divs?
(5 answers)
Using :after to clear floating elements
(5 answers)
Closed 8 years ago.
I'm using a div with css of clear:both;
The div has no content and the clear:both is the only style applied to it. It works fine on my devices to solve floating problems.
My question is: does the div need content, like a non breaking space to work on all devices and browsers? Do some browsers ignore empty divs?
Thank you
I'am pretty sure no browser 'ignores' an empty divs. I would add a 100% width just to be sure it works.
Related
This question already has answers here:
Why doesn't the height of a container element increase if it contains floated elements?
(7 answers)
Closed 7 years ago.
I published a simple example on jsbin. And I do not understand why The blue box does not surround the child elements if the childs have a float:left.
http://jsbin.com/saluxapiti/1/edit?html,css,js,output
When you set property to float.It takes your element over html surface.Looks like an air baloon.
Summarizing what this page states:
Elements after a floating element will flow around it; therefore the border of the parent class is flowing around the floated child.
This question already has answers here:
Why is there an unexplainable gap between these inline-block div elements? [duplicate]
(6 answers)
Closed 7 years ago.
So, I'm using display:inline-block to put 2 <div> tags side by side in HTML. They have no margin and no padding.
Still there appears to be a gap between the two <div> tags.
My question is why is there a gap in the first place. Shouldn't the <div>s be flush next to each other? Is this an artifact of the spec or not? This happens across browsers. (tested on IE and Chrome)
Here's an image
http://jsfiddle.net/v60e8wm5/1/
As the display short of inline, there is space between them as <b>Hello,</b> World have space between them.
Because there is space between the tags
<div>Test</div>
<div>Test</div>
Test with
<div>Test</div><div>Test</div>
or
<div>Test</div><!--
--><div>Test</div>
This question already has answers here:
Make a div fill the height of the remaining screen space
(41 answers)
Closed 7 years ago.
I have made a columnar layout that works fairly well for my needs, but I am experiencing an issue with the height of one column. I have prepared a jsBin that demonstrates the problem;
http://jsbin.com/mawuliyulo/1/edit?html,output
Basically, when you scroll down - eventually you start seeing white on the left side. Is there any way to force this to stretch all the way down indefinitely?
This is not using a flex-box layout. It is simply achieved using :before, and :after pseudo-selectors.
Add position:relative to your main-container class
This question already has answers here:
Why is there an unexplainable gap between these inline-block div elements? [duplicate]
(6 answers)
Closed 8 years ago.
So I was playing around with html, and I have made some links. By some magic power there is a magic space between the a-tags. I think it comes from the display: inline-block instruction, however the question is how to handle this space in web design where every pixel counts?
JsFiddle:
Go to JsFiddle example
Screenshot:
Your markup is invalid, start with embedding the a's in the li's, not the other way around.
And that magic space is not margin, it's the white space between your elements, which is mattering because you are using inline-block
Check out this question : How to remove the space between inline-block elements?
This question already has answers here:
CSS: Special Fluid Layout Problems
(5 answers)
Closed 3 years ago.
I have the following test code to play around with:
http://jsfiddle.net/b6QFY/1/
I want the "left" element to be fixed and the "right" element to be fluid within the parent container so that it will grow and shrink as the browser width changes, and not wrap. Seems so simple, but have issues getting something to work.
This is what I meant to link to. (I should be getting to bed.)
The core of it:
Padding-left on the container element, absolutely position left element with negative left-margin, and width of 100% on the right element.
To my knowledge this should work in most browsers, except IE6 and possibly 7.
you can use display:inline-block;
this article has will help http://www.tjkdesign.com/articles/liquid/3.asp
Absolute positioning the left element might be the more comprehensive answer when other things come into play, such as container borders and backgrounds and organic growth of the right element.
See my previous answer.