Darian Steyn Darian Steyn - 6 months ago 27
HTML Question

My layout is creating a random margin

I am new here and I am facing a very annoying problem which you would think could easily be fixed. But I have been trying to figure this out for the past hour.

Here is my problem, I have drawn a red box around it to indicate the problem -
See below
See below

Here is the html code -

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="Darian Steyn">
<title>BMW</title>
<link rel="stylesheet" type="text/css" href="css/styles.css">
<link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>
</head>

<body>

<div class="container">

<div id="menu">
<img class="logo" src="img/logo.png"/>
<ul>
<nav>
<li><a href="index.html"><span>HOME</span></a></li>
<li><a href="vehicles.html"><span>VEHICLES</span></a></li>
<li><a href="mybmw.html"><span>MY BMW</span></a></li>
<h1>REGION</h1>
</nav>
</ul>
<div class="fix"></div>
</div>

<div id="slider">
<img src="img/bmwConcept2.jpg">
<div><img src="img/specials.png"></div>
<div class="fix"></div>
</div>

</div>



</body>

</html>


Here is the css -

/* my official site styles */

#menu
{
width: 100%;
height: 60px;
background-color: #232323;
float: right; /*Why when I added this here, did it push it to the top*/
font-family: 'Montserrat', sans-serif;
}

.logo
{
width: auto;
height: 80%;
float: left;
padding: 0.3% 0 0 0.3%;
}

ul
{
padding: 0.3%;
text-align: center;
list-style-type: none;
}
nav li
{
display: inline;
padding-right: 2%;
}

li a
{
text-decoration: none;
color: white;
}

li a:hover
{
color: #1F68A5;
}

nav h1
{
font-family: 'Montserrat', sans-serif;
float: right;
font-size: 100%;
color: white;
margin-top: -0.2em;
margin-right: 1em;
border-style: solid;
border-width: 0.15em;
border-color: white;
}

nav h1:hover
{
color: #1F68A5;
border-color: #1F68A5;
}

#slider
{
width: 100%;
float: left;

}

#slider img:first-child
{
height: 550px;
width:70%;
float: left;

}

#slider div
{
width:30%;
float: left;
margin-right: -2em;

}

.fix
{
clear: both;
}


I Appreciate the help!

Answer

Try this one...

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="author" content="Darian Steyn">
    <title>BMW</title>
    <link rel="stylesheet" type="text/css" href="css/styles.css">
    <link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>
    <style>
    #menu
{
  width: 100%;
  height: 60px;
  background-color: #232323;
  float: right; /*Why when I added this here, did it push it to the top*/
  font-family: 'Montserrat', sans-serif;
}

.logo
{
  width: auto;
  height: 80%;
  float: left;
  padding: 0.3% 0 0 0.3%;
}

ul
{
  padding: 0.3%;
  text-align: center;
  list-style-type: none;
}
nav li
{
  display: inline;
  padding-right: 2%;
}

li a
{
  text-decoration: none;
  color: white;
}

li a:hover
{
  color: #1F68A5;
}

nav h1
{
  font-family: 'Montserrat', sans-serif;
  float: right;
  font-size: 100%;
  color: white;
  margin-top: -0.2em;
  margin-right: 1em;
  border-style: solid;
  border-width: 0.15em;
  border-color: white;
}

nav h1:hover
{
  color: #1F68A5;
  border-color: #1F68A5;
}

#slider
{
    width: 100%;
    float: left;

}

#slider img:first-child
{
  width:70%;

}

#slider div
{
  width:30%;
  float: left;
  margin-right: -2em;

}

.fix
{
  clear: both;
}
    </style>
</head>

<body>

    <div class="container">

                <div id="menu">
                <img class="logo" src="img/logo.png"/>
                <ul>
                    <nav>
                    <li><a href="index.html"><span>HOME</span></a></li> 
                    <li><a href="vehicles.html"><span>VEHICLES</span></a></li>
                    <li><a href="mybmw.html"><span>MY BMW</span></a></li>
                    <h1>REGION</h1>
                    </nav>
                </ul>
                <div class="fix"></div>
                </div>

                <div id="slider">
                    <img src="img/bmwConcept2.jpg" style="width:70%">
                   <img src="img/specials.png" style="width:30%;float:right;">
                    <div class="fix"></div>
                </div>

    </div>



</body>

</html>