javascript - how to make div take full width of parent div

How do I get the color div to take up the full width of the parent div .starter so that the entire width is one color? I've tried everything and haven't made progress. I've isolated the problem for ease of containment. Thanks in advance!

<!DOCTYPE html>
<html>
    <head>      
        <title>Pricing</title>
        <link href="styles2.css" rel="stylesheet" />
    </head>
    <body>
        </div>
            <ul id="plans">
                <li>
                    <div id='starter' class="col-4 col-m-12">
                        <h1>Starter</h1>
                        <div class="color"><h3 id="test">1 Hour</h3></div>
                        <p>$25</p>
                    </div>
                </li>
            </ul>
    </body>
</html>

CSS

* {
    box-sizing: border-box;

}
.row::after {
    content: "";
    clear: both;
    display: block;
}
[class*="col-"] {
    float: left;
    padding: 15px;
} 
/* For mobile phones: */
[class*="col-"] {
    width: 100%;
}
@media only screen and (min-width: 600px) {
    /* For tablets: */
    .col-m-1 {width: 8.33%;}
    .col-m-2 {width: 16.66%;}
    .col-m-3 {width: 25%;}
    .col-m-4 {width: 33.33%;}
    .col-m-5 {width: 41.66%;}
    .col-m-6 {width: 50%;}
    .col-m-7 {width: 58.33%;}
    .col-m-8 {width: 66.66%;}
    .col-m-9 {width: 75%;}
    .col-m-10 {width: 83.33%;}
    .col-m-11 {width: 91.66%;}
    .col-m-12 {width: 100%;}
}
@media only screen and (min-width: 768px) {
    /* For desktop: */
    .col-1 {width: 8.33%;}
    .col-2 {width: 16.66%;}
    .col-3 {width: 25%;}
    .col-4 {width: 33.33%;}
    .col-5 {width: 41.66%;}
    .col-6 {width: 50%;}
    .col-7 {width: 58.33%;}
    .col-8 {width: 66.66%;}
    .col-9 {width: 75%;}
    .col-10 {width: 83.33%;}
    .col-11 {width: 91.66%;}
    .col-12 {width: 100%;}
}
#header{
    padding:15px;
    background-color:rgb(157,221,220);
    margin-bottom:7px;
}

body{
    background-color:white;
    color:rgb(164,111,67);}
a{
    text-decoration:none;
    color:rgb(164,111,67);
}
#info{
    padding:0;
    text-align: center;
}
#pricing{

    padding:30px;
}
#starter, #basic, #deluxe{
    background-color:lightgray;
    text-align: center;
    border:5px solid white;
}
ul{
    margin:0;
    padding:0;
}
li{
    list-style:none;
}
#test{
    background-color:white;
    width:100%;
}

#color{
    margin:0;
    background-color:white;
}
html, body{}

I want it to look like this

<!DOCTYPE html>
<html>
    <head>      
        <title>Pricing</title>
        <link href="styles2.css" rel="stylesheet" />
    </head>
    <body>
        </div>
            <ul id="plans">
                <li>
                    <div id='starter' class="col-4 col-m-12">
                        <h1>Starter</h1>
                        <div class="color"><h3 id="test">1 Hour</h3></div>
                        <p>$25</p>
                    </div>
                </li>
            </ul>
    </body>
</html>

CSS

* {
    box-sizing: border-box;

}
.row::after {
    content: "";
    clear: both;
    display: block;
}
[class*="col-"] {
    float: left;
    padding: 15px;
} 
/* For mobile phones: */
[class*="col-"] {
    width: 100%;
}
@media only screen and (min-width: 600px) {
    /* For tablets: */
    .col-m-1 {width: 8.33%;}
    .col-m-2 {width: 16.66%;}
    .col-m-3 {width: 25%;}
    .col-m-4 {width: 33.33%;}
    .col-m-5 {width: 41.66%;}
    .col-m-6 {width: 50%;}
    .col-m-7 {width: 58.33%;}
    .col-m-8 {width: 66.66%;}
    .col-m-9 {width: 75%;}
    .col-m-10 {width: 83.33%;}
    .col-m-11 {width: 91.66%;}
    .col-m-12 {width: 100%;}
}
@media only screen and (min-width: 768px) {
    /* For desktop: */
    .col-1 {width: 8.33%;}
    .col-2 {width: 16.66%;}
    .col-3 {width: 25%;}
    .col-4 {width: 33.33%;}
    .col-5 {width: 41.66%;}
    .col-6 {width: 50%;}
    .col-7 {width: 58.33%;}
    .col-8 {width: 66.66%;}
    .col-9 {width: 75%;}
    .col-10 {width: 83.33%;}
    .col-11 {width: 91.66%;}
    .col-12 {width: 100%;}
}
#header{
    padding:15px;
    background-color:rgb(157,221,220);
    margin-bottom:7px;
}

