All geek questions in one place

How to use div for layout page

I am using a div to layout the page. The page has two columns. The first column is a map. The second column contains three rows of graphs. I used the code below. The result gives me only one column (instead of two) with four rows. What am I doing wrong?

<!-- This is where the map will live --> <div id="map-container" style="width:1000px; height:500px"></div> <!-- CHARTS!!! --> <div class="row"> <!-- row chart --> <div class="col-md-1"> <div id="rowchart2" class="dc-chart"></div> <center><div class="title">Severity</div></center> </div> <!-- Histogram--> <div class="col-md-2 col-md-offset-1"> <div id="rowchart" class="dc-chart"></div> <center><div class="title">Histogram(Delta Speed)</div></center> </div> <!-- row chart --> <div class="col-md-4 col-md-offset-0"> <div id="rowchart3" class="dc-chart"></div> <center><div class="title">Direction</div></center> </div> </div>
+6
source share
3 answers
 <div class="row"> <div class="col-md-12"> <div class="col-md-6"> Column 1: <div id="map-container" class="col-md-12" style="width:100%; height:500px"></div> </div> <div class="col-md-6"> OTHER DATA HERE </div> </div> </div>
+1
source

Assuming you are using Bootstrap here, you need to put two columns on the same row so that they sit side by side. For example, if you want to have two columns with the same width, you can use:

 <div class="row"> <div class="col-md-6"> <!-- Map Here --> </div> <div class=col-md-6"> <div>Chart 1</div> <div>Chart 2</div> <div>Chart 3</div> </div> </div>

There are always 12 columns in a row, so using col-md-6 for each column results in two columns of the same size.

Inside the second column, you can nest more rows and columns to give you more control:

 <div class="row"> <div class="col-md-6"> <!-- Map Here --> </div> <div class=col-md-6"> <div class="row"> <div class="col-md-12">Big Chart 1</div> </div> <div class="row"> <div class="col-md-6">Small Chart 2</div> <div class="col-md-6">Small Chart 3</div> </div> </div> </div>

For a sample layout, here's the JSFiddle: http://jsfiddle.net/q3vdex96/2/

In your example, you are installing a map with a width of 1000 pixels. You should not set the explicit width this way - let Bootstrap handle the size using its grid. Bootstrap responsive CSS means that your charts and map will collapse into a single column on a small screen and will automatically expand to the correct layout as the screen size increases.

+1
source

You are not showing your CSS, so part of what I say is just a wild hunch.

Firstly, the central element is outdated. Do not use this.

Secondly, div elements are block levels and by default expand the entire width of the page. That's why you get only one column, but, as I said, without a link or jsfiddle with full markup, all this is guessed.

0
source

Source: https://habr.com/ru/post/979629/

More articles:


All Articles