I'm trying to create a div with 3 divs inside.
.outter
{
right: 100px;
border: 10px solid white;
}
.main
{
overflow: hidden;
width: 100%;
height: 150px;
}
.left
{
float: left;
width: 40%;
height: 100%;
background-color: green;
border-right: 5px solid white;
}
.center
{
float: left;
width: 40%;
height: 100%;
background-color: red;
border-left: 5px solid white;
border-right: 5px solid white;
}
.right
{
float: right;
width: 20%;
height: 100%;
background-color: orange;
border-left: 5px solid white;
}
<div class="outter">
<div class="main">
<div class="left">
</div>
<div class="center">
</div>
<div class="right">
</div>
</div>
</div>
This is what I got so far.
-The parent div should have a right distance fixed of 100px, a border of 10px white and the widht is the 100% - 100px;
-The inside divs have 40% + 40% + 20% with a distance between them of 10 px (thats why I putted the border-left 5 and border-right 5.
I'm having problems setting this. What I need is to have fixed sized borders and margin to the right. the other divs should be dynamic to fullfill the 100% width.
Can anyone help me?
Regards,
You can use box-sizing for this. write like this:
.main,
.main >*{
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;
}
Check this:
http://jsfiddle.net/ubtdT/
You have a problem with the box-model. An element cannot have 100% width and then a 10px border, because the border is added outside the 100% width, which is causing your problem.
Depending on what browsers you intend to support, you can make use of CSS3's box-sizing property. By setting box-sizing: border-box;, you can force the browser to instead render the box with the specified width and height, and add the border and padding inside the box. Which should solve your problem. Note the limited support in older browsers.
If you want to go even more experimental you can use the new CSS3 calc() to actually calculate a dynamic width:
/* Firefox */
width: -moz-calc(75% - 100px);
/* WebKit */
width: -webkit-calc(75% - 100px);
/* Opera */
width: -o-calc(75% - 100px);
/* Standard */
width: calc(75% - 100px);
Related
I have a problem with the CSS function calc in Safari.
I have following code: https://jsfiddle.net/0Lugw0zq/1/
#parent {
position: absolute;
height: 32px;
width: 120.77px;
background-color: red;
border: 5px solid black;
}
#child {
position: absolute;
height: 32px;
left: 12px;
width: calc(100% - 12px);
background-color: black;
}
<div id="parent">
<div id="child"></div>
</div>
In Chrome / Firefox you will see a black box and smaller red box in its left, while in Safari there will be an additional thin red line in the right part of the box.
Notice how the parent container's width has a float value (120.77px). The child container's width is calculated with calc(100% - 12px) what results in 108px instead of 108.77px in Safari - obviously due to integer parsing.
How can I prevent Safari from showing this thin line?
I'm trying to float some content left, with a table to the left-hand side.
Here's a JSFiddle: http://jsfiddle.net/TxLyr/1/
I'd like the text content that's currently below the table to be to the right of the table.
What am I doing wrong?
Full CSS for reference:
.container {
width: 100%;
border: 1px solid red;
}
.table-container {
width: 60%;
float: left;
overflow-x: scroll;
overflow-y: none;
}
table {
width: 100%;
border: 1px solid #ccc;
}
#aside {
float: left;
border: 1px solid blue;
}
You've to set a proper width value for the #aside element.
Fiddle
Since you have a border of 1px, you cannot set the width to 40%;. Set it to 39% or remove the border.
You have to set the width of course. If you don't the element takes it's auto width.
#aside {
float: left;
border: 1px solid blue;
width:39%;
}
change it:
#aside {
float: left;
border: 1px solid blue;
width:39%; /* this line added */
}
http://jsfiddle.net/TxLyr/9/
and you can use 40% but if you have border or padding you must use box-sizing and it's need css3.
and box-sizing Compatibility here:
http://caniuse.com/#search=boxsizing
You have to give a width 38% on id #aside. Here using 38% width because you are using a 1px border. Also to clear float property you have to use overflow:hidden property.
Can I ask a little help about creating that shape with CSS?
The button needs a circle for the icon, and the simple box for the text.
Here is a possible version using the :before pseudo element. The pseudo element is converted into a circle by using border-radius: 50% and is then positioned before the rectangular div#menu as required.
You can add a image (like the one in question) to the pseudo element by using the content property like shown below:
content: url(http://yoursite.com/yourimage.png);
or using the background-image property also:
background-image: url(http://yoursite.com/yourimage.png);
#menu {
position: relative;
width: 100px;
height: 24px;
line-height: 24px;
color: white;
background-color: peru;
border: 1px solid peru;
border-radius: 2px;
padding-left: 24px;
}
#menu:before {
position: absolute;
content: '';
height: 40px;
width: 40px;
top: -9px; /* (height of parent - height of pseudo) / 2 - border-top of parent for vertical mid */
/* top: -17px; (height of parent - height of pseudo) - border-top of parent for bottom align */
left: -24px; /* some value less than width - depends on amount of overlap needed */
border: 1px solid transparent;
background-image: url(http://lorempixel.com/40/40/people/1);
background-color: peru;
border-radius: 50%;
}
/* Just for demo */
* {
font-family: Calibri;
letter-spacing: 2px;
}
#menu {
margin: 25px;
}
<div id='menu'>Menu Text</div>
Note: This is in essence a different version of the answer posted by Jason Gennaro. If you need support for IE lower versions, use his answer because they don't support :before.
Here's a quick and dirty version:
HTML
<div id="circle"></div>
<div id="rectangle">Header Text</div>
CSS
#circle{
border-radius: 50%;
width: 85px;
height: 85px;
background: brown;
float:left;
}
#rectangle{
width:300px;
height:40px;
background:brown;
color:white;
float:left;
margin-top:20px;
margin-left:-40px;
position:relative;
z-index:-1;
padding-left:60px;
padding-top:6px;
font-family:arial;
font-size:2em;
}
DEMO
http://jsfiddle.net/H6Lkk/
Explanation
use border-radius:50% and any width to create a circle.
float the two divs to allow for the overlap
use position and z-index to place the rectangle under the circle
add the logo image as necessary in the #circle
I have this code:
<div style="margin: 0px; padding: 0px;">
<div style="border: 1px solid #aaaaaa; padding: 8px; width: 40%; top: 0; left: 0; margin-bottom: 10px; position: relative;">
....
</div>
<div style="border: 1px solid #aaaaaa; padding: 8px; width: 40%; top: 0; right: 0; margin-bottom: 10px; position: relative;">
....
</div>
</div>
My end goal is to have two boxes each sharing 50% of width with margin in-between them.
Instead they are shown below each other which I do not want. They appear not to respect their designated position values. (I even set width to only 40% for both, so it was not an issue of all space used.)
For reference: I chose not to use float since I don't want them to realign underneath each another. I chose not to use table display since I would like IE7 compatibility. I have never done much CSS, so my question is hopefully simple to solve (crossing fingers)
As others have mentioned, you are missing either float: left (remove top/right/bottom/left values) or position: absolute.
If you want width to be fluid but padding to be fixed (or vice-versa), then you need width: 50% with box-sizing: border-box. This makes the padding part of that 50%.
If you want width and padding to both be fluid, this trick isn't necessary. Just use percentage measurements for both so the total is 50% (e.g., width: 48%; padding: 1%).
You really just need to float your inner divs, to make it all a bit easier, add box-sizing attribute.
Lets say having this HTML:
<div class="box"></div>
<div class="box"></div>
And then just add something like this:
.box {
float: left;
width: calc(50% - 5px);
margin-right: 5px;
padding: 8px;
border: 1px solid #aaaaaa;
box-sizing: border-box;
}
.box:last-child {
margin: 0 0 0 5px;
}
By using calc(), you have to subtract the margin of each .box. And the use of box-sizing property is to avoid that border and padding were added to the width, which is the default behavior on the CSS box model. You should have a look on caniuse to see compatibilities and the use of vendor prefixes.
There're really more than a way to do the same thing. But I think this one is a very solid way to achieve your goal.
http://jsfiddle.net/gVwar/
I believe this fiddle solves your problem. Error being you didn't float the divs.
Block level elements will never be placed adjacent to one another when not floated, unless when positioned absolutely or fixed.
Note: If you want to position your elements with top, left & right properties, you'll have to set their position: absolute.
Are you looking for something like this?
Check the demo out at the link above.
<div class="box1">X</div>
<div class="box2">X</div>
CSS
* {
margin: 0;
padding: 0;
}
.box1 {
width: 48%;
background-color: white;
border:1px solid black;
}
.box2 {
width: 48%;
background-color: white;
border:1px solid black;
}
.box1, .box2 {
display: inline-block;
margin: auto;
}
#media screen and (max-width: 300px){
.box1, .box2 {
width: 46%;
float: right;
display: inline-block;
margin-right: 1%
}
I am trying to create a bunch of concentric circles purely using CSS. Here's my CSS:
.inner-circle{
height: inherit;
width: inherit;
background: #FFF;
border: 1px solid #1a1a1a;
border-radius: 50%;
padding: 5px;
margin: 1%;
}
My attempt so far is here: http://jsfiddle.net/4yL2m/
However, as you can see in the link, I am only able to create ellipses according to the width and height of the canvas area. Can anyone suggest how to draw perfect concentric circles by nesting the same div within itself?
I can't see any way around specifying exact dimensions (with equal width/height) for the outermost circle. You can give it its own class
<div class="inner-two container">
.container {
width: 100px;
height: 100px;
margin: 1%;
}
The inner circles will be concentric with borders/padding if they are set to box-sizing: border-box since the border/padding will be included in the dimensions. margin is not included in this and is thus undesirable. You also need to specify height: 100%.
http://jsfiddle.net/4yL2m/8/
Note that the containing div does not also have to be one of the circle divs; it just can be.
Note in order to use it for firefox you need to set -moz-box-sizing: border-box; as well as boxing-sizing: border-box;.
Basically, you need to get the aspect ratio fixed at 1:1. Apparently there's an aspect-ratio CSS attribute that webkit browsers recognize, but it won't work cross-platform. See this question for more details, including some cross-browser workarounds.
This might get you closer;
.inner-two{
height: 0px;
width: 50%;
background: #FFF;
border: 1px solid #1a1a1a;
border-radius: 50%;
padding-bottom: 50%;
margin:25%;
}
Just add :
display: table-cell;
text-align: center;
vertical-align: middle;
Three concentric circles
Here I have drawn 3 circles using CSS. The middle circle is exactly centered between the outermost and innermost circle. In other words the
RADIUS OF THE MIDDLE CIRCLE = (OUTER CIRCLE RADIUS + INNER CIRCLE RADIUS) / 2.
Here each circles has been represented by a DIV.
HTML
<div class="parent">
<div class="child1">
</div>
<div class="child2">
</div>
</div>
CSS
<style>
.parent {
background-color:blue;
width:400px; /* You can define it by % also */
height:400px; /* You can define it by % also*/
position:relative;
border:1px solid black;
border-radius: 50%;
}
.child1 {
background-color:lime;
top: 10%; left:10%; /* of the container */
width:80%; /* of the outer-1 */
height:80%; /* of the outer-1 */
position: absolute;
border:1px solid black;
border-radius: 50%;
}
.child2 {
background-color:yellow;
top: 20%; left:20%; /* of the container */
width:60%; /* of the inner-1 */
height:60%; /* of the inner-1 */
position: absolute;
border:1px solid black;
border-radius: 50%;
}
</style>