html - How can i move a div to the right side of the page?

I am trying to get the div3 to go to the right side of the page. I have mainly used CodeChef so it might be a problem with that, but I am not sure.

h1 {
  text-align: center;
}

h1,
h2 {
  color: red;
}

.div1 {
  width: 735px;
  height: 75px;
  border: 1px solid blue;
  background-color: blue;
}

.div2 {
  width: 50px;
  height: 1000px;
  border: 1px solid blue;
  background-color: blue;
}

.div3 {
  width: 50px;
  height: 1000px;
  border: 1px solid blue;
  background-color: blue;
  float: right;
}

<div class="div1">
  <h1>Welcome!</h1>
</div>
<div class="div2"></div>
<div class="div3"></div>

I am trying to get the div3 to go to the right side of the page. I have mainly used CodeChef so it might be a problem with that, but I am not sure.

h1 {
  text-align: center;
}

h1,
h2 {
  color: red;
}

.div1 {
  width: 735px;
  height: 75px;
  border: 1px solid blue;
  background-color: blue;
}

.div2 {
  width: 50px;
  height: 1000px;
  border: 1px solid blue;
  background-color: blue;
}

.div3 {
  width: 50px;
  height: 1000px;
  border: 1px solid blue;
  background-color: blue;
  float: right;
}

<div class="div1">
  <h1>Welcome!</h1>
</div>
<div class="div2"></div>
<div class="div3"></div>

I don't know what else I can test.

Share Improve this question edited Mar 27 at 10:43 Roko C. Buljan 207k41 gold badges328 silver badges340 bronze badges asked Mar 27 at 10:04 Kaius Sivula 213 bronze badges

1 First of all, the divs belong into the body element, not into head as you have them here. Second, floating doesn't work that way - you would have to place div3 before div2, to get close to what I assume you want to achieve here. But - using floats for general layouting purposes has always been just a workaround, and you really rather shouldn't be using it for those any more - flexbox and grid are the current, state-of-the-art layouting systems. – C3roe Commented Mar 27 at 10:08

Add a comment |

2 Answers 2

Sorted by: Reset to default 1

You shouldn't use float for layouts anymore, use the flexbox (display:flex on body). To move the div2 as the first element use order: -1:

body{
  display: flex;
  margin: 0;
}

h1 {
  text-align: center;
}

h1,
h2 {
  color: red;
}

.div1 {
  width: 735px;
  height: 75px;
  border: 1px solid blue;
  background-color: blue;
}

.div2 {
  width: 50px;
  height: 1000px;
  border: 1px solid blue;
  background-color: blue;
  order: -1;
}

.div3 {
  width: 50px;
  height: 1000px;
  border: 1px solid blue;
  background-color: blue;
}

<div class="div1">
  <h1>Welcome!</h1>
</div>
<div class="div2"></div>
<div class="div3"></div>

Divs are structural elements. Structural elements belong to the body tag and you instead have them inside the head element. Here's a working snippet:

<html>
    <head>
        <style>
        h1 {
            text-align: center;
        }
        h1, h2 {
            color: red;
        }
        .div1 {
            width: 735px;
            height: 75px;
            border: 1px solid blue;
            background-color: blue;
        }
        .div2 {
            width: 50px;
            height: 1000px;
            border: 1px solid blue;
            background-color: blue;
        }
        .div3 {
            width: 50px;
            height: 1000px;
            border: 1px solid blue;
            background-color: blue;
            float: right;
        }
        </style>
    </head>
    <body>
        <div class="div1"><h1>Welcome!</h1></div>
        <div class="div2"></div>
        <div class="div3"></div>
    </body>
</html>

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

html - How can i move a div to the right side of the page? - Stack Overflow

2 Answers 2

与本文相关的文章

评论列表(0)