CODEWITHSUNDEEP
htmlcsssass
David Lettice
David Lettice

Reputation: 79

Stretching two divs across the page

I currently have the code in this fiddle:

HTML

    <div class="stats-box">
        <div class="stats-title">Stats</div>
        <div class="stats-group">
            <div class="stats-team red"><div class="stats-amount">367</div></div>
            <div class="stats-team yellow"><div class="stats-amount">412</div></div>
        </div>
    </div>

SCSS No fancy SCSS, just nesting and variables, so basically ordinary CSS :-)

$red:       #e74c3c;
$yellow:    #f1c40f;
$white:     #ecf0f1;
.stats-box {
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    font-weight: normal;
    color: white;
    background-color: $white;

    .stats-title {
        color: black;
        font-weight: 700;
        text-align: center;
    }

    .stats-group {
        padding: 10px 0px;

        .stats-team {
            display: inline-block;
            -webkit-border-radius: 4px;
            -moz-border-radius: 4px;
            border-radius: 4px;
            padding: 10px;
            width: 50%;

            .stats-amount {
                background: rgba(0,0,0,0.13);
                -webkit-border-radius: 4px;
                -moz-border-radius: 4px;
                border-radius: 4px;
                padding: 7px 0px 11px 0px;
                width: 100%;
                height: 16px;
                text-align: center;
                margin: 0 auto;
            }
        }
    }

}


.red {
    color: $white;
    background-color: $red;
}

.yellow {
    color: $white;
    background-color: $yellow;

}

What I want to do is make the red and yellow boxes take up exactly 50% of the screen, and sit beside each other. I also want them to retain their 10px padding, but I can't seem to do this. As soon as I go over 48% (this obviously depends on screen resolution and may differ for other people), the yellow box drops down.

I know the problem is this particular bit, but I can't work out how to get around it.

.stats-team {
    padding: 10px;
}

Am I being simple, or simply asking too much?

Upvotes: 0

Views: 190

Answers (4)

Rob Sedgwick
Rob Sedgwick

Reputation: 5226

Using flexbox aside ( as the best upcoming solution for layouts ) ...

I am fan of just straight separation between layout elements and content elements - works reliably, easy to maintain and keeps your grid as a grid and your content as content.

CSS

/* layout elements */
.row { clear:both; }
.row:after { clear:both; height:0; visibility:hidden; content:"." }
.col { float:left; width:50% }

/* content elements */

.content { margin:10px; padding:10px; 
    /* free to pad and position as you like */ }

HTML

<div class="row">
  <div class="col">
    <div class="content"> <p> text and free paddings here </p> </div>
  </div>
  <div class="col">
    <div class="content"> <p> More text and free paddings here </p> </div>
  </div>
</div>

Upvotes: 0

Harry
Harry

Reputation: 1699

Here's how it looks: http://codepen.io/anon/pen/KuJzs

box-sizing: border-box; is the key here

HTML:

<div class="stats-box">
    <div class="stats-title">Stats</div>
    <div class="stats-group">
        <div class="stats-team red"><div class="stats-amount">367</div></div>
        <div class="stats-team yellow"><div class="stats-amount">412</div></div>
    </div>
</div>

CSS:

.stats-box > div {
  width: 50%;
  float: left;
  padding: 25px;

  -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
box-sizing: border-box; 
}

Upvotes: 0

Novocaine
Novocaine

Reputation: 4786

If you add box-sizing: border-box; to the red and yellow div's you'll be able to set a width of 50% and add any amount of padding. You'll also need to add float: left; so that the elements are positioned next to each other;

.stats-team {
  box-sizing: border-box;
}

FIDDLE

Upvotes: 4

DreamTeK
DreamTeK

Reputation: 34217

You can achieve this is pure css:

HTML

<div class="left">LEFT DIV</div>
<div class="right">RIGHT DIV</div>

CSS

.left,
.right{
    float:left;
    height:100px;
    width:50%;
    padding:10px;
    box-sizing:border-box;
    -moz-box-sizing:border-box;
}
.left{
    background:#58c;
}
.right{
    background:#b00;
}

http://jsfiddle.net/T23Bf/

BOX-SIZING

content-box (Default value)

This is the behavior of width and height as specified by CSS2.1. The specified width and height (and min/max properties) apply to the width and height respectively of the content box of the element. The padding and border of the element are laid out and drawn outside the specified width and height.

border-box

Padding and Borders are included in specified width/height.

The specified width and height (and min/max properties) on this element determine the border box of the element. That is, any padding or border specified on the element is laid out and drawn inside this specified width and height. The content width and height are calculated by subtracting the border and padding widths of the respective sides from the specified 'width' and 'height' properties

Upvotes: 1

Related Questions