(float: right) does not work on div with pictures


#1
* {
  padding: 0;
  margin: 0;
}

html {
  height: 100%;
}

body {
  background: url("../images/Background.png");
  background-size: cover;
  height: 100%;
}

h1 {
  font-family: impact;
  margin-bottom: 20px;
  color: white;
  text-shadow:
    -1px -1px 0 #000,
    1px -1px 0 #000,
    -1px 1px 0 #000,
    1px 1px 0 #000;
}

li, p {
  font-family: Impact;
  font-size: 24px;
  color: white;
}

.header {
  display: flex;
  height: 200px;
}

/* Navbar */
.header .navbar {
  height: 270px;
  width: 24px;
}

.header .navbar a {
  text-decoration: none;
  font-family: Impact;
  list-style: none;
  font-size: 32px;
  color: white;
  text-shadow:
    -1px -1px 0 #000,
    1px -1px 0 #000,
    -1px 1px 0 #000,
    1px 1px 0 #000;
}

.header .nav-content {
  height: calc(270px / 6);
  position: absolute;
  overflow: hidden;
  float: left;
}

.header .navbar li {
  height: calc(270px / 6);
  justify-content: center;
  text-decoration: none;
  align-items: center;
  list-style: none;
  width: 24px;
}

/* Banner */

.header .banner {
  justify-content: center;
  margin-left: 591px;
  height: 200px;
  width: 720px;
}

/* Twitch Icons */

.header .twitch {
  **float: right;**
  height: 50px;
  width: 200px;
}

.header .twitch a {
  display: inline;
  height: 0;
  width: 0;
}

.header .twitch img {
  height: 50px;
  width: 47px;
}

/* Content */

.content {
  justify-content: center;
  height: 675px;
  display: flex;
}

.content div {
  box-shadow: 0px 2px 8px black;
  border: 2px black solid;
  text-align: center;
  padding: 15px;
  width: 300px;
  margin: 20px;
}

.content #admins {
  border: 2px red solid;
  text-decoration: none;
  list-style: none;
  padding: 15px;
  width: 1280px;
  margin: 20px;
}

.content #admins img {
  margin-left: auto;
  height: 50px;
  width: 47px;
}

/* Footer */

footer {
  border-top: 2px black solid;
  background-color: black;
  position: fixed;
  height: 75px;
  width: 100%;
  bottom: 0;
  left: 0;
}

footer img {
  margin: 10px;
  width: 50px;
  height: 50px;
}

/* Hover */

.header .navbar li:hover {
  background: white;
  color: black;
  width: 140px;
}

.header .nav-content:hover {
  height: 300px;
  width: 140px;
}

.header .navbar:hover {
  height: 300px;
  width: 140px;
}

.header .twitch img:hover {
  box-shadow: 0px 3px 6px black;
}

#2

is there also html code?


#3


#4

i can’t run code from a screenshot :wink:


#5

“Sorry, new users can only put one image in a post.
Sorry, new users can only put 2 links in a post.”

and i cant upload a .txt file.
so what do i do?


#6

you can use format your code, then it should be fine. Just copy paste your code, select the whole code and press the </> button (just above where you are typing) or ctrl + shift + c. Then it should be fine

or dump your code on a site like jsbin, jsfiddle or codepen


#7
<!DOCTYPE html>
<head>
<title>LowQuality</title>
<link rel="stylesheet" href="css/style.css"/>
<link rel="icon" href="images/icon/LQIcon.png"/>
</head>
<body>
  <div class="header">
    <div class="nav-content">
      <ul class="navbar">
        <li>?</li>
        <li><a href="#">HOME</a></li>
        <li><a href="admin.html">ADMINS</a></li>
        <li><a href="#">CONTACT</a></li>
        <li><a href="#">SCHEDULE</a></li>
        <li><a href="#">PRODUCTS</a></li>
      </ul>
    </div>
    <div class="banner">
      <img src="images/Banner.png">
    </div>
    <div class="twitch">
      <a href="#" target_blank><img src="images/icon/sombrero.jpg"></a>
      <a href="#" target_blank><img src="images/icon/mike.jpg"></a>
      <a href="#" target_blank><img src="images/icon/kaffe.jpg"></a>
      <a href="#" target_blank><img src="images/icon/LQMemerRedeemer.png"></a>
    </div>
  </div>
  <div class="content">
    <div class="schedule">
      <h1>Schedule</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
    <div class="streamingNews">
      <h1>Streaming News</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
    <div class="about">
      <h1>About</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
  </div>
  <footer>
    <a href="#"><img src="images/icon/youtube.png"></a>
    <a href="#"><img src="images/icon/twitch.png"></a>
    <a href="#"><img src="images/icon/facebook.png"></a>
    <a href="#"><img src="images/icon/discord.png"></a>
  </footer>
