CODEWITHSUNDEEP
htmlcss
user3075987
user3075987

Reputation: 881

How do I control the width and height of my HTML banner?

I want to have my HTML banner width to be 915px. I have 915px in the .box-row, but the HTML banner size is 938px for some reason.

Also, how do I control the height of the HTML banner?

Jsfiddle: http://jsfiddle.net/tKn9f/5/

<div class="box-row">
<div class="box-form-body">
        <h3>
            See What You&#39;re Missing</h3>
</div>
<div class="box-form-button">
    <img alt="Learn More" height="100" src="http://www.robindelillo.fr/img/home/seeMoreButton.png" width="100" />
</div>


.box-row {
width:915px;
padding:10px;
border:1px solid #e2e3e4;
margin-top:50px;
overflow: hidden;
background-color:#f66511;

}

.box-row h3 {
    font-family:SegoeBold, Helvetica, Arial;
    font-size:1.3em;
    font-weight:normal;
    color:#fff;
    margin: 0;
}
.box-form-body {
    display: inline-block;
    vertical-align: middle;
    width: 75%;
    padding: 0 0 0 2em;
}
.box-form-button {
    display: inline-block;
    vertical-align: middle;
    width: 15%;
    padding: 0 0 0 2em;
}
.box-form-button img {
    vertical-align: bottom;
}

Upvotes: 1

Views: 3247

Answers (4)

Binita Lama
Binita Lama

Reputation: 1278

Update your following class.

.box-row {
width:895px;
padding:10px;
border:1px solid #e2e3e4;
margin-top:50px;
overflow: hidden;
background-color:#f66511;
height:300px;
}

You can add height value to specify the height of the banner you need, minus the padding top and bottom value.

Upvotes: 2

DhruvJoshi
DhruvJoshi

Reputation: 17126

if you do an inspect element you'll see that padding on left and right is set to 10 px each and also the border on left and right is set to 1 px. Total adds up to 937px.

Either you can you can remove the border and padding on the banner like so 

.box-row {
width:915px;
/*  padding:10px;
    border:1px solid #e2e3e4;*/
margin-top:50px;
overflow: hidden;
background-color:#f66511;
}

or reduce the width to make it count to 915

.box-row {
width:893px;
padding:10px;
border:1px solid #e2e3e4;
margin-top:50px;
overflow: hidden;
background-color:#f66511;
}

See screenshot from chrome dev tools here

enter image description here

Upvotes: 0

G-Cyrillus
G-Cyrillus

Reputation: 105903

borders widths and padding are added to width or height unless you change the box-model : http://www.w3.org/TR/css3-ui/#box-sizing0

Upvotes: 0

Damon
Damon

Reputation: 4514

Make your width be 895px. Since you have 10px padding on each side, that's giving you an extra 20px width. 895+20 = 915

.box-row {
    width:895px;
    padding:10px;
    border:1px solid #e2e3e4;
    margin-top:50px;
    overflow: hidden;
    background-color:#f66511;
}

Upvotes: 1

Related Questions