HTML Element Style How to - Create Horizontal divs with paragraph








Question

We would like to know how to create Horizontal divs with paragraph.

Answer


<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
#banner {<!--   w  ww.j a  v a 2  s  . co  m-->
  width: 900px;
  height: 75px;
  background-color: Red;
  color: White;
  font-size: 10px;
  font-weight: bold;
  position: relative;
}

.goDiv {
  width: 33.33%;
  float: left;
}

div.IE-banner {
  text-align: center;
  line-height: 75px;
  font-size: medium;
}
</style>
</head>
<body>
  <div id="banner">
    <div class="IE-banner">
      <div id="go-lang" class="goDiv">
        <p>This will contain google language</p>
      </div>
      <div id="go-search" class="goDiv">
        <p>This will contain google search</p>
      </div>
      <div id="go-face" class="goDiv">
        <p>This will contain facebook links</p>
      </div>
    </div>
  </div>
</body>
</html>

The code above is rendered as follows: