Question 210319 in Html Question posted in
Some basic documentation can be found here.

Html – How do I keep all contents INSIDE the div?

I’m trying to make an Ebay template. But I have spent 2 whole days (literally) to make everything to stay INSIDE the "frame" div.

But when I resize the page or someone checks it on the phone, all the junk like images and shapes (border items) are all over the place on the white page outside the maroon frame.

I just want everything to be cemented down onto that one div as if it is a canvas and not move nor resize when I resize the browser.

P.S. The cig will not puff due to it being blocked by something. I’m pretty new to this so I’m clueless.

IMPORTANT*: This website does not display my code properly for some reason. Please copy and paste both html and css sections into https://htmledit.squarefree.com/ to view and see what I see. This site’s html viewer is too goofy.

.Frame {
  background-color: black;
  border: solid 20px maroon;
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
}

.header {
  border: solid 1px red;
  color: Red;
  background-color: ;
  height: 60px;
  width: 899;
  font-size: 35px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: cursive;
}

.cigbutt {
  border: solid 3px white;
  width: 40px;
  height: 40px;
  border-radius: 100px;
  margin-left: 510px;
  margin-top: -30px;
  background-color: 7B2424;
  transition: 2.5s;
}

.cigbutt:hover {
  background-color: BF3D12;
}

.cigbutt:active {
  background-color: EE4007;
}

.moretext {
  color: white;
  text-align: right;
  margin-left: 450px;
  margin-top: -90px;
  width: 160px;
}

.text {
  color: white;
  width: 400px;
}

.img1 {
  margin-top: -50px;
  margin-left: 640px;
  width: 250px;
  height: 400px;
}
<div class = Frame>

<div class = Header>
Hot Girls And Cigarette Butts
</div>

<br> <br>

<div class = text>
I do not know what to put down so here as an example so here is a hot girl and an interactive circle that looks and acts like a cigarette butt. Please notice how the frame moves but everything else just magically hovers.
</div>

<div class = cigbutt>

</div>

<div class = moretext>
hover over circle to light long press circle to puff
</div>


<img class = img1 src = "https://optimize.webmavens.in/?key=1949128684&url=https://prodimages.everythingneon.com/giant/n105-1565-pole-dance-girls-1-neon-sign.jpg"></img>


<div style = "margin-top: 100px;"></div>

<br>



</div>
Tags:

2

Answers


  1. 0

    I just want everything to be cemented down onto that one div

    If you actually just want to lock down and manually align everything you can begin by setting the frame to be a positioned element (anything but static) and position its children absolutely, adjusting their left, right, top, or bottom attributes as you see fit. https://developer.mozilla.org/en-US/docs/Web/CSS/position

    Login or Signup to reply.
  2. 0

    The Primary Mistakes:

    1. The attributes such as class must have quotes ("") for their value. So you did class=Frame but it should be class="Frame"
    2. There are some lines in your CSS that did not end properly. Please make sure to have ; at the end of each line.
    3. The background colors are in HEX, so they must start with a hash #

    The main reason

    1. You are using hard-coded units like px for positioning and stylings. Thus it does not scale well, use dynamic units (e.g. em, % etc) for these.
    2. There are some places where you should have used positioning and flexbox etc instead of margin to create the layout. even your cigbutt animation was not working due to using margins like that.
    3. There are just too many to actually count and say. so I’ll provide the fixed code now

    Fixed code

    .Frame {
  background-color: black;
  border: solid 20px maroon;
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  position: relative;
  isolation: isolate;
}

.Header {
  border: solid 1px red;
  color: Red;
  height: 60px;
  width: 100%;
  font-size: 1.5em;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: cursive;
}

.wrapper {
  display: flex;
  gap: 2em;
}

.cigbutt {
  border: solid 3px white;
  width: 40px;
  height: 40px;
  border-radius: 100px;
  background-color: #7B2424;
  transition: 2.5s;
}

.cigbutt:hover {
  background-color: #BF3D12;
}

.cigbutt:active {
  background-color: #EE4007;
}

.moretext {
  color: white;
  text-align: right;
  width: 160px;
}

.text {
  color: white;
  width: 400px;
  padding: 10px;
}

.img1 {
  position: absolute;
  top: 10%;
  right: 0;
  width: 250px;
  height: 400px;
  max-height: 90%;
  z-index: -1;
}
    <div class="Frame">

  <div class="Header">
    Hot Girls And Cigarette Butts
  </div>

  <br> <br>

  <div class="wrapper">
    <div class="text">
      I do not know what to put down so here as an example so here is a hot girl and an interactive circle that looks and acts like a cigarette butt. Please notice how the frame moves but everything else just magically hovers.
    </div>

    <div style="display: flex; flex-direction: column; align-items: center; gap: 10px;">
      <div class="cigbutt">

      </div>

      <div class="moretext">
        hover over circle to light long press circle to puff
      </div>
    </div>


    <img class="img1" src="https://optimize.webmavens.in/?key=1949128684&url=https://prodimages.everythingneon.com/giant/n105-1565-pole-dance-girls-1-neon-sign.jpg"></img>

  </div>

  <div style="margin-top: 100px;"></div>

  <br>



</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search