Having trouble repositioning a div element in CSS

Question

Having trouble repositioning a div element in CSS

I am having an issue with my code.

The problem I'm facing is that I am unable to move the green div.free_space below the other two divs, div.main_pic and div.navigation. I don't understand why this is happening. As I am still learning, I would greatly appreciate it if you could point out what went wrong. If there are any mistakes or improvements that can be made, please let me know!

Thank you

Below is the code:

.main_pic {
    position: absolute;
    height: 600px;
    width: 92%;
    background: black;
    font-size: 20px;
    font-family: Century Gothic, Verdana;
    font-weight: normal;
    left: 4%;
    right: 4%;
    top: 200px;
}
.navigation {
    position: absolute;
    height: 50px;
    width: 30%;
    background: white;
    font-size: 15px;
    font-family: Century Gothic;
    font-weight: normal;
    left: 66%;
    right: 4%;
    top: 100px;
    vertical-align: middle;
}
.navigation ul {
    text-align: center;
    list-style:none;
}
.navigation li {
    display: inline;
    padding: 2.5%;
}
.navigation li a {
    text-decoration:none;
    color: #999999;
}
.navigation li a:visited {
    color:#4d4d4d;
}
.free_space {
    height: 600px;
    top: 900px;
    width: 100%;
    background: green;
}

<!DOCTYPE html>
<head>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <div class="main_pic"></div>
    <div class="navigation">
        <ul>
            <li><a href="#">ITEM</a></li>
            <li><a href="#">ITEM</a></li>
            <li><a href="#">ITEM</a></li>
            <li><a href="#">ITEM</a></li>
        </ul>
    </div>
    <div class="free_space"></div>
</body>
</html>

html css

Answer 1

Answer №1

While I can't guarantee the exact outcome, it seems like the goal is similar to what's demonstrated in the code snippet below. The key is to use absolute positioning to place one element on top of another without being affected by its content. In this case, the parent image requires position: relative to serve as a reference point for the absolute positioning. Additionally, make sure to align the elements based on their order in the document flow.

.main_pic {
  position: relative;
  height: 600px;
  width: 92%;
  background: black;
  font-size: 20px;
  font-family: Century Gothic, Verdana;
  font-weight: normal;
  margin: 0 auto;
}

.navigation {
  position: absolute;
  height: 50px;
  width: 240px;
  right: 0;
  background: white;
  font-size: 15px;
  font-family: Century Gothic;
  font-weight: normal;
  top: 100px;
}

.navigation ul {
  text-align: center;
  list-style: none;
}

.navigation li {
  display: inline;
  padding: 2.5%;
}

.navigation li a {
  text-decoration: none;
  color: #999999;
}

.navigation li a:visited {
  color: #4d4d4d;
}

.free_space {
  height: 600px;
  background: green;
}

<!DOCTYPE html>

<head>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
  <div class="main_pic">
    <div class="navigation">

      <ul>
        <li><a href="#">ITEM</a></li>
        <li><a href="#">ITEM</a></li>
        <li><a href="#">ITEM</a></li>
        <li><a href="#">ITEM</a></li>
      </ul>
    </div>
  </div>
  <div class="free_space"></div>
</body>

</html>

Answer 2

While I can't guarantee the exact outcome, it seems like the goal is similar to what's demonstrated in the code snippet below. The key is to use absolute positioning to place one element on top of another without being affected by its content. In this case, the parent image requires position: relative to serve as a reference point for the absolute positioning. Additionally, make sure to align the elements based on their order in the document flow.

.main_pic {
  position: relative;
  height: 600px;
  width: 92%;
  background: black;
  font-size: 20px;
  font-family: Century Gothic, Verdana;
  font-weight: normal;
  margin: 0 auto;
}

.navigation {
  position: absolute;
  height: 50px;
  width: 240px;
  right: 0;
  background: white;
  font-size: 15px;
  font-family: Century Gothic;
  font-weight: normal;
  top: 100px;
}

.navigation ul {
  text-align: center;
  list-style: none;
}

.navigation li {
  display: inline;
  padding: 2.5%;
}

.navigation li a {
  text-decoration: none;
  color: #999999;
}

.navigation li a:visited {
  color: #4d4d4d;
}

.free_space {
  height: 600px;
  background: green;
}

<!DOCTYPE html>

<head>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
  <div class="main_pic">
    <div class="navigation">

      <ul>
        <li><a href="#">ITEM</a></li>
        <li><a href="#">ITEM</a></li>
        <li><a href="#">ITEM</a></li>
        <li><a href="#">ITEM</a></li>
      </ul>
    </div>
  </div>
  <div class="free_space"></div>
</body>

</html>

Answer 3

Answer №2

To create some space, you can use the CSS property margin-top. Here's an example:

.main_pic{
  margin-top:-200px;
    position: absolute;
    height: 600px;
    width: 92%;
    background: black;
    font-size: 20px;
    font-family: Century Gothic, Verdana;
    font-weight: normal;
    left: 4%;
    right: 4%;
    top: 200px;
}

Additionally, for more room added to your design:

.free_space {
    margin-top:600px;
    height: 600px;
    top: 900px;
    width: 100%;
    background: green;
}

Answer 4

To create some space, you can use the CSS property margin-top. Here's an example:

.main_pic{
  margin-top:-200px;
    position: absolute;
    height: 600px;
    width: 92%;
    background: black;
    font-size: 20px;
    font-family: Century Gothic, Verdana;
    font-weight: normal;
    left: 4%;
    right: 4%;
    top: 200px;
}

Additionally, for more room added to your design:

.free_space {
    margin-top:600px;
    height: 600px;
    top: 900px;
    width: 100%;
    background: green;
}

Answer 5

Answer №3

To improve the layout, it is recommended to eliminate the position: absolute; attribute from the main_pic class.

.main_pic{
height: 600px;
width: 96%;
background: black;
font-size: 20px;
font-family: Century Gothic, Verdana;
font-weight: normal;
left: 4%;
right: 4%;
top: 200px;
}
.navigation{
position: absolute;
height: 50px;
width: 30%;
background: white;
font-size: 15px;
font-family: Century Gothic;
font-weight: normal;
left: 66%;
right: 4%;
top: 100px;
vertical-align: middle;
}
.navigation ul {
text-align: center;
list-style:none;
}
.navigation li {
display: inline;
padding: 2.5%;
}
.navigation li a {
text-decoration:none;
color: #999999;
}
.navigation li a:visited{
color:#4d4d4d;
}
.free_space {
height: 600px;
top: 900px;
width: 96%;
background: green;
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="main_pic"></div>
<div class="navigation">
<ul>
<li><a href="#">ITEM</a></li>
<li><a href="#">ITEM</a></li>
<li><a href="#">ITEM</a></li>
<li><a href="#">ITEM</a></li>
</ul>
</div>
<div class="free_space"></div>
</body>
</html>

Answer 6

To improve the layout, it is recommended to eliminate the position: absolute; attribute from the main_pic class.

.main_pic{
height: 600px;
width: 96%;
background: black;
font-size: 20px;
font-family: Century Gothic, Verdana;
font-weight: normal;
left: 4%;
right: 4%;
top: 200px;
}
.navigation{
position: absolute;
height: 50px;
width: 30%;
background: white;
font-size: 15px;
font-family: Century Gothic;
font-weight: normal;
left: 66%;
right: 4%;
top: 100px;
vertical-align: middle;
}
.navigation ul {
text-align: center;
list-style:none;
}
.navigation li {
display: inline;
padding: 2.5%;
}
.navigation li a {
text-decoration:none;
color: #999999;
}
.navigation li a:visited{
color:#4d4d4d;
}
.free_space {
height: 600px;
top: 900px;
width: 96%;
background: green;
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="main_pic"></div>
<div class="navigation">
<ul>
<li><a href="#">ITEM</a></li>
<li><a href="#">ITEM</a></li>
<li><a href="#">ITEM</a></li>
<li><a href="#">ITEM</a></li>
</ul>
</div>
<div class="free_space"></div>
</body>
</html>

Answer 7

Answer №4

To improve the layout, try deleting the line "position: absolute;" from the style.css file. I have already verified the .main_pic class.

Answer 8

To improve the layout, try deleting the line "position: absolute;" from the style.css file. I have already verified the .main_pic class.

Having trouble repositioning a div element in CSS

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

What is the best way to align text in the center of a div?

Utilize CSS to selectively target specific sections of a repetitive pattern within a list

Using PHP, eliminate all hyperlinks from the DOM HTML

Hide the background when the modal appears

What is the method for placing a badge above a Font Awesome icon?

Is there a way to disable certain CSS features in Chrome, like CSS grid, for testing purposes?

Picture shifting when adjusting window size

Implementing a new row insertion with jQuery/AJAX in PHP combined with a while loop

Media query failing to adjust properly

What method was used to incorporate a 2 pixel margin between the th elements on this website?

Avoiding double tapping to zoom on Chrome Android while using the desktop version of a website

Server blocking access to Javascript files

Greek symbols do not display correctly in SQL Server when accessed through PHP

CSS hover effects are not displayed when using the input type button

Verifying if a number is present in a textbox when inserting text (without using setTimeout)

I am looking to adjust the width of an element within an Iframe

What could be causing my CSS code to not function properly within Vue.js?

Partial height side navigation bar

Is there a way to stop my <pre> code from being displayed on the page?

Chrome browser rendering image as PHP/CSS/HTML web navigation bar