Skip to main content
D
Don Lowe
Known Participant
February 5, 2017
Answered

How to make two divs with images in each next to each other. Have too much of a gap.

  • February 5, 2017
  • 1 reply
  • 572 views

First div is the name of the company

<div class="company_name"><img src="../images/company_name/company_name-newer_1.png" width="600" height="83" alt=""/></div>

  <br>

  <br>

  <img src="../images/Website photos 4.png" width="220" height="69" alt=""/>

  <div class="photo_box1"></div>

Thanks.

Don

Here is a copy of my html:

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<!-- TemplateBeginEditable name="Thurston Polygraph: " -->

<title>THURSTON POLYGRAPH: template</title>

<!-- TemplateEndEditable -->

<!-- TemplateBeginEditable name="head" -->

<!-- TemplateEndEditable -->

<link rel="stylesheet" type="text/css" href="engine1/style.css" />

<style type="text/css">

.menu_line {

  font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif;

  text-align: left;

  width: 1100px;

  padding-bottom: 45px;

  float: none;

  color: #FFFFFF;

  padding-top: 12px;

  margin-left: 150px;

  clear: left;

  margin-bottom: 20px;

}

.menu_1 {

  text-align: center;

  width: 100px;

  padding-left: 14px;

  padding-right: 11px;

  float: left;

  font-family: Constantia, "Lucida Bright", "DejaVu Serif", Georgia, serif;

  font-size: 115%;

  font-style: normal;

  font-weight: bolder;

  color: #FBF5F6;

  border-left: thin none #202457;

  border-right: thin solid #FBF5F6;

  border-bottom: thin none #202457;

  border-top: thin none #202457;

  padding-bottom: 6px;

  margin-bottom: 5px;

  padding-top: 5px;

  height: 25px;

  background-color: #000000;

}

.user_page_area {

  margin-right: auto;

  margin-bottom: 75px;

  text-align: left;

  width: 838px;

  float: none;

  padding-left: 20px;

  color: #000000;

  font-size: 120%;

  clear: left;

  padding-right: 20px;

  background-color: #FBF5F6;

  margin-left: 150px;

  margin-top: 20px;

}

.company_name {

  text-align: left;

  margin-right: 0px;

  color: rgba(29,135,223,1.00);

  font-style: italic;

  font-weight: bolder;

  font-size: 135%;

  width: 600px;

  margin-top: 25px;

  padding-bottom: 25px;

  margin-left: 120px;

  clear: none;

  float: left;

}

a:link {

  text-decoration: none;

  color: #FFFFFF;

}

a:visited {

  text-decoration: none;

  color: #FFFFFF;

}

a:hover {

  text-decoration: underline;

  color: #C5C1C0;

}

a:active {

  text-decoration: none;

  color: #FFFFFF;

  font-size: 85px;

  font-style: normal;

  border-right: 1px solid #EDEDED;

}

body,td,th {

  color: #FFFFFF;

  margin-left: auto;

  margin-right: auto;

  font-weight: normal;

}

.truth {

  text-align: center;

  float: left;

  width: 300px;

  margin-top: 50px;

  margin-left: 15px;

}

.menu_area {

  margin-left: 50px;

  float: left;

}

.footer {

  clear: both;

  width: 1100px;

  margin-left: auto;

  margin-right: auto;

  font-size: 120%;

  margin-top: 10px;

  padding-top: 10px;

}

</style>

<link href="../master.css" rel="stylesheet" type="text/css">

<style type="text/css">

.footer_who_dev {

  clear: both;

  margin-right: auto;

  margin-left: auto;

  text-align: center;

  font-size: 100%;

  border-style: none;

  border-width: thin;

  color: #FBF5F6;

  padding-bottom: 15px;

  padding-top: 30px;

  width: 850px;

  font-weight: normal;

  float: none;

  margin-top: 0px;

}

.menu_new { margin-right: auto;

  margin-left: auto;

  color: #CCC;

  font-family: Verdana, Geneva, sans-serif;

  padding-left: 65px;

  font-style: normal;

  font-weight: normal;

  margin-top: 0px;

  padding-top: 0px;

  clear: both;

}

.main_box {

  background-color: #4F545A;

  text-align: center;

  clear: none;

  width: 1300px;

  border-style: none;

  border-width: thin;

  margin-top: 10px;

  margin-bottom: 10px;

  background-image: url(../images/backgrounds/black.jpg);

  float: left;

}

body {

  background-image: url(../images/backgrounds/cnvbkgnd.jpg);

  margin-left: 0px;

  margin-right: 0px;

  background-color: #FFFFFF;

}

h1 {

  font-size: 145%;

  color: #171F58;

}

h2 {

  font-size: 105%;

  color: #FFFFFF;

}

.small_text_area {

  text-align: center;

  clear: both;

  float: none;

  width: auto;

  margin-right: auto;

  font-size: 65%;

  color: #FBF5F6;

  margin-left: auto;

}

h3 {

  font-size: 25%;

  color: #394D16;

}

.inner_box {

  background-color: #2E2C2C;

  width: 800px;

  margin-right: auto;

  margin-left: auto;

}

