CODEWITHSUNDEEP
csshtml
user1953907
user1953907

Reputation: 323

Divs not showing specified height or width

I am trying to have 4 divs with different background colors in a container div so there is one in all four corners with a steelblue border cross in the middle. The problem is that I give the div elements width and height in my stylesheet, but they don't actually change the height of the div, only adding content does. Also, the 4 inner divs do not have the width I specified in the stlyesheet, but rather fit to the width of the parent div. Just fyi, in the feature class, I have switched the display attrubute to block and inline to see if that helps, but it doesn't. Here is my html code:

<!DOCTYPE HTML>
<html>
<head>
    <title>Divs In Div</title>
   <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <div class="container">
       <div class="feature a">&nbsp;</div>
    <div class="feature b">&nbsp;</div>
    <div class="feature c">&nbsp;</div>
    <div class="feature d">&nbsp;</div>
</div>

and here is my css code: 

.container {
width: 700px;
height: 700px;
border: 5px solid black;
margin: 0px;
padding: 0px;
display: inline-block;
}

.feauture {
width: 348px;
height: 348px;
padding: 0px;
margin: 0px;
display: inline-block;
text-align: center;
}

.a {
background-color: yellow;
border-bottom: 2px solid steelblue;
border-right: 2px solid steelblue;
}

.b {
background-color: red;
border-bottom: 2px solid steelblue;
border-left: 2px solid steelblue;
}

.c {
background-color: blue;
border-top: 2px solid steelblue;
border-right: 2px solid steelblue;
}

.d {
background-color: purple;
border-top: 2px solid steelblue;
border-left: 2px solid steelblue;
}

Upvotes: 0

Views: 2649

Answers (2)

Deryck
Deryck

Reputation: 7658

First, yes there's a typo, but that's not gonna solve the whole issue for you (although you haven't asked about the rest yet so this might just be unnecessary and if so, feel free to ignore).

HTML needs to be changed if you want to use inline-block for the .feature blocks. See why this is a problem here. If you're ok with using float:left; for them all instead then you don't have to do this.

Depending on whether you choose to use box-sizing for all the elements you have (like with a Normalize.css solution or just doing what I do in my fiddle), you'll need to possibly change the width and height to account for the border only on the container. See how, why and pros/cons here on box-sizing: border-box;.

Your CSS isn't terrible so the changes I made were mainly aesthetic but the main thing you gotta decide is display: inline-block; or float: left; inside of .feature { }.

FYI - using float: left; implies display: block;, not to mention <div> using it by default.

Using display: inline-block;

New HTML:

<div class="container"><div class="feature a">
    &nbsp;</div><div class="feature b">
    &nbsp;</div><div class="feature c">
    &nbsp;</div><div class="feature d">
    &nbsp;</div>
</div>

New CSS

*, *:before, *:after {
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
}
.container {
    width: 710px;
    height: 710px;
    border: 5px solid black;
    margin: 0px;
    padding: 0px;
}
.feature {
    width: 350px;
    height: 350px;
    padding: 0;
    margin: 0;
    display: inline-block;
    text-align: center;
}
.a {
    background-color: yellow;
    border-bottom: 2px solid steelblue;
    border-right: 2px solid steelblue;
}
.b {
    background-color: red;
    border-bottom: 2px solid steelblue;
    border-left: 2px solid steelblue;
}
.c {
    background-color: blue;
    border-top: 2px solid steelblue;
    border-right: 2px solid steelblue;
}
.d {
    background-color: purple;
    border-top: 2px solid steelblue;
    border-left: 2px solid steelblue;
}

Live Demo

Using float: left;

New HTML:

<div class="container">
    <div class="feature a"></div>
    <div class="feature b"></div>
    <div class="feature c"></div>
    <div class="feature d"></div>
</div>

New CSS:

*, *:before, *:after {
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
}
.container {
    width: 710px;
    height: 710px;
    border: 5px solid black;
    margin: 0px;
    padding: 0px;
}
.feature {
    width: 350px;
    height: 350px;
    padding: 0;
    margin: 0;
    float: left;
    text-align: center;
}
.a {
    background-color: yellow;
    border-bottom: 2px solid steelblue;
    border-right: 2px solid steelblue;
}
.b {
    background-color: red;
    border-bottom: 2px solid steelblue;
    border-left: 2px solid steelblue;
}
.c {
    background-color: blue;
    border-top: 2px solid steelblue;
    border-right: 2px solid steelblue;
}
.d {
    background-color: purple;
    border-top: 2px solid steelblue;
    border-left: 2px solid steelblue;
}

Live Demo

PS - your widths and heights are changed here for continuity but you can use whatever sizes you want that fit.

Upvotes: 2

EpicOkapi
EpicOkapi

Reputation: 66

.feauture {

Should be 

.feature {

Upvotes: 1

Related Questions