body{
    background-color:white;
    color:rgb(164,111,67);}
a{
    text-decoration:none;
    color:rgb(164,111,67);
}
#info{
    padding:0;
    text-align: center;
}
#pricing{

    padding:30px;
}
#starter, #basic, #deluxe{
    background-color:lightgray;
    text-align: center;
    border:5px solid white;
}
ul{
    margin:0;
    padding:0;
}
li{
    list-style:none;
}
#test{
    background-color:white;
    width:100%;
}

#color{
    margin:0;
    background-color:white;
}
html, body{}

I want it to look like this

Share Improve this question edited Nov 16, 2016 at 23:54 Johannes 67.8k22 gold badges84 silver badges139 bronze badges asked Nov 16, 2016 at 23:46 fungusanthrax 1902 silver badges13 bronze badges

Could you please create a jsfiddle of this? Would be easier to see what you have. Also in your css you have #color{...} but color is a class not id, so it should be .color{...} – AndrewB Commented Nov 16, 2016 at 23:50
U need to remove the padding on [class*="col-"] – user2242618 Commented Nov 16, 2016 at 23:52

Add a ment |

5 Answers 5

Sorted by: Reset to default 2

You're getting messed up by the padding on the parent. Change it to:

[class*="col-"] {
  float: left;
  padding: 0;;
}

* {
    box-sizing: border-box;

}
.row::after {
    content: "";
    clear: both;
    display: block;
}
[class*="col-"] {
    float: left;
    padding: 0;
} 
/* For mobile phones: */
[class*="col-"] {
    width: 100%;
}
@media only screen and (min-width: 600px) {
    /* For tablets: */
    .col-m-1 {width: 8.33%;}
    .col-m-2 {width: 16.66%;}
    .col-m-3 {width: 25%;}
    .col-m-4 {width: 33.33%;}
    .col-m-5 {width: 41.66%;}
    .col-m-6 {width: 50%;}
    .col-m-7 {width: 58.33%;}
    .col-m-8 {width: 66.66%;}
    .col-m-9 {width: 75%;}
    .col-m-10 {width: 83.33%;}
    .col-m-11 {width: 91.66%;}
    .col-m-12 {width: 100%;}
}
@media only screen and (min-width: 768px) {
    /* For desktop: */
    .col-1 {width: 8.33%;}
    .col-2 {width: 16.66%;}
    .col-3 {width: 25%;}
    .col-4 {width: 33.33%;}
    .col-5 {width: 41.66%;}
    .col-6 {width: 50%;}
    .col-7 {width: 58.33%;}
    .col-8 {width: 66.66%;}
    .col-9 {width: 75%;}
    .col-10 {width: 83.33%;}
    .col-11 {width: 91.66%;}
    .col-12 {width: 100%;}
}
#header{
    padding:15px;
    background-color:rgb(157,221,220);
    margin-bottom:7px;
}

body{
    background-color:white;
    color:rgb(164,111,67);}
a{
    text-decoration:none;
    color:rgb(164,111,67);
}
#info{
    padding:0;
    text-align: center;
}
#pricing{

    padding:30px;
}
#starter, #basic, #deluxe{
    background-color:lightgray;
    text-align: center;
    border:5px solid white;
}
ul{
    margin:0;
    padding:0;
}
li{
    list-style:none;
}
#test{
    background-color:white;
    width:100%;
}

#color{
    margin:0;
    background-color:white;
}
html, body{}

<!DOCTYPE html>
<html>
    <head>      
        <title>Pricing</title>
        <link href="styles2.css" rel="stylesheet" />
    </head>
    <body>
        </div>
            <ul id="plans">
                <li>
                    <div id='starter' class="col-4 col-m-12">
                        <h1>Starter</h1>
                        <div class="color"><h3 id="test">1 Hour</h3></div>
                        <p>$25</p>
                    </div>
                </li>
            </ul>
    </body>
</html>

You can an extra CSS property to the parent div:

#starter.col-4.col-m-12 {
  padding:0px;
}

JSFiddle

Add this:

#starter {
  padding-left: 0;
  padding-right: 0;
}

http://codepen.io/anon/pen/XNjwYB

Since the child div is a child of the parent div, then you can set its width to 100%, which will set it to 100% of the parent width. If you know the width of the parent, then you can just set its width to the same value.

#parent {
  height: 300px;
  background-color: gray;
}
#child {
  width: 100%;
  height: 20px;
  background-color: white;
  position: absolute;
  top: 200px;
}

<div id="parent">
  <div id="child">
    hello world
  </div>
</div>

You can try to add an id to the div that is containing the "1 hour" and add margins to that

   margin-right:25px;
   margin-left:25px;

check it out: http://codepen.io/anon/pen/LbRoXK

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - how to make div take full width of parent div - Stack Overflow

5 Answers 5

与本文相关的文章

评论列表(0)