admin管理员组

文章数量:1394578

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.

  • html
  • css
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 SivulaKaius Sivula 213 bronze badges 1
  • 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

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>

本文标签： htmlHow can i move a div to the right side of the pageStack Overflow

版权声明：本文标题：html - How can i move a div to the right side of the page? - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1744097964a2590630.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。