dex last dex last - 11 days ago 5
CSS Question

Floating div is not working with float or display

So I am new to web dev and just trying to get the hang of moving divs around, but when I include any float statements my back vanishes. Take for instance my code below, If you remove the

float: right
my second division reappears. This happens when I try to float any of them, or even try to
display: inline-block
Some one help!! :) Thank you.

I want to note I have tried every float combination I could think of just to see if I was floating them the wrong way.



body {
background-color: grey;
}


.division1 {
background-color:blue;
max-width: 100px;
min-height: 100px;
}

.division2 {
background-color: green;
max-width: 100px;
min-height: 100px;
margin-left: 10px;
float:right;
}

<!DOCTYPE>
<html>
<head>
<title> Practice with divs!</title>
<link href = "style.css" type = "text/css" rel = "stylesheet"/>
</head>
<body>
<div class = "division1"></div>
<div class = "division2"></div>
</bod1y>
</html>




Answer

body {
  background-color: grey;
}


.division1 {
  background-color:blue;
  max-width: 100px;
  min-height: 100px;
  width: 100px;
  float: left;
}

.division2 {
  background-color: green;
  max-width: 100px;
  min-height: 100px;
  margin-left: 10px;
  width: 100px;
  float:right;
}
<!DOCTYPE>
<html>
<head>
  <title> Practice with divs!</title>
  <link href = "style.css" type = "text/css" rel = "stylesheet"/>
</head>
<body>
    <div class = "division1"></div>
    <div class = "division2"></div>
</bod1y>
</html>

You'll have to give it a width, because otherwise, it will have a width of 0px and therefore not be displayed. Also, float both div's so they appear next to each other. I hope this is the result you seek to create.