Div appears mis-aligned and inside another div - Photoshop

LuthexColbark
September 18, 2015
141 views
3 votes
3 Answers

I am making a mock website for a school projevt and I have a problem with my div elements being mis-aligned and appearing in another div.

Here is what it looks like currently
[http://i.imgur.com/A6zKQoA.jpg]

Here is what I want it to look like (made with photoshop) [http://i.imgur.com/Gv2yOgJ.jpg]

Html

<div id="wrapper">
 <font color="BB9B5D"><h3><strong>LATEST NEWS</strong></h3></font>
 <hr color= "bb9b5d" />

  <div id= "LN1">
   <img src="Images/Fillerino.jpg" name="lni1" id="lni1" align= "left">
   <h4>Update 1.1.0</h4>
   <p>The first update of this year is here! Download it now and play with your friends, and be the first to take down the new bosses. </p>
  </div>

  <div id= "Ln2">
   <img src="Images/Fillerino.jpg" name="lni2" id="lni2" align= "left">
   <h4>Patch Notes 1.1.0</h4>
    <p> Read up on the Official Patch Notes to find out what you're up against.</p>
  </div>

</div>

 <div id= "NR">
  <font color="BB9B5D"><h3><b>RELEASES</b></h3></font>
  <hr color= "bb9b5d" />
 </div>

</body>
</html>

NR is another element to the right but it is working as intended

CSS

#wrapper {
 margin-top: 20px;
 margin-left: 20px;
 margin-bottom: 20px;
 background-color: #202020;
 padding-left: 30px;
 padding-top: 1px;
 padding-bottom: 600px;
 padding-right: 30px;
 font-family: Roboto-Light;
 min-width: 55%;
 max-width: 55%;
 float: left;
}
#NR {
 margin-right: 20px;
 margin-top: 20px;
 background-color: #202020;
 padding-left: 30px;
 padding-top: 1px;
 padding-right: 30px;
 padding-bottom: 300px;
 font-family: Roboto-Light;
 min-width: 32%;
 float:right;
}
#LN1 {
 font-family: Roboto-Light;
}
#lni1 {
 width: 20%;
 height: 20%;
 margin-right: 10px;
}
#LN1 {
}
#lni2 {
 width: 20%;
 height: 20%;
 margin-right: 10px;
 margin-left: 10px;
}

I’ve tried adding margins and padding to both ln1 and ln2, Id also rather not change use position absolute as I want to add more divs under them in similar formatting.

Any help would be highly appreciated, Thank you!

Tags: css html

Answers

You can add like this css html

<div id="wrapper">
 <font color="BB9B5D"><h3><strong>LATEST NEWS</strong></h3></font>
 <hr color= "bb9b5d" />

  <div id= "LN1" class="test">
   <img src="Images/Fillerino.jpg" name="lni1" id="lni1" align= "left">
   <h4>Update 1.1.0</h4>
   <p>The first update of this year is here! Download it now and play with your friends, and be the first to take down the new bosses. </p>
  </div>

  <div id= "Ln2" class="test">
   <img src="Images/Fillerino.jpg" name="lni2" id="lni2" align= "left">
   <h4>Patch Notes 1.1.0</h4>
    <p> Read up on the Official Patch Notes to find out what you're up against.</p>
  </div>

</div>

 <div id= "NR">
  <font color="BB9B5D"><h3><b>RELEASES</b></h3></font>
  <hr color= "bb9b5d" />
 </div>

</body>
</html>

CSS:

.test{display: inline-block; width: 100%;}

Since you’re aligning the images to the left, you’ll need to define clear float.

#LN1, #Ln2 {
      clear: both;
    }

#wrapper {
 margin-top: 20px;
 margin-left: 20px;
 margin-bottom: 20px;
 background-color: #202020;
 padding-left: 30px;
 padding-top: 1px;
 padding-bottom: 600px;
 padding-right: 30px;
 font-family: Roboto-Light;
 min-width: 55%;
 max-width: 55%;
 float: left;
}
#NR {
 margin-right: 20px;
 margin-top: 20px;
 background-color: #202020;
 padding-left: 30px;
 padding-top: 1px;
 padding-right: 30px;
 padding-bottom: 300px;
 font-family: Roboto-Light;
 min-width: 32%;
 float:right;
}
#LN1 {
 font-family: Roboto-Light;
}
#lni1 {
 width: 20%;
 height: 20%;
 margin-right: 10px;
}
#LN1, #Ln2 {
  clear: both;
}
#lni2 {
 width: 20%;
 height: 20%;
 margin-right: 10px;
 margin-left: 10px;
}

<div id="wrapper">
 <font color="BB9B5D"><h3><strong>LATEST NEWS</strong></h3></font>
 <hr color= "bb9b5d" />

  <div id= "LN1">
   <img src="Images/Fillerino.jpg" name="lni1" id="lni1" align= "left" />
   <h4>Update 1.1.0</h4>
   <p>The first update of this year is here! Download it now and play with your friends, and be the first to take down the new bosses. </p>
  </div>

  <div id= "Ln2">
   <img src="Images/Fillerino.jpg" name="lni2" id="lni2" align= "left" />
   <h4>Patch Notes 1.1.0</h4>
    <p> Read up on the Official Patch Notes to find out what you're up against.</p>
  </div>

</div>

 <div id= "NR">
  <font color="BB9B5D"><h3><b>RELEASES</b></h3></font>
  <hr color= "bb9b5d" />
 </div>

</body>
</html>

The following code should solve your problem. Replace the image

<!DOCTYPE html>
 <head>
    <style>
    p{
        color:white;
    }
    #wrapper {
     margin-top: 20px;
     margin-left: 20px;
     margin-bottom: 20px;
     background-color: #202020;
     padding-left: 30px;
     padding-top: 1px;
     padding-bottom: 600px;
     padding-right: 30px;
     font-family: Roboto-Light;
     min-width: 55%;
     max-width: 55%;
     float: left;
    }
    #NR {
     margin-right: 20px;
     margin-top: 20px;
     background-color: #202020;
     padding-left: 30px;
     padding-top: 1px;
     padding-right: 30px;
     padding-bottom: 300px;
     font-family: Roboto-Light;
     min-width: 32%;
     float:right;
    }
    #LN1 {
     font-family: Roboto-Light;
    }
    #lni1 {
     width: 20%;
     height: 20%;
     margin-right: 10px;
    }
    #LN1 {
        float:left;
    }
    #lni2 {
     width: 20%;
     height: 20%;
     margin-right: 10px;
    }
    h4{
        color:white;
    }
    #Ln2{
        float:left;
    }
    </style>
</head>
<body>
    <div id="wrapper">
     <font color="BB9B5D"><h3><strong>LATEST NEWS</strong></h3></font>
     <hr color= "bb9b5d" />

      <div id= "LN1">
       <img src="yellowbg.jpg" name="lni1" id="lni1" align="left">
       <h4 >Update 1.1.0</h4>
       <p>The first update of this year is here! Download it now and play with your friends, and be the first to take down the new bosses. </p>
      </div>

      <div id= "Ln2">
       <img src="yellowbg.jpg" name="lni2" id="lni2" align="left">
       <h4>Patch Notes 1.1.0</h4>
        <p> Read up on the Official Patch Notes to find out what you're up against.</p>
      </div>

    </div>

     <div id= "NR">
      <font color="BB9B5D"><h3><b>RELEASES</b></h3></font>
      <hr color= "bb9b5d" />
     </div>

    </body>
    </html>
</body>

Please signup or login to give your own answer.

Click here to cancel reply.

Div appears mis-aligned and inside another div – Photoshop

Answers