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

Error: Papa is not defined. The file was loaded from the CDN in the header section

Avoiding unnecessary white space when positioning HTML elements

What is the best way to incorporate a sliding effect into my cookie form?

Utilizing Grunt bake to generate unique files with various content from a single template

Determining the Missing Focus: Discovering the Vacant '":focus'" in Jquery

What could be causing the appearance of two vertical scrollbars after transitioning from ReactJS to NextJS?

Maintain the aspect ratio of an image within a flex container when the height is adjusted

React, facing the challenge of preserving stored data in localStorage while accounting for the impact of useEffect upon

Optimizing Your HTML5 Code: Best Practices

I am struggling to capture the user's input and display it on a webpage using HTML and JavaScript. Can you help me identify where I may be going wrong in this process?

Issues with the functionality of Bootstrap

Issues with Image Placement in Internet Explorer

Using Python in Selenium to set the value of a dropdown menu within an <input> element

What is the best way to add HTML formatted text into Outlook?

Personalized CSS styling for Jquery Mobile version 1.3

Generate code in Yii2 using the active form

Tips for extracting tables from a document using Node.js

Trouble exporting to Excel on Chrome and Firefox browsers

What is the best way to display a collection of square Views in a FlatList in a react native application?

Guide on automatically populating login data in an html5 form using a python script