Search code examples
csshtmlpositionelement

New elements are climb in front of other elements

So there is the code of what i have.

body {
	margin: 0;
    padding: 0;
	font-family: "Yanone Kaffeesatz", Arial, sans-serif;
}

#myphotos {
    color: #464646;
    margin-left: 15px;
    float: left;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 10px;
    padding-bottom: 7px;
    letter-spacing: 1px;
}

#aboutme {
    color: #464646;
    margin-right: 15px;
    float: right;
    padding-right: 10px;
    padding-left: 10px;
    padding-top: 10px;
    padding-bottom: 7px;
    letter-spacing: 1px;
}

#myphotos:hover {
    border-style: solid;
    border-width: 0px;
    box-shadow: 0px 5px 20px #464646;
    transition: all 0.3s ease;
}

#aboutme:hover {
    border-style: solid;
    border-width: 0px;
    box-shadow: 0px 5px 20px #464646;
    transition: all 0.3s ease; 
}
  <title>Images</title>
	<link rel="stylesheet" type="text/css" href="styles/main.css">
	<link href="https://fonts.googleapis.com/css?family=Yanone+Kaffeesatz" rel="stylesheet">

<body>

<div class="content">
<header class="artnames">
    <a href="#"><h1 id="myphotos">MY PHOTOS</h1></a>
    <a href="#"><h1 id="aboutme">ABOUT ME</h1></a>
</header>
<div class="photos">
<img src="images/streetart.jpg" style="width:50%; float: left; clear: left;">
<img src="images/streetart3.jpg" style="width:50%; float: right;">
<img src="images/streetart2.jpg" style="width:50%; float: left;">
<img src="images/streetart4.jpg" style="width:50%; float: right;">
<img src="images/streetart5.jpg" style="width:50%; margin-top: -3px; float: left;">
</div>
</div>

<div class="footerr">
	<p>I love when nothing  works, aaaaa I love when nothing  works, aaaaa I love when nothing  works, aaaaa I love when nothing  works, aaaaa I love when nothing  works, aaaaaI love when nothing  works, aaaaaI love when nothing  works, aaaaaI love when nothing  works, aaaaaI love when nothing  works, aaaaaI love when nothing  works, aaaaaI love when nothing  works, aaaaaI love when nothing  works, aaaaaI love when nothing  works, aaaaaI love when nothing  works, aaaaaI love when nothing  works, aaaaaI love when nothing  works, aaaaaI love when nothing  works, aaaaaI love when nothing  works, aaaaaI love when nothing  works, aaaaaI love when nothing  works, aaaaaI love when nothing  works, aaaaaI love when nothing  works, aaaaaI love when nothing  works, aaaaaI love when nothing  works, aaaaaI love when nothing  works, aaaaaI love when nothing  works, aaaaaI love when nothing  works, aaaaaI love when nothing  works, aaaaaI love when nothing  works, aaaaaI love when nothing  works, aaaaaI love when nothing  works, aaaaaI love when nothing  works, aaaaaI love when nothing  works, aaaaaI love when nothing  works, aaaaaI love when nothing  works, aaaaaI love when nothing  works, aaaaaI love when nothing  works, aaaaaI love when nothing  works, aaaaaI love when nothing  works, aaaaaI love when nothing  works, aaaaaI love when nothing  works, aaaaalove when nothing  works, aaaaaI love when nothing  works, aaaaaI love when nothing  works, aaaaalove when nothing  works, aaaaaI love when nothing  works, aaaaaI love when nothing  works, aaaaalove when nothing  works, aaaaaI love when nothing  works, aaaaaI love when nothing  works, aaaaalove when nothing  works, aaaaaI love when nothing  works, aaaaaI love when nothing  works, aaaaalove when nothing  works, aaaaaI love when nothing  works, aaaaaI love when nothing  works, aaaaalove when nothing  works, aaaaaI love when nothing  works, aaaaaI love when nothing  works, aaaaalove when nothing  works, aaaaaI love when nothing  works, aaaaaI love when nothing  works, aaaaalove when nothing  works, aaaaaI love when nothing  works, aaaaaI love when nothing  works, aaaaa</p>
</div>
</body>

