My HTML page with 2 columns and footer and header:
<div id="main">
<div class="header"> </div>
<div class="left"> </div>
<div class="data"> </div>
<div class="bottom"> </div>
</div>
In my case I want left DIV with auto width and data DIV with 100% width. Like on this image:
How to CSS with IE 6 support? Thank you!
Demo
html
<div class="header">
header content
</div>
<div class="content">
<div class="left">left</div>
<div class="right">right</div>
</div>
<div class="footer">
footer content
</div>
css
body, html{
padding:0;
margin:0;
position:relative;
height:100%
}
.header, .footer{
width:100%;
background:#ccc;
padding:10px;
box-sizing:border-box;
}
.content{
background:#eee;
width:100%;
padding:10px;
height:100%;
box-sizing:border-box;
padding:10px;
}
.left{
width:50%;
float:left;
background:#bbb;
height:100%;
}
.right{
width:50%;
float:right;
background:#aaa;
height:100%;
}
as required DEMO
css
keeping everything same as above just change below css
.content{
background:#eee;
width:100%;
padding:10px;
height:100%;
box-sizing:border-box;
padding:10px;
display:table
}
.left{
width:auto;
background:#bbb;
height:100%;
display:table-cell
}
.right{
background:#aaa;
height:100%;
display:table-cell;
width:100%
}
It will work i think.
Please check and let me know.
.container {
width: 500px;
max-height: 500px;
margin: 10px;
border: 1px solid #fff;
background-color: #ffffff;
box-shadow: 0px 2px 7px #292929;
-moz-box-shadow: 0px 2px 7px #292929;
-webkit-box-shadow: 0px 2px 7px #292929;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}
.mainbody,
.header,
.footer {
padding: 5px;
}
.mainbody {
margin-top: 0;
min-height: 150px;
max-height: 388px;
overflow: auto;
}
.header {
height: 40px;
border-bottom: 1px solid #EEE;
background-color: #ffffff;
height: 40px;
-webkit-border-top-left-radius: 5px;
-webkit-border-top-right-radius: 5px;
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
.footer {
height: 40px;
background-color: whiteSmoke;
border-top: 1px solid #DDD;
-webkit-border-bottom-left-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
-moz-border-radius-bottomleft: 5px;
-moz-border-radius-bottomright: 5px;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}
.left{
width:50%;
float:left;
background:#bbb;
height:100%;
}
.right{
width:50%;
float:right;
background:#aaa;
height:100%;
}
<div id="container">
<div class="header">Header</div>
<div class="mainbody">
<div class="left">left</div>
<div class="right">right</div>
</div>
<div class="footer">Footer</div>
</div>
Related
I have two containers and I want to link them with a negative-rounded-ish div : JSFIddle
HTML:
<div class="div"></div>
<div class="d-flex">
<div class="p1"></div>
<div class="p2"></div>
</div>
<div class="div"></div>
CSS:
.div {
background:#e0e0e0;
border:solid 1px red;
padding:10px;
border-radius:5px
}
.p1 {
background:#e0e0e0;
width: 25px;height: 10px;
-webkit-mask-image: radial-gradient(circle at left, transparent 0, transparent 19px, black 0px);
}
.d-flex { display:flex }
.p2 {
background:#e0e0e0;
width: 25px; height: 10px;
-webkit-mask-image: radial-gradient(circle at right, transparent 0, transparent 19px, black 0px);
}
Preview:
I want to know if I can extend borders to get sth like this
CSS tricks with before & after pseudo might help!
.div {
background:#e0e0e0;
border:solid 1px red;
padding:10px;
border-radius:5px
}
.join {
margin-left: 20px;
background:#e0e0e0;
width: 20px;
height: 10px;
overflow:hidden;
position:relative;
z-index:1;
margin-top:-1px;
margin-bottom: -1px;
}
.join:before, .join:after{
content: '';
height: 8px;
width: 10px;
position:absolute;
border-radius:10px;
border:1px solid red;
background-color:#fff;
}
.join:before{
left:-5px;
border-left: 0;
}
.join:after{
right:-5px;
border-right: 0;
}
<div class="div"></div>
<div class="join"></div>
<div class="div"></div>
I want the code to show up the 3 bars, and the 3 dots to eventually be dropdown options. For some reason the 1st out of the 3 dots does not want to be spaced correctly.
#dropdown {
background: #3f51b5;
padding: 30px;
margin: 0px;
}
#dot {
width: 5px;
height: 5px;
background: white;
border-radius: 50%;
float: right;
}
#bar {
width: 25px;
height: 3px;
background: white;
margin: 5px;
}
<div id="dropdown">
<div id="dot"></div>
<div id="bar"></div>
<div id="dot"></div>
<div id="bar"></div>
<div id="dot"></div>
<div id="bar"></div>
</div>
Picture of what is returned:
This is a hard thing to do with floats.
A possible solution could be to wrap the dots and the bars within a div.
Afterwards you can position those wrapping divs in the style you like.
I used flexbox for this in the following snippet.
#dropdown {
display: flex;
justify-content: space-between;
align-items: center;
background: #3f51b5;
padding: 30px;
margin: 0px;
}
.dot {
width: 5px;
height: 5px;
margin: 5px;
background: white;
border-radius: 50%;
}
.bar {
width: 25px;
height: 3px;
background: white;
margin: 5px;
}
<div id="dropdown">
<div>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
</div>
<div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
</div>
</div>
p.s.: you should use the keyword class instead of id for repeating elements. This might still work, but is considered bad practice and might break javascript implementations using that id.
You can easily do this with one element for each:
#dropdown {
background: #3f51b5;
padding: 10px 50px;
overflow:hidden;
}
#dot {
width: 10px;
height: 30px;
background:
radial-gradient(5px 5px at center, white 57%, transparent 61%) top/10px 10px;
float: right;
}
#bar {
width: 25px;
height: 22px;
margin: 4px 0;
background:
linear-gradient(#fff,#fff) top/100% 3px,
linear-gradient(#fff,#fff) center/100% 3px,
linear-gradient(#fff,#fff) bottom/100% 3px;
background-repeat:no-repeat;
float:left;
}
<div id="dropdown">
<div id="bar"></div>
<div id="dot"></div>
</div>
Here is another idea:
#dropdown {
background: #3f51b5;
padding: 10px 50px;
overflow:hidden;
}
#dot {
width: 5px;
height: 5px;
background:#fff;
box-shadow:
0 10px 0 #fff,
0 20px 0 #fff;
border-radius:50%;
float: right;
}
#bar {
width: 25px;
height: 23px;
padding:7px 0;
margin: 4px 0;
border-top:3px solid #fff;
border-bottom:3px solid #fff;
background:#fff content-box;
float:left;
box-sizing:border-box;
}
<div id="dropdown">
<div id="bar"></div>
<div id="dot"></div>
</div>
Also like this with pseudo element:
#dropdown {
background: #3f51b5;
padding: 10px 50px;
overflow:hidden;
}
#dot {
width: 5px;
height: 5px;
margin: 15px 0;
background:#fff;
border-radius:50%;
float: right;
position:relative;
}
#dot:before,
#dot:after{
content:"";
position:absolute;
height:inherit;
width:100%;
left:0;
background:inherit;
border-radius:inherit;
top:-8px;
}
#dot:after {
bottom:-8px;
top:auto;
}
#bar {
width: 25px;
height: 3px;
margin: 15px 0;
background:#fff;
float:left;
box-sizing:border-box;
position:relative;
}
#bar:before,
#bar:after{
content:"";
position:absolute;
height:inherit;
width:100%;
left:0;
background:inherit;
top:-8px;
}
#bar:after {
bottom:-8px;
top:auto;
}
<div id="dropdown">
<div id="bar"></div>
<div id="dot"></div>
</div>
Use something like if you want to check for first specific dot
#dropdown div:first-child {
position:relative;
top:4px
}
I want my #wrap to have bottom:0 so that my cards all align to the bottom of the viewport but it doesn't seem work when I applied position absolute to the wrapper. Why does it so?
<div id="wrap">
<div class="card" id="card1">black</div>
<div class="card" id="card2">pink</div>
<div class="card" id="card3">orange</div>
</div>
CSS
.card{
border:1px solid black;
height:120px;
width:100px;
position:absolute;
-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 10px;
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
#wrap{
position:absolute;
bottom:0;
height: 100% !important;
min-height: 100% !important;
}
#card1{
background:black;
top:0;
}
#card2{
background:pink;
top:10px;
}
#card3{
background:orange;
top:20px;
}
http://jsfiddle.net/t94vdwak/1/
Here you go buddy
http://jsfiddle.net/incept0/rrapj20o/4/
.card{
border:1px solid black;
height:120px;
width:100px;
position:absolute;
bottom: 0;
left: 0;
-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 10px;
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
#wrap{
position:absolute;
bottom:0;
left: 0;
height: 120px;
min-height: 120px;
}
#card1{
background:black;
top:0;
}
#card2{
background:pink;
top:10px;
}
#card3{
background:orange;
top:20px;
}
The wrapper itself must be positioned absolutely at the bottom and then the cards must be offset within the wrapper.
http://jsfiddle.net/ryvvyqfc/
.card {
border:1px solid black;
height:120px;
width:100px;
position:absolute;
-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 10px;
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
#wrap{
position:absolute;
bottom:0;
}
#card1{
background:black;
top:0;
}
#card2{
background:pink;
top:10px;
}
#card3{
background:orange;
top:20px;
}
it seems that you specify that you need the stack of cards on the bottom of the viewport, well position: absolute align items against the page, if you want to align items against the viewport you could use position: fixed.
Here I edited your sample:
.card{
border:1px solid black;
height:120px;
width:100px;
position:absolute;
-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 10px;
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
#wrap{
position:fixed;
bottom:0;
overflow: visible;
}
#card1{
background:black;
bottom:20px;
}
#card2{
background:pink;
bottom:10px;
}
#card3{
background:orange;
bottom:0px;
}
<div id="wrap">
<div class="card" id="card1">black</div>
<div class="card" id="card2">pink</div>
<div class="card" id="card3">orange</div>
</div>
This way your items will stick to the bottom of the viewport even if you scroll down.
How it works is that wrapper has no height but it does not hide the overflow and cards are positioned not from the top(like in your example) but from the bottom (reverse of what you did)
Don't forget that if you want the items to be over other content to adjust z-index property.
I want to create arc transparent inside border radius with CSS\html. In fact I want corner div to be transparent and display bottom of page.
.corner{
float:right;
border-top-left-radius:60%;
width:50px;
height:48px;
margin-top:2px;
background:#fff;
background:rgba(f,f,f,0.1);
}
.div{
background-color: rgb(50,20,70);
width:130px;
height:50px;
}
.left{
float:left;
width:70px;
height:48px;
margin-top:2px;
color:white;
}
<div class="div">
<div class="left">345345</div>
<div class="corner"></div>
</div>
You can use a box-shadow to keep a transparent background on .corner :
.corner {
float: right;
border-top-left-radius: 60%;
width: 50px;
height: 48px;
margin-top: 2px;
box-shadow:0 0 0 500px rgb(50, 20, 70);
}
.div {
overflow:hidden;
width: 130px;
height: 50px;
}
.left {
float: left;
width: 70px;
height: 48px;
margin-top: 2px;
color: white;
}
body{
background:url('http://lorempixel.com/output/people-q-c-640-480-7.jpg');
background-size:cover;
<div class="div">
<div class="corner"></div>
<div class="left">345345</div>
</div>
I have a requirement to like this image
As you can see in the 1st image there is a link called review and it is at center with black background.I wanted to do like that way and I did this way But the link is coming at top.How can I make as per the image.
Do it in this way
.outer {
width: 89px;
height: 89px;
-webkit-box-shadow: 0px 0px 10px #4d4d4d;
-moz-box-shadow: 0px 0px 10px #4d4d4d;
box-shadow: 0px 0px 10px #4d4d4d;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
-khtml-border-radius: 8px;
border-radius: 8px;
border: solid white 3px;
overflow: hidden;
padding: 10px;
}
.image {
background: red;
padding: 0;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
-khtml-border-radius: 8px;
border-radius: 8px;
width: 80px;
height: 80px;
overflow: hidden;
}
.bg {
background: url("http://www.computerhope.com/logo.gif");
width: 69px;
height: 69px;
}
.bg a {
margin-top: 40px;
padding-left: 10px;
color: #ffffff;
}
And
<div class="outer">
<div class="image">
<div class="bg"><br />
<a href="http://www.google.com">
Review
</a>
</div>
</div>
</div>
See this code in jsfiddle.
<img src="http://lorempixel.com/200/200/" />
<div>Some Text</div>
<img src="http://lorempixel.com/200/200/" />
<div class="div">Text</div>
And Here IS CSS
div {
position:absolute;
top:100px;
left:100px;
background:black;
opacity:0.5;
}
.div {
position:absolute;
top:100px;
left:300px;
background:black;
opacity:0.5;
}
a {
text-decoration:none;
color:red;
}
have a look at this fiddle demo