.photo_box1 {

  width: 275px;

  text-align: left;

  clear: right;

}

</style>

<meta name="keywords" content="Bay Area, california, Polygraph examiner, Examiner, Lie detector, Lie, Lie detector examiner, Truth, California, polygrapher, Cheating

">

<meta name="description" content="Thurston Polygraph provides professional polygraph services.  ">

<meta name="" content="">

<meta name="THURSTON POLYGRAPH" content="provides professional polygraph services to the greater Bay Area and throughout the State of California. We offer a wide range of polygraph services using the most advanced polygraph testing techniques and procedures in the industry.">

</head>

<body>

<div class="main_box">

  <div class="company_name"><img src="../images/company_name/company_name-newer_1.png" width="600" height="83" alt=""/></div>

  <br>

  <br>

  <img src="../images/Website photos 4.png" width="220" height="69" alt=""/>

  <div class="photo_box1"></div>

   

  <div class="menu_line">

    <div class="menu_1"><a href="../index.html"><font color="#FFFFFF">HOME</font></a></div>

    <div class="menu_1"><a href="../services.html"><font color="#FFFFFF">SERVICES</font></a></div>

    <div class="menu_1"><a href="../fees.html"><font color="#FFFFFF">FEES</font></a></div>

    <div class="menu_1"><a href="../faqs.html"><font color="#FFFFFF">FAQS</font></a></div>

    <div class="menu_1"> <a href="../test_day.html"><font color="#FFFFFF">TEST DAY</font></a></div>

    <div class="menu_1"><a href="../contact.html"><font color="#FFFFFF">CONTRACT</font></a></div>

    <div class="menu_1"><a href="../links.html"><font color="#FFFFFF">LINKS</font></a></div>

  </div>

 

  <!-- TemplateBeginEditable name="EditRegion3" -->

  <div class="user_page_area">Content for  class "user_page_area" Goes Here</div>

  <!-- TemplateEndEditable -->

  <div class="menu_line">

    <div class="menu_1"><a href="../index.html"><font color="#FFFFFF">HOME</font></a></div>

    <div class="menu_1"><a href="../services.html"><font color="#FFFFFF">SERVICES</font></a></div>

    <div class="menu_1"><a href="../fees.html"><font color="#FFFFFF">FEES</font></a></div>

    <div class="menu_1"><a href="../faqs.html"><font color="#FFFFFF">FAQS</font></a></div>

    <div class="menu_1"> <a href="../test_day.html"><font color="#FFFFFF">TEST DAY</font></a></div>

    <div class="menu_1"><a href="../contact.html"><font color="#FFFFFF">CONTACT</font></a></div>

    <div class="menu_1"><a href="../links.html"><font color="#FFFFFF">LINKS</font></a></div>

    <p> </p>

  </div>

<div class="footer_who_dev">

  <p>Website developed by <span class="style2"><em><a href="http://www.websitesbydon.com/" target="_blank"><font color="#394D16"><font color="#FFFFFF">Websites by Don</font></a></em></span> <font color="#FFFFFF">(send website comments / issues to </font><a href="mailto:donlowe@cox.net?subject=&cc=&bcc=&body="><font color="#FFFFFF">Don Lowe</font></a>)<br />

   </span><strong><font color="#FFFFFF">Copyright ©</strong> <strong>THURSTON POLYGRAPH</strong> <strong> --  all rights   reserved </strong></p></p>

</div>

<div class="small_text_area">

  <p>Bay Area Polygraph - Bay Area lie detector -- Polygraph examiner – Examiner - Lie detector – Truth – California –  polygrapher - Cheating</p>

<h3> </h3>

</div>

</div>

</body>

</html>

    This topic has been closed for replies.
    Correct answer BenPleysier

    Markup:

    <img src="http://lorempixel.com/640/93" class="company_name" alt=""/>

    <img src="http://lorempixel.com/233/73" class="photo_box1" alt=""/>

    Styling:

    img.company_name {

      display: block;

      float: left;

      width: 70%;

      height: 83px;

      margin-top: 25px;

    }

    img.photo_box1 {

      display: block;

      float: left;

      width: 30%;

      height: 83px;

      margin-top: 25px;

    }

    1 reply

    D
    Don LoweAuthor
    Known Participant
    February 5, 2017

    If there is an answer in your reply, I sure don't see it.

    BenPleysier
    Community Expert
    BenPleysierCommunity ExpertCorrect answer
    Community Expert
    February 6, 2017

    Markup:

    <img src="http://lorempixel.com/640/93" class="company_name" alt=""/>

    <img src="http://lorempixel.com/233/73" class="photo_box1" alt=""/>

    Styling:

    img.company_name {

      display: block;

      float: left;

      width: 70%;

      height: 83px;

      margin-top: 25px;

    }

    img.photo_box1 {

      display: block;

      float: left;

      width: 30%;

      height: 83px;

      margin-top: 25px;

    }

    Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!
    Firefly Community Gallery
    Adobe Firefly

    Remix with Firefly Community Gallery

    Thousands of free creations to fall in love with and remix in Firefly.

    Explore now
    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices