I just have a container div-element that contains two div-elements that should appear at the same level on both sides of the container-div. The following solution does not work:
<div id="result" >
<div class="right">Update</div>
<div class="left">delete</div>
</div>
stylesheet follows:
div.left{
position:absolute;
left: 5px;
top:0px;
color: green;
border-style:solid;
border-color: green;
}
div.right{
position:absolute;
right: 2px;
top:0px;
color: red;
border-style:solid;
border-color: red;
}
#result{
position:relative;
width:100%;
border-style:solid;
border-color: blue;
}
The blue margin from the container-div does not contains the the other two divs and appears on top of the other two containers.
What am I missing? Thanks!
Ideally the .left and .right divs would be floated:
div.left{
float: left;
margin: 5px;
color: green;
border-style:solid;
border-color: green;
}
div.right{
float: right;
margin: 5px;
color: red;
border-style:solid;
border-color: red;
}
you have put position which is not needed basically.
see below answer
html here
<div id="result" >
<div class="right">Update</div>
<div class="left">delete</div>
</div>
css here
div.left{
left: 5px;
top:0px;
color: green;
border-style:solid;
border-color: green;
float:left;
}
div.right{
right: 2px;
top:0px;
color: red;
border-style:solid;
border-color: red;
float:right;
}
#result{
width:100%;
border-style:solid;
border-color: blue;
float:left;
}
live example here.
http://codepen.io/anon/pen/waKrH
please mark as answer if this helped you.
What you could try is float:left to both of the elements your trying to put side by side, that should push-force them, see if it works and let me know.
Are you trying to achieve this fiddle?
Better way is to change the apsolute into relative,with floating.
And if you use floating, dont forget to add overflow:hidden; to the parent container.
Related
http://jsfiddle.net/9877/6E2pQ/2/
What I want do is have columncontent1 on the left and columncontent2 and columncontent3 stacked on the right side. see the jsfiddle. How do I fix the css? I am running out of ideas. Is the error in the css or the way the div placed in the body:
<style type="text/css">
/*<![CDATA[*/
.columncontainer1{
width:1001px;
position:relative;
border:0px;
background-color:#fffffa;
overflow:hidden;
}
.columncontainer2{
float:left;
position:relative;
right:300px;
border-right:1px solid #0a0a0a;
background-color:#f5f5f5;
}
.columncontainer3{
float:left;
position:relative;
bottom: 10px
border-right:1px solid #0a0a0a;
background-color:#f5f5f5;
}
.columncontent1{
float:left;
width:680px;
position:relative;
background-color:#933;
border: 1px;
left:300px;
padding:10px;
overflow:hidden;
}
.columncontent2{
float:left;
width:280px;
position:relative;
background-color:#FFF;
border: 2px;
left:301px;
padding:10px;
overflow:hidden;
}
.columncontent3{
float:left;
width:280px;
position:relative;
left:301px;
border: 4px;
background-color:#CC6;
padding:10px;
overflow:hidden;
}
/*]]>*/
</style>
There's a lot going on there, I've simplified the HTML and CSS:
CSS:
.leftCol {
float: left;
width: 50%;
background-color: #ccc;
height: 60px;
}
.rightColContainer {
float: left;
width: 50%;
}
.rightCol1 {
background-color: #333;
height: 30px;
}
.rightCol2 {
background-color: #777;
height: 30px;
}
HTML:
<body>
<div class="leftCol">columncontent1</div>
<div class="rightColContainer">
<div class="rightCol1">columncontent2</div>
<div class="rightCol2">columncontent3</div>
</div>
</body>
You only need to 'contain' the right hand column to stop the 'stacked column' flowing incorrectly.
CSS3 actually allows you to make several columns automatically without having to have all those classes. Check out this generator: http://www.generatecss.com/css3/multi-column/
This is however only if you are trying to make your content have multiple columns like a newspaper.
I want to make a 1 px line from the left side of the screen to the end of a centered div.
The div is centered with margin: auto;.
This image shows how it should look:
Here's an example using calc:
.box{
width:200px;
height:200px;
border:1px solid blue;
margin:0 auto;
}
.line{
border: 1px solid red;
width: calc(((100% - 200px)/2) + 200px);
}
JSFiddle
Browser support
How about this solution? no extra markup needed, cross browser and does not depend on the width of the element
#content {
width:400px;
height: 200px;
margin:auto;
position: relative;
}
#content:before{
content: '';
height: 1px;
background: red;
position: absolute;
top: -5px;
right: 0;
width: 999%; /*a large number*/
}
Demo fiddle
here is another solution and it is cross browser http://jsfiddle.net/9qrSy/3
<div class="inner"></div>
<div class="wrapp"></div>
css
body {
padding:8px;
}
div.wrapp {
width:300px;
height:300px;
border:2px solid green;
margin:auto;
position:relative;
}
div.wrapp:before {
content:'';
position:absolute;
width:100%;
height:1px;
right:0;
top:-6px;
background:blue;
z-index:1;
}
.inner {
width:50%;
float:left;
position:absolute;
height:1px;
left:0;
top:12px;
background:blue;
}
I am not sure if this works in all browsers, but I believe hr takes up all the space you provide it with. Therefore you can give it a large negative left-margin and put it inside the centered div. Instead of a hr-element, you could use an empty div too, which might or might not be easier to use. You can set the border-top style of that div to a wider range of border-types (dotted for example).
<div id="content">
<hr id="bar" />
<div id="realcontent">
Something here
</div>
</div>
With CSS:
#content {
width: 400px;
margin: auto;
color: white;
}
#bar {
margin-left: -1000px;
margin-bottom: 5px;
background: blue;
}
#realcontent {
background-color: #000000;
}
How can I create a button like the picture by css3 ?
I've tried the following code.
<style type="text/css">
.left,
.right{
float:left;
border-style:solid;
width:0px;
height:0px;
}
.left{
border-color: red green red green;
border-width:15px 0px 15px 75px;
}
.right{
border-color: green green green red;
border-width:15px 20px 15px 35px;
}
</style>
<div>
<div class="left"></div>
<div class="right"></div>
</div>
but got like this output:
Whats the exact way to create curved border of buttons and thin curve between two buttons ?
-Thanks.
EDIT: according to your answers I've made this :
<style type="text/css">
.left,
.middle,
.right{
height:30px;
display:block;
float:left;
text-decoration:none;
position: relative;
text-align:center;
color:black;
}
.left,
.right{
padding:0px 10px;
line-height: 30px;
}
.left{
background-color:red;
width:60px;
border-bottom-left-radius: 17px;
border-top-left-radius: 17px;
}
.middle{
background-color:#ddd;
width:2px;
}
.right{
background-color:green;
width:40px;
border-bottom-right-radius: 17px;
border-top-right-radius: 17px;
}
.middle::before{
content: "";
position: absolute;
top: 5px;
margin-top: -5px;
border-width: 15px;
border-style: solid;
border-color: #ddd transparent #ddd transparent;
left: -15px;
}
.right::before{
content: "";
position: absolute;
top: 5px;
margin-top: -5px;
border-width: 15px;
border-style: solid;
border-color: green transparent green transparent;
left: -15px;
}
.left:hover{
background-color:blue;
}
.right:hover{
background-color:orange;
}
.right:hover::before{
border-color: orange transparent orange transparent;
}
</style>
play
pause
output:
is it ok for standard website ?
Here you go:-
<style type="text/css">
.left,.right,a{
float:left;
border-style:solid;
width:0px;
height:0px;
border-radius: 3px;
}
.left{
border-color: 0A0D6A;
border-width:10px 0px 10px 30px;
}
.right{
border-color: 6568B9 6568B9 6568B9 0A0D6A;
border-width:10px 30px 10px 8px;
margin-left:-3px;
}
</style>
<div>
<div class="left"></div>
<div class="right"></div>
</div>
Creating the white boundary between the blues with pure css is tricky. Same goes for the "speaker" and "play" icons but i'm sure in future, CSS4 will make this one easier for all of us :). In the mean time, simple images will work fine.
EDIT:- Here's 2 ways of getting the "color change on hover" effect you requested:
Method #1, harnessing the css "hover selector" of the parent div
<style type="text/css">
.left,.right,a{
float:left;
border-style:solid;
width:0px;
height:0px;
border-radius: 3px;
}
.left{
border-color:#0A0D6A;
border-width:10px 0px 10px 30px;
}
.right{
border-color:#6568B9 #6568B9 #6568B9 #0A0D6A;
border-width:10px 30px 10px 8px;
margin-left:-3px;
}
#top:hover .left{ border-color:#00FF55;cursor:pointer; }
#top:hover .right{ border-color:#6568B9 #6568B9 #6568B9 #00FF55; }
</style>
<div id=top>
<div class="left"></div>
<div class="right"></div>
</div>
Method #2 harnessing the css "next sibling selector" of the .left classed div
<style type="text/css">
.left,.right,a{
float:left;
border-style:solid;
width:0px;
height:0px;
border-radius: 3px;
}
.left{
border-color:#0A0D6A;
border-width:10px 0px 10px 30px;
}
.right{
border-color:#6568B9 #6568B9 #6568B9 #0A0D6A;
border-width:10px 30px 10px 8px;
margin-left:-3px;
}
.left:hover { border-color:#00FF55;cursor:pointer; }
.left:hover +div{ border-color:#6568B9 #6568B9 #6568B9 #00FF55; }
</style>
<div>
<div class="left"></div>
<div class="right"></div>
</div>
Check whether they both work on iexplore < 9
Actually the best solution to this is that.......... the button is three images... if you want to use the two parts of buttons separately.
1st - The left side button
2nd - The junction where you see the transition
3rd - The right side part.
You can also use color and image.
1st - The left side button color
2nd - The junction where you see the transition image
3rd - The right side button color.
This is the way most of the webpages do..
How can I achieve this view with CSS:
------------------TITLE
or
TITLE------------------
I have
<div id="titleBlock">
<div id="title">Some text</div>
<div id="titleLine"></div>
</div>
And my styles are:
#titleLine {
border-top: 1px solid black;
width: 84%;
clear: both;
height: 20px;
}
#title {
height: 10px;
float: right;
}
My approach is here: jsFiddle
However the line width is defined with percents and I need it adjust automatically with CSS.
This may be what you are after: http://jsfiddle.net/XpSWX/1/
Hope this helps
<div id="titleBlock">
<div id="title">Some text</div>
<div id="titleLine"></div>
</div>
#titleLine {
border-top: 1px solid black;
width: 84%;
float:left;
height: 20px;
margin-top:8px;
}
#title {
height: 10px;
float: right;
}
http://jsfiddle.net/sY2SV/1
<div id="titleBlock">
<div id="title">Some text</div>
<div id="titleLine"></div>
</div>
#titleLine {
border-top: 1px solid black;
width: 84%;
float:right;
height: 20px;
margin-top:8px;
}
#title {
height: 10px;
float: left;
}
http://jsfiddle.net/sY2SV/2
Here is a solution:
#titleBlock {
width:100%;
}
#titleLine {
background:black;
position:absolute;
z-index:1;
left:0px;
top:14px;
width:100%;
height: 1px;
}
#title {
display:inline-block;
padding:4px;
background:white;
position:relative;
z-index:2;
/* Only variable to change... Just say left and it woulb be title------- */
float:right;
}
DEMO
Hey now you can used this
HTML
<div class="hello"><span>Hello i m sony</span></div>
Css
.hello{
background:green;
text-align:left;
position:relative;
}
.hello span{
padding-right:10px;
background:green;
display:inline-block;
position:relative;
z-index:1
}
.hello:after{
content:'';
border-top:solid 5px red;
position:absolute;
right:0;
left:0;
top:7px
}
Live demo
http://tinkerbin.com/1guJzKcI
Check my answer in Horizontal Line in Background using Css3
You can do it with a 1% gradient like this
.datedAside {
background: linear-gradient(0deg, transparent 49%, #000 50%, transparent 51%);
}
.datedAside span{
background: #FFF;
padding: 0 0.5rem;
}
You'll nedd the extra span to be the same background color as the background of the component to make it look like it has "deleted" the line going behind the text.
For text, it's best to use text-align
I am using CSS to float a div next to another one. This div only appears if the user is looking at their own "business." When I don't clear anything, a large space appears between these divs and the next one. When I do clear the float, the text in the next div is pushed to the left. I think I am misunderstanding something about how to use the float and clear. I'm not very good with CSS.
How can I remove the space without destroying the "fs" div?
Here are pictures to show what is happening:
Here's the CSS and HTML code:
div.stuff {
border-bottom:dotted 1px;
border-left:dotted 1px;
border-right:dotted 1px;
border-top:dotted 1px;
padding:10px;
margin:10px;
width:35%;
height:65px;
border-radius: 5px;
}
div.container {
border-bottom:dotted 1px;
border-left:dotted 1px;
border-right:dotted 1px;
border-top:dotted 1px;
padding:10px;
padding-left:25px;
margin-bottom:10px;
position:relative;
height:65px;
width:45%;
top:-97px;
right:10px;
border-radius: 5px;
overflow: hidden;
float:right;
clear:right;
}
div.fs {
border-style:double;
text-align:center;
padding:10px;
margin:10px;
margin-left:20%;
width:60%;
border-radius: 5px;
}
<div class=stuff>
<img src=/economy/images/cash.png> Cash on Hand: 10,245<br>
<img src=/economy/images/worker.png> Workers Employed: 6<br>
<img src=/economy/images/machine.png> Machines Leased: 4
</div>
<div class=container>
Click Here to Manage Cash on Hand.<br>
Click Here to Manage this Business.<br>
Click Here to Disband this Business.
</div>
<br>
<div class=fs><a href=/economy.php?section=fs&id=7>Historical Financial Statements</a></div>
You need to float your left hand div, and use clear:both on the div at the bottom. I've made some changes in this jsFiddle.
perhaps this:
div.container {
border-bottom:dotted 1px;
border-left:dotted 1px;
border-right:dotted 1px;
border-top:dotted 1px;
padding:10px;
padding-left:25px;
margin-bottom:10px;
position:relative;
height:65px;
width:45%;
/*top:-97px;*/
margin-top:-97;
right:10px;
border-radius: 5px;
overflow: hidden;
float:right;
/*clear:right;*/
}
I would float your div.stuff to the left and your div.container to the right and just use clear: both on the div.fs element. I made a small fiddle to illustrate this. In this fiddle I added a wrapper class for clarity where I set a min-width to prevent that the right div floats down one line when the browser window is resized. Try it out!
Here's the CSS:
div.stuff {
border: 1px dotted black;
padding:10px;
margin:10px;
width:35%;
height:65px;
border-radius: 5px;
float: left;
}
div.container {
border: 1px dotted black;
padding:10px;
padding-left:25px;
margin-bottom:10px;
position:relative;
height:65px;
width:45%;
margin: 10px;
border-radius: 5px;
overflow: hidden;
float:right;
}
div.fs {
clear: both;
border-style:double;
text-align:center;
padding:10px;
margin:10px;
margin-left:20%;
width:60%;
border-radius: 5px;
}