CODEWITHSUNDEEP
htmlcss
Harwee
Harwee

Reputation: 1650

Child div causes parent div to occupy whole page width

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/

Upvotes: 0

Views: 251

Answers (2)

Stickers
Stickers

Reputation: 78676

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>

Upvotes: 1

Jerdine Sabio
Jerdine Sabio

Reputation: 6130

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>

Upvotes: 0

Related Questions