As you can see there is

element is right on top in middle between buttons. What should i do to continue put elements in normal order? right after images. Yea, i know, i'm suck...

Solution

  • You can just clear the floats like this;

    .artnames:after{ 
    content:"";
    display:table;
    clear:both; 
}


    body {
	margin: 0;
    padding: 0;
	font-family: "Yanone Kaffeesatz", Arial, sans-serif;
}

#myphotos {
    color: #464646;
    margin-left: 15px;
    float: left;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 10px;
    padding-bottom: 7px;
    letter-spacing: 1px;
}

#aboutme {
    color: #464646;
    margin-right: 15px;
    float: right;
    padding-right: 10px;
    padding-left: 10px;
    padding-top: 10px;
    padding-bottom: 7px;
    letter-spacing: 1px;
}

#myphotos:hover {
    border-style: solid;
    border-width: 0px;
    box-shadow: 0px 5px 20px #464646;
    transition: all 0.3s ease;
}

#aboutme:hover {
    border-style: solid;
    border-width: 0px;
    box-shadow: 0px 5px 20px #464646;
    transition: all 0.3s ease; 
}

.artnames:after{ 
	content:"";
	display:table;
	clear:both; 
}
    <div class="content">
<header class="artnames">
    <a href="#"><h1 id="myphotos">MY PHOTOS</h1></a>
    <a href="#"><h1 id="aboutme">ABOUT ME</h1></a>
</header>
<div class="photos">
<img src="images/streetart.jpg" style="width:50%; float: left; clear: left;">
<img src="images/streetart3.jpg" style="width:50%; float: right;">
<img src="images/streetart2.jpg" style="width:50%; float: left;">
<img src="images/streetart4.jpg" style="width:50%; float: right;">
<img src="images/streetart5.jpg" style="width:50%; margin-top: -3px; float: left;">
</div>
</div>

<div class="footerr">
	<p>I love when nothing  works, aaaaa I love when nothing  works, aaaaa I love when nothing  works, aaaaa I love when nothing  works, aaaaa I love when nothing  works, aaaaaI love when nothing  works, aaaaaI love when nothing  works, aaaaaI love when nothing  works, aaaaaI love when nothing  works, aaaaaI love when nothing  works, aaaaaI love when nothing  works, aaaaaI love when nothing  works, aaaaaI love when nothing  works, aaaaaI love when nothing  works, aaaaaI love when nothing  works, aaaaaI love when nothing  works, aaaaaI love when nothing  works, aaaaaI love when nothing  works, aaaaaI love when nothing  works, aaaaaI love when nothing  works, aaaaaI love when nothing  works, aaaaaI love when nothing  works, aaaaaI love when nothing  works, aaaaaI love when nothing  works, aaaaaI love when nothing  works, aaaaaI love when nothing  works, aaaaaI love when nothing  works, aaaaaI love when nothing  works, aaaaaI love when nothing  works, aaaaaI love when nothing  works, aaaaaI love when nothing  works, aaaaaI love when nothing  works, aaaaaI love when nothing  works, aaaaaI love when nothing  works, aaaaaI love when nothing  works, aaaaaI love when nothing  works, aaaaaI love when nothing  works, aaaaaI love when nothing  works, aaaaaI love when nothing  works, aaaaaI love when nothing  works, aaaaaI love when nothing  works, aaaaalove when nothing  works, aaaaaI love when nothing  works, aaaaaI love when nothing  works, aaaaalove when nothing  works, aaaaaI love when nothing  works, aaaaaI love when nothing  works, aaaaalove when nothing  works, aaaaaI love when nothing  works, aaaaaI love when nothing  works, aaaaalove when nothing  works, aaaaaI love when nothing  works, aaaaaI love when nothing  works, aaaaalove when nothing  works, aaaaaI love when nothing  works, aaaaaI love when nothing  works, aaaaalove when nothing  works, aaaaaI love when nothing  works, aaaaaI love when nothing  works, aaaaalove when nothing  works, aaaaaI love when nothing  works, aaaaaI love when nothing  works, aaaaalove when nothing  works, aaaaaI love when nothing  works, aaaaaI love when nothing  works, aaaaa</p>
</div>