CODEWITHSUNDEEP
htmlcssgoogle-chrome
Hunter
Hunter

Reputation: 310

Three column layout doesn't work correctly in Google Chrome

Long ago I followed a tutorial to create a 3-column layout for my website; it used to work correctly in every browser, but now using Chrome it adds a margin on resulting in a blank space before any other element on the page.

This is a snippet of CSS and html code:

*{margin:0; padding:0;}

body {
  font-family: "Gill Sans Mt", Arial, Helvetica;
  text-align:center;	
}

img { border: none }

body, html, #wrapper {
  width:100%;
  height:100%;
  position:relative;
}

#wrapper {display: table;}

#left {
  position:absolute;
  left:0;
  top:0;
  width:125px;
  height:100%;
  background-image:url(https://awranking.altervista.org/images/tile_sx1.jpg);
  background-repeat:repeat-y;
  z-index:-1;
  display: table-cell;
}

#right {
  position:absolute;
  right:0;
  top:0;
  width:125px;
  height:100%;	
  background-image:url(https://awranking.altervista.org/images/tile_dx1.jpg);
  background-repeat:repeat-y;
  z-index:-1;
  display: table-cell;
}

#middle {
  display: table-cell;
  height:100%;
  margin-bottom:30px;
  padding-bottom:30px;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Test Page</title>
    <link href="test.css" rel="stylesheet" type="text/css" />
  </head>

  <body>

  <div id="wrapper">
    <div id="left"></div>

    <div id="middle"> 
    In girum imus nocte ecce et consumimur igni
    </div> 

    <div id="right"></div>
  </div> 

  </body>
</html>

And this is the test page I created, if you want to try it on your browsers: Test Page

Upvotes: 0

Views: 323

Answers (2)

Piyush Teraiya
Piyush Teraiya

Reputation: 747

You can use this code -- Using 3-column layout, with bootstrap Design Responsive

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <title>Hello, world!</title>
    <link href="test.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }
        body {
            font-family: "Gill Sans Mt", Arial, Helvetica;
            text-align: center;
        }
        img {
            border: none
        }
        .left {
            width: 100%;
            background-image: url(https://awranking.altervista.org/images/tile_sx1.jpg);
            background-repeat: no-repeat;
            background-size: cover;
            margin: 0;
            padding: 25px;
            color: #ffffff;

        }
        .right {
            width: 100%;
            background-image: url(https://awranking.altervista.org/images/tile_sx1.jpg);
            background-repeat: no-repeat;
            background-size: cover;
            margin: 0;
            padding: 25px;
            color: #ffffff;

        }
        .middle {
            width: 100%;
            background-image: url(https://awranking.altervista.org/images/tile_sx1.jpg);
            background-repeat: no-repeat;
            background-size: cover;
            margin: 0;
            padding: 25px;
            color: #ffffff;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-12 col-md-4 col-sm-4 col-xs-12">
                <p class="left">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tristique ligula eu tellus consectetur, vel imperdiet leo pharetra.</p>
            </div>
            <div class="col-12 col-md-4 col-sm-4 col-xs-12">
                <p class="middle">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tristique ligula eu tellus consectetur, vel imperdiet leo pharetra.</p>
            </div>
            <div class="col-12 col-md-4 col-sm-4 col-xs-12">
                <p class="right">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tristique ligula eu tellus consectetur, vel imperdiet leo pharetra.</p>
            </div>
        </div>
    </div>
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>

Upvotes: 0

robinvrd
robinvrd

Reputation: 1848

Using position: absolute should really not use to build your main layout, it should be used mainly to position things precisely in your page like modal or dialog box.

You should use display: inline-block or CSS Grid or CSS Flexbox.

With CSS Grid, if you want to set up a 3-column layout, you can just use display: grid on your parent container and grid-template-columns: 1fr 1fr 1fr that create 3 columns instantly.

#container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

#column-1 {
  background-color: red;
}
#column-2 {
  background-color: blue;
}
#column-3 {
  background-color: yellow;
}
<div id="container">
  <div id="column-1">A</div>
  <div id="column-2">B</div>
  <div id="column-3">C</div>
</div>

Upvotes: 1

Related Questions