user6004404 user6004404 - 2 months ago 9
CSS Question

div stretching to specified width

Im trying to create a 2 page column, but my divs don't stretch to the width I specify and I don't get why. I have linked the jsfiddle for my code.

code here:



.container{
width: 960px;
background-color: grey;
margin: 0px auto 0px auto;
}

.column1{
background-color: red;
display: inline;
width: 480px;
}

.column2{
width: 480px;
background-color: yellow;
display: inline;

}

<body>
<div class="container">
<div class="column1">a</div>
<div class="column2">b</div>
</div>
</body>




Answer

I'm assuming you're trying to create 2 <div> elements that are placed on the left and right side of the page? If os, this should solve your problem;

.container{
  width: 960px;
  background-color: grey;
  margin: 0px auto 0px auto;
}

.column1{
  width: 50%;
  background-color: red;
  float: left;
}

.column2{
  width: 50%;
  background-color: yellow;
  float: left;
}
<body>
  <div class="container">
    <div class="column1">a</div>
    <div class="column2">b</div> 
  </div>
</body>