What is the functionality of CSS left/position in relation to a Bootstrap header?

Question

What is the functionality of CSS left/position in relation to a Bootstrap header?

I'm struggling to figure out why the CSS left property is not working as expected.

Within my HTML, I have a page-header element from Bootstrap:

<div class="page-header">
  <h1>Page-header</h1>
</div>

<div class="all charts">
   <div id="chart1"></div>
   <div id="chart2"></div>
</div>

And here is the relevant part of my CSS:

.page-header {
  background-color: none;
  width: 1000%;
}

.allcharts {
  left: 20px;
}

#chart1 {
  width: 2000%;
  float: left;
}

I'm puzzled because my "all charts" div (which should be positioned 20px from the left) and chart 1 and 2 all seem to be ignoring the left position specified in the CSS. Even when trying to override this in the stylesheet, they still align with the page-header element. Can anyone explain why this might be happening?

html css twitter-bootstrap

Answer 1

Answer №1

position : absolute; :: This rule dictates that the element will be positioned relative to its first ancestor element that is not in a static position.

Furthermore, you have two distinct classes for all and charts.

.all.charts {
  position : absolute;
  left: 20px;
}

OR

.all{
  position : absolute;
  left: 20px;
}

OR

.charts {
  position : absolute;
  left: 20px;
}

Answer 2

position : absolute; :: This rule dictates that the element will be positioned relative to its first ancestor element that is not in a static position.

Furthermore, you have two distinct classes for all and charts.

.all.charts {
  position : absolute;
  left: 20px;
}

OR

.all{
  position : absolute;
  left: 20px;
}

OR

.charts {
  position : absolute;
  left: 20px;
}

Answer 3

Answer №2

I'm not certain if I am able to respond to my own inquiry, but Christina provided me with precisely what I needed

.page-header {
  background-color: none;
  width: 1000%;
}

.allcharts {
  position : absolute;
  left: 20px;
}

#chart1 {
  width: 2000%;
  float: left;
}

Answer 4

I'm not certain if I am able to respond to my own inquiry, but Christina provided me with precisely what I needed

.page-header {
  background-color: none;
  width: 1000%;
}

.allcharts {
  position : absolute;
  left: 20px;
}

#chart1 {
  width: 2000%;
  float: left;
}

What is the functionality of CSS left/position in relation to a Bootstrap header?

Answer №1

Answer №2

Similar questions

Is it possible to place a div element from an aspx page into the div of an html page?

Should we still be using <input type="date" /> in 2021?

Issues arise when trying to utilize JSP and JavaScript in conjunction

upon reaching the conclusion of the animation without employing the .animate() method

JSDOM failing to retrieve complete list of elements from webpage

The standard jQuery Mobile CSS styling does not seem to be working across various browsers, extensive testing has been conducted

Creating an Android app using PHP, HTML, and Javascript: A step-by-step guide

Modifying the title of a menu in jQuery mmenu

Creating a perpetual loop animation for two divs moving from right to left endlessly

I would like to mention a website without inserting a direct hyperlink, for example, in the Safari browser

My website's links are fully functional with Mozilla Firefox, providing a seamless browsing experience for users

Increasing an ID number automatically using Javascript

A webpage layout featuring an HTML table enhanced with JavaScript functionality

Dealing with local URL issues in Windows 10 UWP Webview

What is causing col-xs-0 to occupy the entire width of the row?

Why is Bootstrap taking precedence over my CSS body styles?

Uncovering intricate CSS selector techniques

Using icons from Bootstrap on your local machine can be a valuable asset for

Is there a way to automatically execute a Greasemonkey script when the page is updated using ajax?

Tips for accessing jQuery UI tab elements and adjusting visibility for specific panels