CODEWITHSUNDEEP
htmlcssbootstrap-4
Zak
Zak

Reputation: 7515

Bootstrap strange problem with column width / div positioning

I am having a really difficult time trying to figure out why this is happening before I move further along in my development process of this page.

I have a very basic setup:

  1. Fixed Footer
  2. Fixed Header
  3. A col-lg-3 nav bar
  4. A col-lg-9 content box

The problem I am having is the div widths inside the nav col-lg-3 are not taking up the full width of the parent div. They appear to want to sit next to each other., even though I haven't declared a float -- and I have even tried clear:both between them. The div with ID of projects is supposed to be below the div with ID problem-div What am I doing wrong, or not understanding in order for this to happen?

NOTE The reason I am assuming this is a Bootstrap issue, is because if I remove the links to the CDN, the html / css functions as expected.

html,
body {
  font-family: 'Montserrat', sans-serif;
  margin: 0;
  padding: 0;
  height: 100%;
}

.main-wrapper {
  height: 100%;
  width: 100%;
  background-color: #DDD;
}

#header {
  position: fixed;
  height: 70px;
  top: 0;
  left: 0;
  width: 100%;
  background-color: #FFF;
  display: flex;
  color: #ED6F2B;
  text-align: center;
}

#footer {
  position: fixed;
  height: 70px;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: #FFF;
}

#info-column {
  float: left;
  display: flex;
  background-color: #CCC;
  margin-top: 70px;
  overflow-x: hidden;
  overflow-y: scroll;
  height: calc(100% - 140px);
}

#map-column {
  float: left;
  display: flex;
  background-color: #93E7ED;
  margin-top: 70px;
  overflow: hidden;
  height: calc(100% - 140px);
}
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div id="header">
  HEADER
</div>

<div class="main-wrapper">

  <div id="info-column" class="col-lg-3">
    <div id="problem-div" class="text-center">
      <div>
        <a href="//example.com"><img style="width:45%" alt="" src="logo.png"></a>
      </div>
      <div>
        <h2>THIS PERSON'S COMPANY AND SERVICES</h2>
      </div>
      <div>(555) 555-5555</div>
      <div>[email protected]</div>
      <div><a href="//example.com">thispersonscompanyandservices.com</a></div>
    </div>
    <div id="projects">
       PROJECTS
    </div>
  </div>
  <div id="map-column" class="col-lg-9">
    MAP CONTENT
  </div>
</div>

<div id="footer">
  FOOTER
</div>

Upvotes: 1

Views: 154

Answers (1)

Temani Afif
Temani Afif

Reputation: 272817

This is not bootstrap related. If you remove it you will get the same issue:

html,
body {
  font-family: 'Montserrat', sans-serif;
  margin: 0;
  padding: 0;
  height: 100%;
}

.main-wrapper {
  height: 100%;
  width: 100%;
  background-color: #DDD;
}

#header {
  position: fixed;
  height: 70px;
  top: 0;
  left: 0;
  width: 100%;
  background-color: #FFF;
  display: flex;
  color: #ED6F2B;
  text-align: center;
}

#footer {
  position: fixed;
  height: 70px;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: #FFF;
}

#info-column {
  float: left;
  display: flex;
  background-color: #CCC;
  margin-top: 70px;
  overflow-x: hidden;
  overflow-y: scroll;
  height: calc(100% - 140px);
}

#map-column {
  float: left;
  display: flex;
  background-color: #93E7ED;
  margin-top: 70px;
  overflow: hidden;
  height: calc(100% - 140px);
}
<div id="header">
  HEADER
</div>

<div class="main-wrapper">

  <div id="info-column" class="col-lg-3">
    <div id="problem-div" class="text-center">
      <div>
        <a href="//example.com"><img style="width:45%" alt="" src="logo.png"></a>
      </div>
      <div>
        <h2>THIS PERSON'S COMPANY AND SERVICES</h2>
      </div>
      <div>(555) 555-5555</div>
      <div>[email protected]</div>
      <div><a href="//example.com">thispersonscompanyandservices.com</a></div>
    </div>
    <div id="projects">
       PROJECTS
    </div>
  </div>
  <div id="map-column" class="col-lg-9">
    MAP CONTENT
  </div>
</div>

<div id="footer">
  FOOTER
</div>

And this is due to the use of display:flex within #info-column. The default direction is row making both child divs next to each other. Switch to a column direction or simply remove display:flex

html,
body {
  font-family: 'Montserrat', sans-serif;
  margin: 0;
  padding: 0;
  height: 100%;
}

.main-wrapper {
  height: 100%;
  width: 100%;
  background-color: #DDD;
}

#header {
  position: fixed;
  height: 70px;
  top: 0;
  left: 0;
  width: 100%;
  background-color: #FFF;
  display: flex;
  color: #ED6F2B;
  text-align: center;
}

#footer {
  position: fixed;
  height: 70px;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: #FFF;
}

#info-column {
  float: left;
  display: flex;
  flex-direction:column;
  background-color: #CCC;
  margin-top: 70px;
  overflow-x: hidden;
  overflow-y: scroll;
  height: calc(100% - 140px);
}

#map-column {
  float: left;
  display: flex;
  background-color: #93E7ED;
  margin-top: 70px;
  overflow: hidden;
  height: calc(100% - 140px);
}
<div id="header">
  HEADER
</div>

<div class="main-wrapper">

  <div id="info-column" class="col-lg-3">
    <div id="problem-div" class="text-center">
      <div>
        <a href="//example.com"><img style="width:45%" alt="" src="logo.png"></a>
      </div>
      <div>
        <h2>THIS PERSON'S COMPANY AND SERVICES</h2>
      </div>
      <div>(555) 555-5555</div>
      <div>[email protected]</div>
      <div><a href="//example.com">thispersonscompanyandservices.com</a></div>
    </div>
    <div id="projects">
       PROJECTS
    </div>
  </div>
  <div id="map-column" class="col-lg-9">
    MAP CONTENT
  </div>
</div>

<div id="footer">
  FOOTER
</div>

Upvotes: 1

Related Questions