I am trying to create a div whose width changes based on text inside.
The parent div width is auto and child div width is set to 100% which is the percent of parent div's width.
But the parent div occupies the whole page width. How can I maintain the minimum width of div to have the whole text in a single line while dynamically changing the text length.
Here is the implementation
.filled-no-icons {
border-width:0px;
position:relative;
padding:0px;
width:auto;
height:auto;
min-width:91px;
min-height:36px;
background-color:rgba(0,0,0,0);
}
.filled-no-icons .rectangle-3 {
border-width:1px;
position:absolute;
padding:0px;
width:100%;
height:100%;
min-width:91px;
min-height:36px;
border-radius:4px 4px 4px 4px ;
background-color:rgba(0,150.0,136.0,255);
left:0%;
top:0%;
}
.filled-no-icons .content {
border-width:0px;
position:absolute;
padding:0px;
width:calc(100% - 32px);
height:17px;
min-width:59px;
min-height:17px;
background-color:rgba(0,0,0,0);
left:16px;
top:calc(50% - 8.5px);
}
.filled-no-icons .content .label {
border-width:1px;
position:absolute;
padding:0px;
width:calc(100% - 0px);
height:17px;
min-width:59px;
min-height:17px;
color:rgba(255,255,255,255);
font-family:Roboto-Medium;
font-size:14px;
font-weight:500;
letter-spacing:0.75px;
line-height:16.40625px;
left:0px;
top:calc(50% - 8.5px);
}
<!DOCTYPE html>
<html>
<head>
<title>
Button test
</title>
<meta charset="UTF-8">
</head>
<body>
<div class="filled-no-icons">
<div class="rectangle-3"></div>
<div class="content">
<div class="label">Button</div>
</div>
</div>
</body>
</html>
Edit: Adding jsfiddle link
https://jsfiddle.net/3owturhc/
Not entirely sure why you made such simple design into complicated HTML/CSS. But in general you can set the container to display: inline-block as it has the shrink-to-fit feature. Example below without any markup changes.
Don't set .content to absolute position. As if a container contains nothing but absolute positioned elements, it will collapse to nothing, only if you give it some size, but it will not be aware of the content inside, which means the box size cannot be dynamic.
.filled-no-icons {
position: relative;
display: inline-block;
height: 36px;
line-height: 36px;
padding: 0 10px;
color: #fff;
}
.filled-no-icons .rectangle-3 {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
border-radius: 4px;
background-color: rgba(0, 150, 136, 255);
}
.filled-no-icons .content {
position: relative; /* increase stacking order */
}
<div class="filled-no-icons">
<div class="rectangle-3"></div>
<div class="content">
<div class="label">Button</div>
</div>
</div>
<div class="filled-no-icons">
<div class="rectangle-3"></div>
<div class="content">
<div class="label">Lorem ipsum dolor sit amet</div>
</div>
</div>
Add display:inline-block; to the parent element. By default, a div has display:block which occupies the whole width or line. Run code below, thanks.
.filled-no-icons {
border-width:0px;
position:relative;
padding:0px;
width:auto;
height:auto;
min-width:91px;
min-height:36px;
background-color:rgba(0,0,0,0);
display:inline-block;
}
.filled-no-icons .rectangle-3 {
border-width:1px;
position:absolute;
padding:0px;
width:100%;
height:100%;
min-width:91px;
min-height:36px;
border-radius:4px 4px 4px 4px ;
background-color:rgba(0,150.0,136.0,255);
left:0%;
top:0%;
}
.filled-no-icons .content {
border-width:0px;
position:absolute;
padding:0px;
width:calc(100% - 32px);
height:17px;
min-width:59px;
min-height:17px;
background-color:rgba(0,0,0,0);
left:16px;
top:calc(50% - 8.5px);
}
.filled-no-icons .content .label {
border-width:1px;
position:absolute;
padding:0px;
width:calc(100% - 0px);
height:17px;
min-width:59px;
min-height:17px;
color:rgba(255,255,255,255);
font-family:Roboto-Medium;
font-size:14px;
font-weight:500;
letter-spacing:0.75px;
line-height:16.40625px;
left:0px;
top:calc(50% - 8.5px);
}
<!DOCTYPE html>
<html>
<head>
<title>
Button test
</title>
<meta charset="UTF-8">
</head>
<body>
<div class="filled-no-icons">
<div class="rectangle-3"></div>
<div class="content">
<div class="label">Button</div>
</div>
</div>
</body>
</html>
Related
I am trying to add a min width to a div that uses a fixed position. I'm not sure if its possible my code below works fine if I remove the fixed positioning.
What I am trying to achieve is to protect the text in the red area (contains links) from being resized below certain 200px;
EDIT THIS IS THE FULL CODE
<!doctype html>
<html>
<head>
<style>
#header{
height:60px;
width:100%;
background-color:#000;
position:fixed;
top:0;
left:0;
}
#leftdiv{
width:15%;
height:200px;
background-color:#ED6062;
float:left;
position:fixed;
left:0;
top:60px;
min-width:100px;
}
#middlediv{
width:25%;
height:200px;
background-color:#F0E92B;
float:left;
position:fixed;
left:15%;
top:60px;
}
#rightdiv{
width:60%;
height:200px;
background-color:#26D978;
float:left;
position:fixed;
left:40%;
top:60px;
}
</style>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>
<div id='header'></div>
<div id='leftdiv'>Contains links</div>
<div id='middlediv'></div>
<div id='rightdiv'></div>
</body>
</html>
JSFiddle https://jsfiddle.net/85mpvxo7/
The min-width works as expected, your problem is that #middlediv has left: 15% and is on top of #leftdiv and #leftdiv is actually wider than you can see it behind #middlediv.
I'm not sure if it fullfills all your requirements, but check this, I'm using a div wrapper with grid display so the left grid item has a width with max-content. Then the other two divs need to use the rest of the space so I put them inside another div. https://jsfiddle.net/n3o679pf/
EDIT: It can be cleaner using just a flex on the wrapper https://jsfiddle.net/n3o679pf/2/ so no need for that ugly #therest div I put using a grid.
<div id='header'></div>
<div id='wrapper'>
<div id='leftdiv'>Contains links</div>
<div id='middlediv'></div>
<div id='rightdiv'></div>
</div>
and the CSS
#wrapper {
display: flex;
width: 100%;
position: fixed;
top:60px;
margin: 0;
}
#leftdiv{
height:200px;
background-color:#ED6062;
min-width:200px;
}
#middlediv{
width:35%;
height:200px;
background-color:#F0E92B;
}
#rightdiv{
width:65%;
height:200px;
background-color:#26D978;
}
Can anyone help me?
My code below is not working in responsive mode.
Parent container placement should be at the right side of the screen.
Here's my code
.parent {
position:relative;
width:250px;
border:1px solid red;
height:200px;
}
.child {
position:absolute;
width:100%;
left:-100px;
right:-100px;
border:1px solid blue;
}
<div class="parent">
<div class="child">
<p>Need width 100% by screen resolution</p>
</div>
</div>
Like so:
html,body{
margin:0; padding:0;
}
.main{
width:980px; background:darkGreen; margin:0 auto;
}
.rel{
width:400px; height:200px; background:#000; margin:0 auto; position:relative;
}
.abs{
width:550px; height:100px; background:yellow; position:absolute; left:-75px; top:50px;
}
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='en'>
<head>
<meta http-equiv='content-type' content='text/html;charset=utf-8' />
</head>
<body>
<div class='main'>
<div class='rel'><div class='abs'></div></div>
</div>
</body>
</html>
.child {
position:absolute;
width:150%;
border:1px solid blue;
}
You don't need to have left and right values when you have width, unless you want to specify the position.
A left:0; means that the leftmost part of the div is at the leftmost part of its parent div while a right:0; means that the rightmost part of the div is at the rightmost part of its parent div- this could act as a replacement for the width as
left:0;
right:0;
is similar to
left:0;
width:100%;
With this, you could specify a
left:0;
right:-10%;
and it would be equivalent to a
left:0;
width:110%;
P.S. you could also use VW and VH instead of %.
A 100% refers to the full size of the parent while a 100vw refers to the full width of the viewport.
remove position:relative from parent and in your code you forget one semi colon (;) after right property of your .child.it,s important to put a semi colon after every property in css.
html,body{
width:100%;
height:100%;
}
.parent {
/*position:relative;*/
width:250px;
border:1px solid red;
height:200px;
}
.child {
position:absolute;
width:100%;
left:-100px;
right:-100px;
border:1px solid blue;
}
<div class="parent">
<div class="child">
<p>Need width 100% by screen resolution</p>
</div>
</div>
The image shows what I want to accomplish:
Here is the code that I have:
http://jsfiddle.net/ZNtKj/202/
<div style="width: 200px" >
<div class="niveles-porcentaje">
<div class="alta" style="width: 40%"> <span class="porcentaje">40%</span></div>
</div>
And the style I am having trouble to fix:
div.niveles-porcentaje {
width:100%;
height:100%;
align-self:center;
text-align:center;
display:inline-table;
background-color:#D7D7D7;
}
div.alta {
display:inline-table; /*inside a table*/
line-height: 2em;
background-color: #06AC09;
height:100%;
float:left;
}
span.porcentaje{
text-align:center;
vertical-align:middle;
z-index:99;
}
The div will be inside a td.
You will have to make the text's parent full width. To do that, remove the back color and width definition from the .alta div, and create an inner absolute div to deal with the color fill, that won't interfeer with the text.
Also, remember to set the text span to display: block to be full width. Check here: http://jsfiddle.net/ZNtKj/209/
<div style="width: 200px" >
<div class="niveles-porcentaje">
<div class="alta">
<div class="fill" style="width: 40%"></div>
<span class="porcentaje">40%</span>
</div>
</div>
</div>
CSS:
div.niveles-porcentaje {
width:100%;
height:100%;
align-self:center;
text-align:center;
display:inline-table;
background-color:#D7D7D7;
}
div.alta {
display:inline-table; /*inside a table*/
line-height: 2em;
height:100%;
width: 100%;
position: relative;
}
div.alta .fill {
background-color: #06AC09;
height:100%;
position: absolute;
}
span.porcentaje{
text-align:center;
vertical-align:middle;
z-index:99;
position: relative;
display: block;
}
Here is the Fiddle with example. You can simply change the text div width to see the result.
div.niveles-porcentaje {
width:100%;
height:20px;
align-self:center;
text-align:center;
background-color:#D7D7D7;
position:relative;
}
div.alta {
line-height: 2em;
background-color: #06AC09;
height:20px;
float:left;
position:relative;
}
span.porcentaje{
position:absolute;
left:46%;
top:0;
}
Good day! I did some reasearch and I read here difference between css height : 100% vs height : auto
that height-auto should take the minimum amount of space depending on the children's width.
In my case, the property behaves like width 100%, taking 100% of it's parent's width
Here is the code:
<!DOCTYPE html>
<html>
<head>
<style>
.header2 {
float:left;
width:900px;
height:23px;
background:red;
}
.buttonHolder {
margin: 0 auto;
width:auto;
height:24px;
background:black;
}
.button {
width:50px;
height:24px;
background:blue;
float:left;
}
</style>
</head>
<body>
<div class="header2">
<div class="buttonHolder">
<div class="button"></div> <div class="button"></div> <div class="button"></div>
</div>
</div>
</body>
The question is: Where is my error?
.header2 {
float:left;
width:900px;
height:23px;
background:red;
text-align: center;
}
.buttonHolder {
display: inline-block;
height:24px;
background:black;
}
this should work.
Hello I am trying to vertical and horizontally align 4 divs inside each other with CSS but nothing is working for me.
Please help me! Thanks in advance
My CSS Please note this is just 1 method ive tried I have been sitting here for about 2 hours messing with this and couldnt figure it out.
* {
margin:0px;
padding:0px;
}
body {
background-color:#454545;
}
.wrapper {
margin:auto;
width:960px;
}
.circle-wrapper {
height:918px;
width:918px;
background-image:url(images/overlay.png);
background-size:cover;
background-position:center center;
background-repeat:no-repeat;
position:absolute;
text-align:center;
margin:auto;
}
.outer-inner-background {
background-image:url(images/center-circle.GIF);
background-size:cover;
background-position:center center;
background-repeat:no-repeat;
position:relative;
height:494px;
width:494px;
margin:auto;
}
.outer-inner-rings {
background-image:url(images/inner-outer-rings.PNG);
background-size:cover;
background-position:center center;
position:relative;
width:494px;
height:494px;
margin:auto;
}
.inner-image {
position:relative;
height:308px;
width:308px;
margin:auto;
}
My HTML: I don't care if the structure changes it just needs to work
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
<title>Untitled Document</title>
</head>
<body>
<div class="wrapper">
<div class="circle-wrapper">
<div class="outer-inner-background">
</div>
<div class="outer-inner-rings">
</div>
<div class="inner-image">
<img class="inner-img" src="images/inside-image.PNG" width="308px" height="308px">
</div>
</div>
</div>
</body>
</html>
here my try http://dabblet.com/gist/4013306
code:
css
div {overflow:hidden}
#first {
background:red;
width:400px;
height:400px;
border-radius:300px;}
#second {
background:grey;
height:95%;
width:95%;
border-radius:300px;
margin:2.5%}
#third {
background:green;
height:70%;
width:70%;
border-radius:200px;
margin:15%;}
#forth {
background:black;
height:95%;
width:95%;
border-radius:200px;
margin:2.5%;}
html
<div id="first">
<div id="second">
<div id="third">
<div id="forth"></div>
</div>
</div>
</div>
Try using position: relative; on the container, and position: absolute; on the circles with suitable left and top values to place them in the middle.
Well, you can use absolute positioning in your inner divs where left and top positions are always set to (Parent element width - child element width /2). Here's my code
html
<div id="red">
<div id="grey">
<div id="green">
<div id="black">
</div>
</div>
</div>
</div>
CSS
div
{
border-radius:100%;
}
#red
{
position:relative;
margin-left:auto;
margin-right:auto; /** centers #red on screen **/
background-color: #F00;
width:400px;
height:400px;
}
#grey
{
background-color:#CCC;
position:absolute;
top:20px;
left:20px;
width:360px; /** 400 - 360 = 40/2 = 20px for left and top **/
height:360px;
}
#green
{
background-color:#0E0;
position:absolute;
top:40px;
left:40px;
width:280px;
height:280px;
}
#black
{
background-color:#000;
position:absolute;
left:20px;
top:20px;
width:240px;
height:240px;
}
Here's the fiddle:
http://jsfiddle.net/brunovieira/pmN4z/
Fiddle with #red centered on screen:
http://jsfiddle.net/brunovieira/pmN4z/2/
Does it need to be 4 divs? try this:
http://jsfiddle.net/vSyWZ/2/
HTML
<div class="outer">
<div class="inner"><div>
</div>
CSS
div{position:relative; margin:0 auto;}
.outer{width: 350px; height: 350px; background-color: gray; border-radius: 100%; border:10px solid red; vertical-align: middle;}
.inner{width: 200px; height: 200px; background-color: black; border-radius: 100%; border:10px solid green; top:60px;}
I tested on Chrome and Firefox and works fine, IE doesn't have support for rounded corners but it is centered.