html – Divs aren't displaying side by side-ThrowExceptions

Exception or error:

I was referencing this stackOverflow post, and it only works if I put the css code directly into the html file.

If I try to link to my css, it only shows the first div. I’m not sure what the difference is.

#googleMap {
  float: left;
  width: calc(100% - 302px);
  height: 400px;
}

#imageDiv {
  width: 300px;
  height: 400px;
  float: right;
  border: 1px solid black;
}
<div>
  <div id="googleMap"></div>
  <div id="imageDiv"></div>
</div>

Thank you.

How to solve:

I made this html and css for you.

.sectionBX { width:100%; position:relative;}
.group-row { width:100%; position:relative; float:left; margin:0px}
.column-50 { width:50%; position:relative; float:left; padding:0px;}
#googleMap { float: left; width: 100%; height: 400px;background-color:#ccc}
#imageDiv { width: 100%; height: 400px; float: left; background-color:#dfdfdf }
<div class="sectionBX">
  <div class="group-row">
    <div class="column-50">
      <div id="googleMap"></div>
    </div>
    <div class="column-50">
      <div id="imageDiv"></div>
    </div>
  </div>
</div>

###

you can check your linked css-es, for example your case is like this:

you have for example 2 linked css, lets say a.css and b.css

<link rel="stylesheet" href="a.css"/>
<link rel="stylesheet" href="b.css"/>

then you put your css inline in the code and become something like this:

<link rel="stylesheet" href="a.css"/>
<link rel="stylesheet" href="b.css"/>
....
<style>
/* your css */
</style>

clearly, your inline css is the last rules applied

but then you decide you want to link it, so you put your css in a.css, therefore, something in b.css might override your css

###

Try this approach instead. (I’ve been using this for years)

CSS:

.column {
  display: inline-block;
}
.row:after {
  display: table;
  clear: both;
}

HTML:

<div class="row">
  <div class="column">a</div>
  <div class="column">b</div>
</div>

You can look it here.

The thing is, using float just to set it side by side is not a good practice. It might bite you in the future

Leave a Reply

Your email address will not be published. Required fields are marked *