</body>
</html>


#8

i put your code here:

http://jsbin.com/jadagezobu/edit?output

the images won’t load obviously, but twitch seems to float right? Its certainly on the right hand side:

i see 4 images on right hand side.


#9

Yes, i understand. But i want the four small fotos in the .twitch class to be all the way to the right. So it doesnt touch the banner img


#10


#11

then i would go for a 3 column layout as discussed here:

https://stackoverflow.com/questions/20566660/3-column-layout-html-css


#12

Oke, thanks.
But i dont understand.
Isn’t this the same way i did it?
class=“header” == class=“container”
class=“nav-content” == class=“column-left”
class=“banner” == class=“column-center”
class=“twitch” == class=“column-right”


#13

ah, that explains a lot, flex and float do not work together:

https://stackoverflow.com/questions/39194630/float-does-not-work-in-a-flex-container

either use flex, or float. A mixture of both isn’t going to work properly. Then i would go for flex, but then go flex all the way


#14

Oke thanks for the tip.
So how do i use flex to make it go all the way to the right?


#15

no idea. I think with flex you simple get three columns, just make the outer right one very small and the middle one large. The alternative is to use float: left for the left and middle column, and then float: right for the right column.


#16

Thanks for the help so far.

But now i have a new question, i took away the display: flex; and now the .twitch is forced down below the height of the .header div.
And there is a margin att max width on .twitch for some reason, wich i can’t remove. Any ideas?


#17

you would have to post an updated version of your code


#18
* {
  padding: 0;
  margin: 0;
}

html {
  height: 100%;
}

body {
  background: url("../images/Background.png");
  background-size: cover;
  height: 100%;
}

h1 {
  font-family: impact;
  margin-bottom: 20px;
  color: white;
  text-shadow:
    -1px -1px 0 #000,
    1px -1px 0 #000,
    -1px 1px 0 #000,
    1px 1px 0 #000;
}

li, p {
  font-family: Impact;
  font-size: 24px;
  color: white;
}

.header {
  width: auto;
  height: 200px;
}

/* Navbar */
.header .navbar {
  height: 270px;
  width: 24px;
}

.header .navbar a {
  text-decoration: none;
  font-family: Impact;
  list-style: none;
  font-size: 32px;
  color: white;
  text-shadow:
    -1px -1px 0 #000,
    1px -1px 0 #000,
    -1px 1px 0 #000,
    1px 1px 0 #000;
}

.header .nav-content {
  height: calc(270px / 6);
  position: absolute;
  overflow: hidden;
  float: left;
}

.header .navbar li {
  height: calc(270px / 6);
  justify-content: center;
  text-decoration: none;
  align-items: center;
  list-style: none;
  width: 24px;
}

/* Banner */

.header .banner {
  justify-content: center;
  margin-left: 591px;
  height: 200px;
  width: 720px;
}

/* Twitch Icons */

.header .twitch {
  height: 50px;
  width: 200px;
}

.header .twitch a {
  display: inline;
  height: 0;
  width: 0;
}

.header .twitch img {
  height: 50px;
  width: 47px;
}

/* Content */

.content {
  justify-content: center;
  height: 675px;
  display: flex;
}

.content div {
  box-shadow: 0px 2px 8px black;
  border: 2px black solid;
  text-align: center;
  padding: 15px;
  width: 300px;
  margin: 20px;
}

.content #admins {
  border: 2px red solid;
  text-decoration: none;
  list-style: none;
  padding: 15px;
  width: 1280px;
  margin: 20px;
}

.content #admins img {
  margin-left: auto;
  height: 50px;
  width: 47px;
}

/* Footer */

footer {
  border-top: 2px black solid;
  background-color: black;
  position: fixed;
  height: 75px;
  width: 100%;
  bottom: 0;
  left: 0;
}

footer img {
  margin: 10px;
  width: 50px;
  height: 50px;
}

/* Hover */

.header .navbar li:hover {
  background: white;
  color: black;
  width: 140px;
}

.header .nav-content:hover {
  height: 300px;
  width: 140px;
}

.header .navbar:hover {
  height: 300px;
  width: 140px;
}

.header .twitch img:hover {
  box-shadow: 0px 3px 6px black;
}


#19

if you want to use float: right to float beside another element, that element should have float: left

i covered that here:


#20

Thanks for all the help and tips <3
Redid lots of code and now it works.