Nick Caris Nick Caris - 6 months ago 10
HTML Question

Div next to div no use of float

i want 2 divs next to eachother i already tried floating but it did not work here is my code

i have foundation but use my own css most of the time



.mijn_producten{
border-style: solid;
border-color: #dddddd;
margin-left: 60%;
margin-right: 5%;
margin-top: 50px;
background: white;

}
.contact_gev{
border-style: solid;
border-color: #dddddd;
margin-left: 5%;
margin-right: 50%;
margin-top: 50px;
margin-bottom: 50px;
background: white;
}
.contact_gev h1{
margin-left: 5%;
}
.contact_gev p{
margin-left: 5%;
margin-top: 10%
}
.background_content{
background: #f9f9f9;
margin-left: 2%;
margin-right: 2%;
padding-top: 1%;
padding-bottom: 1%;
}

<html>
<head>
<title>Sapphire webshop</title>
<link rel="stylesheet" href="css/foundation.css" media="all"/>
<link rel="stylesheet" href="css/csszelf.css" media="all"/>
</head>
<body>
/*<?php include 'header.php';?>*/
<div class = "background_content">
<div class= "contact_gev">
<h1>Contact gegevens</h1>
<form>
<p>Gebruikersnaam: <input class="registreren" type="text" name="Gebruikersnaam"></p>
<p>Voornaam: <input class="registreren" type="text" name="voornaam"></p>
<p>Achternaam: <input class="registreren" type="text" name="achternaam"></p>
<p>Telefoonnummer: <input class="registreren" type="text" name="telefoonnummer"></p>
<p>Geboorte datum: <input class="registreren" type="text" name="geboortedatum"></p>
<p>Adres:<input class="registreren" type="text" name="adres"></p>
<p>Postcode:<input class="registreren" type="text" name="postcode"></p>
<p>plaats:<input class="registreren" type="text" name="plaats"></p>
<p>land:<input class="registreren" type="text" name="land"></p>
</form>
</div>
<div class ="mijn_producten">
<h1> Mijn producten</h1>
</div>
</div>
/* <?php include 'footer.php';?> */
</body>
</html>





here you can see my code i already used float left right and all the position variants

Answer

Remove left right margin from bot side add float left on both element and then give width for example 50%.

HTML

<div class="background_content">
  <div class="contact_gev">
    <h1>Contact gegevens</h1>
    <form>
      <p>Gebruikersnaam:
        <input class="registreren" type="text" name="Gebruikersnaam">
      </p>
      <p>Voornaam:
        <input class="registreren" type="text" name="voornaam">
      </p>
      <p>Achternaam:
        <input class="registreren" type="text" name="achternaam">
      </p>
      <p>Telefoonnummer:
        <input class="registreren" type="text" name="telefoonnummer">
      </p>
      <p>Geboorte datum:
        <input class="registreren" type="text" name="geboortedatum">
      </p>
      <p>Adres:
        <input class="registreren" type="text" name="adres">
      </p>
      <p>Postcode:
        <input class="registreren" type="text" name="postcode">
      </p>
      <p>plaats:
        <input class="registreren" type="text" name="plaats">
      </p>
      <p>land:
        <input class="registreren" type="text" name="land">
      </p>
    </form>
  </div>
  <div class="mijn_producten">
    <h1> Mijn producten</h1>
  </div>
</div>

CSS

.mijn_producten {
  border-style: solid;
  border-color: #dddddd;
  width: 50%;
  float: right;
  margin-top: 50px;
  background: white;
  box-sizing: border-box;
}

.contact_gev {
  border-style: solid;
  border-color: #dddddd;
  margin-top: 50px;
  margin-bottom: 50px;
  background: white;
  width: 50%;
  float: left;
  box-sizing: border-box;
}

.contact_gev h1 {
  margin-left: 5%;
}

.contact_gev p {
  margin-left: 5%;
  margin-top: 10%
}

.background_content {
  background: #f9f9f9;
  padding-top: 1%;
  padding-bottom: 1%;
  overflow: hidden;
}

Demo