As a part of learning CSS (& practically applying it — by creating simple themes), today I wanted to know some proper ways of clearing floats in CSS.
I wanted to see how Twitter does it, so I downloaded Bootstrap, went through the bootstrap.css file, and found what I was looking for (I found two code blocks):
.clearfix {
*zoom: 1;
}
.clearfix:before, .clearfix:after {
display: table;
content: "";
}
.clearfix:after {
clear: both;
}
&
.container {
margin-left: auto;
margin-right: auto;
*zoom: 1;
}
.container:before, .container:after {
display: table;
content: "";
}
.container:after {
clear: both;
}
I immediately tried it out, and that specific part of my code looked like so:
<p class="sample-preview">
<span class="sample-preview">PREVIEW</span>
<em>This is italicized aka emphasized</em>, and so is <em>this</em>.<br />
<strong>This is bold aka strong emphasis</strong>, and so is <strong>this</strong>.<br />
Use <strong><em>italics and bold together</em></strong> if you <strong><em>have to</em></strong>.
</p>
+
p.sample-preview {
border: 1px solid #FFCCC9;
background: #FFEBE9;
outline: 2px solid #FFEBE9;
padding: 10px;
}
span.sample-preview {
display: inline-block;
float: right;
margin:0;
font-weight: bold;
font-size: 12px;
background: #FFCCC9;
padding: 2px 5px;
}
.sample-preview {
margin-left: auto;
margin-right: auto;
*zoom: 1;
}
.sample-preview:before, .sample-preview:after {
display: table;
content: "";
}
.sample-preview:after {
clear: both;
}
Although I am not entirely sure, I think this code is causing a weird bug on the page I tried it. Why do I think so? Everything seemed fine when I removed display: table; from the code using Firebug.
You can take a look at the page here and the bug is — the first pink box is taller than the content. What am I doing wrong?
The issue is that you're also clearing the floated menu to the right.
There's two solutions for that:
the usual is to float your content area itself to the left. This means that everything inside it is in a different float context. Your clear will only affect the elements inside of it.
another trick that works is specifying overflow: hidden on your sample-preview paragraph. This is probably easier to do. Specifying the overflow property on an element (but not set to visible) causes it to behave like a float container.
Cfr: http://www.brunildo.org/test/clear.html, http://webdesignerwall.com/tutorials/css-clearing-floats-with-overflow
I should also note that with this overflow trick, you don't need the clearfix at all.
Related
I am using react-indiana-drag-scroll, and I am doing a Horizontal scroll, but the last item ( the 30th) 's right red shadow cannot show on screen
I tried to add padding/ margin/ border, still does not work.
sandbox: https://codesandbox.io/s/react-indiana-drag-scroll-default-forked-1xcxt
It's not the issue of react-indiana-drag-scroll. It's the peculiarity of browsers behavior [1], [2].
There are many different solutions to solve your exact problem.
Emulate margin by :after pseudo-element (example):
.container:after {
content: "";
flex: 0 0 10px;
}
.row:last-child {
margin-right: 0;
}
Use inline-block (example):
.container {
display: block;
white-space: nowrap;
}
.row {
...
margin: 10px;
display: inline-block;
}
Other solutions could be found by the links above.
I used below CSS code for add row number to a table rows:
table {
direction: rtl;
counter-reset: line-number;
}
td:first-child {
text-align: right !important;
}
td:first-child:before {
content: counter(line-number) ".";
counter-increment: line-number;
padding-right: 0.3em;
color: lightgray;
}
but it's content not align right after tenth row. See below image:
But I want something like this:
I also try add padding but it's not a working solution.
How fix this?
This is my Fiddle now.
You can set min-width of td:first-child:before.
td:first-child:before {
content: counter(line-number) ".";
counter-increment: line-number;
padding-right: 0.3em;
color: lightgray;
min-width: 20px;
display: inline-block;
}
Make sure you put the number in an element, like this:
<input type="checkbox"> <div class="number">10</div>
Then you can style that element, to have a minimum width:
.number {
min-width:20px;
}
That way they have the same with, and you don't need funny padding depending on how many digits the number has.
This is the website I am developing right now: in-nabavi.com. There is nothing in it but a few blocks. As you see there is an extra white space at the end of the document that I really have no idea why it is in there.
This is the firebug result
As you see the area with red line around it is not included in the HTML area.
I also tried the following
body, html{
margin:0;
height: 100%;
}
but it didn't work again.
Thanks.
You have used content: "." inside clearfix class for setting layout.
Use content: ""; only.
.clearfix:after {
visibility: hidden;
display: block;
content: "";
clear: both;
height: 0;
}
There is a .clearfix:aftercss class in which there is a content:"."
Remove that.
Or override it, so that it does not hamper anything else.
.clearfix:after {
display: block;
height: 0;
clear: both;
visibility: hidden;
content: close-quote;
}
You can try this....
.panels-flexible-1 .panels-flexible-row-last{position: absolute;}
I am trying to put a responsive css made square before the tag. Something like this
I've been trying to do it like this, but I can't seem to get the square to appear. Could you please help me out with this one.
h1::before {
position: relative;
width: 25%;
padding-bottom: 25%;
overflow: hidden;
background: red;
}
Thank you for your answers!
In order to see a pseudoelement you need to always define its content property, e.g. content: "" : anyway in your example you should also define a display property.
Example : http://codepen.io/anon/pen/bNNQrj
h1:before {
content: "";
display: inline-block;
vertical-align: middle;
...
}
A final note about the syntax: the :: CSS3 version is correct, but if you need to make it work also with IE8 just use the CSS2 syntax with a single colon (:)
Further info available on MDN
You need content and display set.
http://jsfiddle.net/37s1mtmk/
h1 { font-size:2em;}
h1::before {
width: 1em;
height:1em;
background: red;
display:inline-block;
content: "";
margin-right: 10px;
}
Is it possible to implement vertical layout with CSS only, and not with HTML elements?
I have a list of divs inside one div. By default the next element is right to the last, when there's no place on right, it is placed below.
I'd like to achieve the same with CSS style settings. Is it possible?
By CSS-only I mean, we have div and its children, and do not add anything special such as:
line-breaking elements ( <br/>, <div style="clear:both;"/> )
UL tags
tables (yes, still used, f.g. JSF almost exclusively based on them)
So:
<div id="menu">
Page 1
Page 2
Page 3
</div>
And CSS implementing vertical layout:
#menu { ??? }
#menu a { ??? }
Is there a ??? that I could use to achieve what I want?
Display anchor tags as block elements.
#menu a {
display: block;
}
Do you mean something like this?
http://jsfiddle.net/7Y9jS/
#menu {
width: 300px;
}
#menu a {
display: block;
background: #ccc;
color: #000;
padding: 10px 0;
text-align: center;
margin-bottom: 2px;
}
<div id="menu">
Page 1
Page 2
Page 3
</div>
set display block to a
#menu a {
display: block;
}
use float left
#menu a {
float:left;
}
and then add the class group to your #menu
.group:before,
.group:after {
content: "";
display: table;
}
.group:after {
clear: both;
}
.group {
zoom: 1; /* For IE 6/7 (trigger hasLayout) */
}