CODEWITHSUNDEEP
javascripthtmlcssprogress
Munch
Munch

Reputation: 779

Position bar left within center tag

Within my index.html, I have created the following div, which is located within the center tag. 

<div class="container">
    <div class="bar">
    <span class="bar-fill"></span>
    </div>
</div>

This looks like this on the page: [Progress Bar Image]1

I would like the blue bar, to be positioned to the left of this container.

Below is my CSS:

/* Progress Bar */
.container {
width: 400px;
}

.bar {
width: 100%;
background: #eee;
padding: 3px;
border-radius: 3px;
box-shadow: inset 0px 1px 3px rgba(0,0,0,.2);
}

.bar-fill {
height: 20px;
display: block;
background: cornflowerblue;
width: 80%;
border-radius: 3px;
}

Once again, I would like the blue bar (div labelled bar or bar fill) to be positioned to the left inside the container.

Thanks.

Upvotes: 2

Views: 65

Answers (2)

Paulie_D
Paulie_D

Reputation: 115278

The element is already left based on the code provided.

There is no center tag in your HTML and, in any event, the tag has been deprecated and should no longer be used.

.container {
  width: 400px;
  margin:auto; /* center the container */
}
.bar {
  width: 100%;
  background: #eee;
  padding: 3px;
  border-radius: 3px;
  box-shadow: inset 0px 1px 3px rgba(0, 0, 0, .2);
}
.bar-fill {
  height: 20px;
  display: block;
  background: cornflowerblue;
  width: 80%;
  border-radius: 3px;
}
<div class="container">
  <div class="bar">
    <span class="bar-fill"></span>
  </div>
</div>

If the container div is inside a <center> tag which cannot be removed then setting the text-align of the tag to left should have the desired effect.

JSFiddle Demo

Upvotes: 0

Zahlex
Zahlex

Reputation: 648

Simply add margin-left: 0px; to .bar-fill

.container {
  width: 400px;
}
.bar {
  width: 100%;
  background: #eee;
  padding: 3px;
  border-radius: 3px;
  box-shadow: inset 0px 1px 3px rgba(0, 0, 0, .2);
}
.bar-fill {
  height: 20px;
  display: block;
  margin-left: 0px;
  background: cornflowerblue;
  width: 80%;
  border-radius: 3px;
}
<div class="container">
  <div class="bar">
    <span class="bar-fill"></span>
  </div>
</div>

Upvotes: 1

Related Questions