How to use CSS doing like this? especially double borders (NOT using border:double;)
PS: The HTML code of the Demo: ....1801180218031804 ...
You basically use nesting, meaning the parent container (.container) has a border and the child element (.childdiv) has a border. The html (for a single cell) would look like this:
.container,
.childdiv {
padding: 20px;
border: 1px solid black;
}
.container {
display: inline-block;
width: 70px;
}
.childdiv {
display: inline-block;
width: 30px;
}
<div class="container">
<div class="childdiv">
</div>
</div>
Check out the fiddle for a working demo.
Try This:
div {
border:1px solid #ccc;
padding: 10px;
display: inline-block;
}
div:before {
content: attr(data);
display: inline-block;
border:1px solid #ccc;
padding: 10px;
}
<div data="1898"></div>
Related
How to remove this gap or merge the borders? Because the lengths are inconsistent
box1 and box2 are 100px, box3 is 200px but their lengths are inconsistent because border...
so how do their length are consistent?
<main>
<div class="shortBox">box1</div>
<div class="shortBox">box2</div>
<div class="longBox">box3</div>
</main>
.shortBox {
width: 100px;
display: inline-block;
}
.longBox {
width: 200px;
}
.shortBox,
.longBox {
text-align: center;
font-size: 20px;
height: 50px;
background-color: #000;
color: #fff;
border: 1px solid #fff;
}
This happens when you have elements that have display: inline or inline-block. Since the browser treats these elements the same way as text, a line-break will be treated as white-space.
Setting the font size to 0 for the wrapper basically eliminates the whitespace, but keep in mind, that this property will be inherited to child elements, so you may have to set the font-size back to >0 for children. Also, this may break layouts that use em as unit, so keep that in mind. By also adding box-sizing: border-box the gaps are gone.
main {
font-size: 0;
}
.shortBox {
width: 100px;
display: inline-block;
}
.longBox {
width: 200px;
}
.shortBox,
.longBox {
box-sizing: border-box;
text-align: center;
font-size: 20px;
height: 50px;
background-color: #000;
color: #fff;
border: 1px solid #fff;
}
<main>
<div class="shortBox">box1</div>
<div class="shortBox">box2</div>
<div class="longBox">box3</div>
</main>
There is also a possible way to use comments to prevent the auto-formatting from adding the white-space / line-break. It does not look too elegant, but it gets the job done. Also, except for the box-sizing: border-box you don't need any additional CSS for this.
.shortBox {
width: 100px;
display: inline-block;
}
.longBox {
width: 200px;
}
.shortBox,
.longBox {
box-sizing: border-box;
text-align: center;
font-size: 20px;
height: 50px;
background-color: #000;
color: #fff;
border: 1px solid #fff;
}
<main>
<div class="shortBox">box1</div><!--
--><div class="shortBox">box2</div><!--
--><div class="longBox">box3</div>
</main>
The third way of solving this issue is to utilize flexbox. You can create layouts like this, without having to worry about gaps because of white-spaces or line-breaks.
watch this magic:
<main>
<div class="shortBox">box1</div><div class="shortBox">box2</div>
<div class="longBox">box3</div>
</main>
Notice that first 2 divs are NOT divided with new line.
Then in CSS add this extra 2px like this:
.longBox {
width: 202px;
}
I have the same code in both Plunker and JSFiddle:
Plunker
JSFiddle
As you can see, the link borders around the images are wrong in both cases within JSFiddle, but they are proper in Plunker.
Is this a problem with JSFiddle? If so, is there some CSS I can use to fix it, without breaking it elsewhere?
Here is the code. HTML:
.clearfix::after {
content: "";
clear: both;
display: table;
}
.one {
border: solid 2px gray;
width: 100px;
height: 100px;
padding: 3px;
margin: 2px;
float: left;
}
.one:hover {
border-color: #FF9900;
}
.two {
border: solid 2px gray;
width: 100px;
height: 100px;
padding: 3px;
margin: 2px;
display: inline-block;
}
.two:hover {
border-color: #FF9900;
}
<h3>Problem One - with float</h3>
<p>This is a problem in jsfiddle, but not plnkr</p>
<img src="https://en.js.cx/gallery/img6-thumb.jpg">
<img src="https://en.js.cx/gallery/img5-thumb.jpg">
<div class="clearfix"></div>
<h3>Problem Two - without float</h3>
<p>This is a problem in jsfiddle, but not plnkr</p>
<img src="https://en.js.cx/gallery/img6-thumb.jpg">
<img src="https://en.js.cx/gallery/img5-thumb.jpg">
stender's answer is the best, use always em unit:
.one img, .two img {
max-width: 100%;
}
because JSFiddle added border. If you inspect code you will see:
*, ::after, ::before {
box-sizing: border-box;
}
I have 2 div<> that I would like to be next to eachother. They are inside of a form<>. The one I have on the left won't float all the way up. It seems that my First Div keeps blocking it. I have resized it multiple times and It still doesn't work. Here is my Css code and as you can see there is not much to it. I also have no inline styling. My first Div is called ContactInput and my second Div is called invisible
#body {
border: 1px double black;
}
#checkout { //this is just a head at the top
text-align:left;
border-bottom: 1px solid black;
}
#contactInput{
clear:right;
padding:.5em;
}
#invisible{
float:right;
padding:.5em;
}
Like this?
#contact {
width: 50%;
padding:.5em;
background: blue;
float: left;
box-sizing: border-box;
}
#invisible {
width: 50%;
padding:.5em;
background: red;
float: left;
box-sizing: border-box;
}
<div id="contact">
</div>
<div id="invisible">
</div>
I recommend flex instead of float
.wrap {
display: flex;
}
#contact {
flex: 1;
padding:.5em;
background: blue;
}
#invisible {
flex: 1;
padding:.5em;
background: red;
}
<div class="wrap">
<div id="contact">
</div>
<div id="invisible">
</div>
</div>
Im trying to make a line after each of my h2 tags. I can´t figure out how I should tell the width, cause the lenght of the h2 headlines is differ from h2 to h2.
I use the :after method to create lines
h2:after {
position: absolute;
content: "";
height: 2px;
background-color: #242424;
width: 50%;
margin-left: 15px;
top: 50%;
}
Check code here: http://jsfiddle.net/s9gHf/
As you can see the line get too wide, and make the website too wide.
You could achieve this with an extra <span>:
h2 {
font-size: 1rem;
position: relative;
}
h2 span {
background-color: white;
padding-right: 10px;
}
h2:after {
content: "";
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 0.5em;
border-top: 1px solid black;
z-index: -1;
}
<h2><span>Featured products</span></h2>
<h2><span>Here is a very long h2, and as you can see the line get too wide</span></h2>
Another solution without the extra <span> but requires an overflow: hidden on the <h2>:
h2 {
font-size: 1rem;
overflow: hidden;
}
h2:after {
content: "";
display: inline-block;
height: 0.5em;
vertical-align: bottom;
width: 100%;
margin-right: -100%;
margin-left: 10px;
border-top: 1px solid black;
}
<h2><span>Featured products</span></h2>
<h2><span>Here is a very long h2, and as you can see the line get too wide</span></h2>
External examples: First, Second
There's no need for extra wrappers or span elements anymore. Flexbox and Grid can handle this easily.
h2 {
display: flex;
align-items: center;
}
h2::after {
content: '';
flex: 1;
margin-left: 1rem;
height: 1px;
background-color: #000;
}
<h2>Heading</h2>
using flexbox:
h2 {
display: flex;
align-items: center;
}
h2 span {
content: "";
flex: 1 1 auto;
border-top: 1px solid #000;
}
<h2>Title <span></span></h2>
Here is another, in my opinion even simpler solution using a flex wrapper:
.wrapper {
display: flex;
align-items: center;
}
.line {
border-top: 1px solid grey;
flex-grow: 1;
margin: 0 10px;
}
<div class="wrapper">
<p>Text</p>
<div class="line"></div>
</div>
External link
I notice that there are some flexbox implementations but they don't explain why and how to use it.
First, we just need one element, for this example h2.
We will change the element's display behavior to display: flex
Then, we center vertically its child elements using align-items: center.
h2 {
...
display: flex;
align-items: center;
}
Then, let's draw the line using the pseudo-element after.
We add '' to the content property to draw the element (we must).
Now lets make it flexible using flex: auto. This means that our element is sized according to its width and height properties. It grows to absorb any extra free space in the flex container, and shrinks to its minimum size to fit the container. This is equivalent to setting flex: 1 1 auto.
Then we add an small gap between the text and the line using margin-left: 1rem.
Finally, we draw a black line using border-top: 1px solid #000.
h2::after {
content: '';
flex: auto;
margin-left: 1rem;
border-top: 1px solid #000;
}
Here is functional snippet.
h2 {
font-size: 1em; /* not needed */
display: flex;
align-items: center;
}
h2::after {
content: '';
flex: auto;
margin-left: 1rem;
border-top: 1px solid #000;
}
<h2>Normal title</h2>
<h2>Very long title to test the behavior of the element when the content is wider</h2>
This is the most easy way I found to achieve the result: Just use hr tag before the text, and set the margin top for text. Very short and easy to understand! jsfiddle
h2 {
background-color: #ffffff;
margin-top: -22px;
width: 25%;
}
hr {
border: 1px solid #e9a216;
}
<br>
<hr>
<h2>ABOUT US</h2>
Here is how I do this:
http://jsfiddle.net/Zz7Wq/2/
I use a background instead of after and use my H1 or H2 to cover the background. Not quite your method above but does work well for me.
CSS
.title-box { background: #fff url('images/bar-orange.jpg') repeat-x left; text-align: left; margin-bottom: 20px;}
.title-box h1 { color: #000; background-color: #fff; display: inline; padding: 0 50px 0 50px; }
HTML
<div class="title-box"><h1>Title can go here</h1></div>
<div class="title-box"><h1>Title can go here this one is really really long</h1></div>
I am not experienced at all so feel free to correct things. However, I tried all these answers, but always had a problem in some screen.
So I tried the following that worked for me and looks as I want it in almost all screens with the exception of mobile.
<div class="wrapper">
<div id="Section-Title">
<div id="h2"> YOUR TITLE
<div id="line"><hr></div>
</div>
</div>
</div>
CSS:
.wrapper{
background:#fff;
max-width:100%;
margin:20px auto;
padding:50px 5%;}
#Section-Title{
margin: 2% auto;
width:98%;
overflow: hidden;}
#h2{
float:left;
width:100%;
position:relative;
z-index:1;
font-family:Arial, Helvetica, sans-serif;
font-size:1.5vw;}
#h2 #line {
display:inline-block;
float:right;
margin:auto;
margin-left:10px;
width:90%;
position:absolute;
top:-5%;}
#Section-Title:after{content:""; display:block; clear:both; }
.wrapper:after{content:""; display:block; clear:both; }
Please take a look at this laytout which i built with divs:
First of all you can ignore Header section
So Content has to be centered exactly at the center and it has a fixed width which is easy, but Left Column needs to extend from left side until it reaches Content and here is the difficult part, since the gap betwen Left Column and Content can be any length it's hard to know what width to set.
Now i know it would be fairly easy to do this with javascript but i would like to avoid that if possible.
EDIT as requested here is the code:
<div class="left_column"></div>
<div class="content"></div>
.left_column{
width:100px;
height:100px;
float:left;
}
.content{
width:100px;
height:100px;
margin:auto;
position:relative;
}
Take a look at Object-Oriented CSS. In particular, check out their grids page
tried percentages?
overflow: auto;
padding: 10px;
width: 45%;
try float left float right as well as display inline, you could also try width auto but that don't work too well
float:left;
width:auto;
height: auto;
display: inline;
there is also one more trick used in menus
<div id="mail_menu">
<ul>
<li><a href=something</a></li>
</ul>
</div>
css
#mail_menu {
position: relative;
top: 0px;
left: 0px; /* LTR */
z-index: 3;
color: #000;
}
#mail_menu ul {
list-style-type: none;
}
#mail_menu li {
display: inline;
float:left;
margin: 0px;
padding: 3px;
}
#mail_menu a {
color: #000;
background: #FFF;
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
margin: 1px;
border-color:#CCC;
border-width:1px 0;
padding: 2px;
float:left;
border-width:1px;
border-style:solid;
border-bottom-color:#aaa;
border-right-color:#aaa;
border-top-color:#ddd;
border-left-color:#ddd;
border-radius:3px;
-moz-border-radius:3px;
-webkit-border-radius:3px;
}
#mail_menu a:hover {
color: #0000DD;
text-decoration: none;
background-image: url(/images/lyel.png);
background-repeat: repeat-x;
}
css to middle something
.middle {
display: block;
width: 50em;
margin-left: auto;
margin-right: auto
}
and finally some table values for display to mess with
.td {
display: table-cell;
display:inline
}
.wrap{
position: inherit;
}
.tr {
display: table-row;
display:inline
}
table {
border-collapse: collapse;
}
th {
text-align: left; /* LTR */
padding-right: 1em; /* LTR */
border-bottom: 3px solid #ccc;
}
I would use percentages, but go 1% short of where you should. I've found a lot of times a browser will "round up" a pixel or something, so if you have your percentages totaling 100%, any extra added will push a div below.
For instance, if you wanted two divs, one on the right and one on the left, have one of them have width:49%; and the other width:50%;.
This can be accomplished using this hack, please try this:
div.header { height: 50px; line-height: 50px; background-color: #222; color: #eee; }
div.wrapper { background-color: #b261da;position: relative;z-index: 0; }
div.wrapper div.content { width: 600px;margin: 0 auto; background-color: #6189fe; color: #fefefe; }
div.wrapper div.left-column { background-color: #00fe72; position: relative;width: 550px;float: left;z-index: -1000; }
with this markup:
<div class="header">Header</div>
<div class="wrapper">
<div class="left-column">Left Column</div>
<div class="content">Content</div>
</div>
Note the left-column will be cutted if you resize the screen too much. Either way, I hope it helps.