Simple CSS/HTML boxes

Question

The top picture shows what it turns out for me, and the bottom one shows how it is supposed to be. So what I need help with is to properly place the white "box".

Here the image: https://i.sstatic.net/82W4l.jpg

My Code

div {
  border: solid 1px black;
}
#div1 {
  background-color: Silver;
  height: 300px;
  width: 100px;
  margin-bottom: 5px;
}
.ruta {
  background-color: white;
  height: 200px;
  width: 400px;
  margin-left: 120px;
}
#div2 {
  background-color: Black;
  width: 402px;
  height: 10px;
  align-top:5px;
}

<!DOCTYPE html>
<html>
  <link rel="stylesheet" href="stylesheet.css">
  <head>
    <title>Page Title</title>
  </head>
  <body>
    <div id="div1"></div>
    <div class="ruta"></div>
    <div id="div2"></div>
  </body>
</html>

And here is the original code which we are supposed to edit. The blank spaces is what should be filled in.

________ 
{ 
border: solid 1px black; 
}
_______ 
{ 
background-color: Silver; 
height: 300px; 
width: 100px;
________________________ 
}
   
 _______ 
{ 
background-color: White; 
height: 200px; 
width: 400px; 
margin-left: 120px; 
}
_______ 
{ background-color: Black; 
width: 402px; 
height: 10px; 
margin-top: 5px;
________________________ 
}

<body> 
  <div id="div1"></div> 
  <div class="ruta"></div> 
  <div id="div2"></div> 
</body>

I like your teacher and I think you should figure this out by yourself. I will just give you a hint (float and clear). That's it! — Aziz
– Aziz, Commented Feb 21, 2016 at 14:03
The image does not load for me. Please upload it somewhere else — Peyman Mohamadpour
– Peyman Mohamadpour, Commented Feb 21, 2016 at 14:14
@Trix What it should look like: gyazo.com/007206143db064be4c4d2199bbec2766 What it looks like for me: gyazo.com/0822434259a20187dd425e33cccb82da — Heeky
– Heeky, Commented Feb 21, 2016 at 14:25
@Trix We don't do school work here, and you've been here long enough to know that. — Asons
– Asons, Commented Feb 21, 2016 at 14:29

JeetDaloneboy · Accepted Answer · 2016-02-21 15:22:30Z

1

div
{ 
border: solid 1px black; 
}
#div1 
{ 
background-color: Silver; 
height: 300px; 
width: 100px;
float:left;//this will align your sidebar to left and clear aditional space
}
   
 .ruta 
{ 
background-color: White; 
height: 200px; 
width: 400px; 
margin-left: 120px; 
}
#div2
{ 
background-color: Black; 
width: 402px; 
height: 10px; 
margin-top: 5px;
clear:both;//added
}

<body> 
  <div id="div1"></div> 
  <div class="ruta"></div> 
  <div id="div2"></div> 
</body>

answered Feb 21, 2016 at 15:22

JeetDaloneboy

4073 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

caldera.sac · Accepted Answer · 2016-02-21 15:43:49Z

you can do it in several ways.this is one of it.try this

<!DOCTYPE html>
<html>
<head>
<title>hover</title>

<style type="text/css">
  body{
    margin:0;
    padding:0;
  }



div#div1{
  width: 100px;
  height: 300px;
  background-color: Silver;
  border:1px solid black;
  margin: 10px;
  
}

div.ruta{
  width: 400px;
  height: 200px;
  background-color: white;
  margin: 10px;
  border: 1px solid black;
  position: absolute;
  left: 120px;
  top: 0;
  margin-top: 10px;
}

div#div2{
  width: 402px;
  height: 10px;
  background-color: black;
  clear: both;
  position: absolute;
  top: 310px;
  margin: 10px;

}

</style>

</head>
<body>

 <div id="div1"></div>
 <div class="ruta"></div>
 <div id="div2"></div>


</body>




</html>

This is another way

<!DOCTYPE html>
    <html>
    <head>
    <title>hover</title>

    <style type="text/css">
      body{
        margin:0;
        padding:0;
      }



    div#div1{
      width: 100px;
      height: 300px;
      background-color: Silver;
      border:1px solid black;
      margin: 10px;
      float: left;
    }

    div.ruta{
      width: 400px;
      height: 200px;
      background-color: white;
      margin: 10px;
      border: 1px solid black;
      float: left;
    }

    div#div2{
      width: 402px;
      height: 10px;
      background-color: black;
      clear: both;
      margin-left: 10px;

    }

    </style>

    </head>
    <body>

     <div id="div1"></div>
     <div class="ruta"></div>
     <div id="div2"></div>


    </body>




    </html>

This is third way with only using margin propery without float or position properties

<!DOCTYPE html>
    <html>
    <head>
    <title>hover</title>

    <style type="text/css">
      body{
        margin:0;
        padding:0;
      }



    div#div1{
      width: 100px;
      height: 300px;
      background-color: Silver;
      border:1px solid black;
      margin: 10px;

    }

    div.ruta{
      width: 400px;
      height: 200px;
      background-color: white;
      margin: 10px;
      border: 1px solid black;
      margin-top: -310px;
      margin-left: 120px;

    }

    div#div2{
      width: 402px;
      height: 10px;
      background-color: black;
      margin-left: 10px;
      margin-top: 110px;


    }

    </style>

    </head>
    <body>

     <div id="div1"></div>
     <div class="ruta"></div>
     <div id="div2"></div>


    </body>




    </html>

Collectives™ on Stack Overflow

Simple CSS/HTML boxes

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related