CODEWITHSUNDEEP
htmlcss
Nalsinan
Nalsinan

Reputation: 1

Trying to move div

I'm trying to move the red div to be right under the "Welcome to the world of coding!" header div, but I can't seem to do it. I'm a bit of a beginner in coding, so any help would be much appreciated!( any tips on how to get better or correcting any mistakes would be helpful too!)

h1 {
  font-family: 'Slabo 27px', serif;
  color: white;
}
.box {
  background-color: #282A29;
  text-align: center;
  padding-top: 10px;
  width: 1000px;
  height: 90px;
  margin: 0 auto;
}
.ul {
  background-color: red;
  color: white;
  height: 400px;
  width: 200px;
  text-align: center;
  float: left;
  position: absolute;
}
ul {
  padding-left: 185px;
  list-style-type: none;
}
li {
  padding-top: 5px;
  padding-bottom: 5px;
}
body {
  margin: 0px;
  padding: 0px;
  padding-top: 0px;
  width: 100%;
  height: 100%;
}
html {
  width: 100%;
  height: 100%;
}
<html>
<head>
  <title>Hello!</title>
  <link rel="stylesheet" href="Shaw Academy CSS.css">
  <link href='https://fonts.googleapis.com/css?family=Slabo+27px' rel='stylesheet' type='text/css'>
</head>

<body>
  <div class="box">
    <h1> Welcome to the World of Coding! </h1>
  </div>

  <div class="ul">
    <ul>
      <li>Please</li>
      <li>Let me</li>
      <li>Pass</li>
      <li>This course</li>
    </ul>
  </div>
</body>
</html>

Upvotes: 0

Views: 53

Answers (2)

M.Tanzil
M.Tanzil

Reputation: 1995

You have given fixed width in px thats the reason, always give width in % so that it automatically adjust to screen size. Use px in cases when it is much needed.

If you want the .ul to be at right, Then use float:right in css

body{
  width:100%;
  height:100%;
}
h1 {
  font-family: 'Slabo 27px', serif;
  color: white;
}
.box {
  background-color: #282A29;
  text-align: center;
  padding-top: 10px;
  width: 100%;
  height: 90px;
  margin: 0 auto;
}
.ul {
  background-color: red;
  color: white;
  height: 400px;
  width: 60%;
  text-align: center;
  margin:0px auto;
  overflow:hidden;
}
ul {
  //padding-left: 185px;
  list-style-type: none;
}
li {
  padding-top: 5px;
  padding-bottom: 5px;
}
body {
  margin: 0px;
  padding: 0px;
  padding-top: 0px;
  width: 100%;
  height: 100%;
}
html {
  width: 100%;
  height: 100%;
}
<html>
<head>
  <title>Hello!</title>
  <link rel="stylesheet" href="Shaw Academy CSS.css">
  <link href='https://fonts.googleapis.com/css?family=Slabo+27px' rel='stylesheet' type='text/css'>
</head>

<body>
  <div class="box">
    <h1> Welcome to the World of Coding! </h1>
  </div>

  <div class="ul">
    <ul>
      <li>Please</li>
      <li>Let me</li>
      <li>Pass</li>
      <li>This course</li>
    </ul>
  </div>
</body>
</html>

Upvotes: 1

Ali Mottaghi Pour
Ali Mottaghi Pour

Reputation: 297

Try This:

HTML:

<body>
    <h1>Welcome to the World of Coding! </h1>
    <ul>
        <li>Please</li>
        <li>Let me</li>
        <li>Pass</li>
        <li>This course</li>
    </ul>
</body>

CSS:

 h1 {
        text-align:center;
    }

    ul {
        background-color:red;
        color:white;
        list-style-type:none;
        width:200px;
        float:right;
    }

Upvotes: 0

Related Questions