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

hot to center and properly position html elements on resizing?

ok, what I want to do is pretty complex and I am having a lot of difficulty. I find HTML is so difficult to get looking just right and makes no sense!

I am trying to do a profile page, with a user image, name and a button.
here is my code:

<div class="container" style="background-color:yellow">
<div style="display:inline-block;height:140px;width:140px;background-color:red"></div>
<label> <b> User Name</b> </label>
<button style="float:right">add friend</button>
</div>

so, I have 2 issues:

#1: I want the button to be on the right side of the screen, but on the same line as the text for the label saying "Name".

#2: I want to be able to resize the screen and have the elements reposition properly. when there is no room for them, I want them to go underneath each other and become centered. here is and image example:

enter image description here

is it possible to do this with html and css alone? do need to check the window size with javascript and reposition elements? If so, can I at least get the float right element to position properly with HTML?

any help is appreciated! thank you!

Tags:

3

Answers


  1. 0

    I’d recommend CSS flexbox for doing this. Its great for doing responsive designs.
    To solve your problem easier, i moved the CSS in an external file.

    My CSS:

    .container {
   background-color: yellow;
   display: flex;
   flex-direction: row;
   justify-content: center;
   align-items: end;
}
      
#square {
   display: inline-block;
   height: 140px;
   width: 140px;
   background-color: red;
}

#button {
   margin-left: auto;
}

/* When the screen width is for example smaller than 300px,
collapse the Elemente and show them centered & below each other.
That's how we use the @media keyword. 
Please replace the 300px with your needed size. */

@media screen and (max-width: 300px) {
   .container {
      flex-direction: column;
      align-items: center;
   }

   #button {
     margin-left: 0;
   }
}

    My HTML:

    <div class="container">
   <div id="square"></div>
   <label>
      <b>User Name</b>
   </label>
   <button id="button">add friend</button>
</div>

    Learn more about CSS Flexbox:
    https://www.w3schools.com/css/css3_flexbox.asp

    Login or Signup to reply.
  2. 0 
    .container {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  min-width: 300px;
}

.square {
  display: inline-block;
  height: 140px;
  width: 140px;
  background-color: red;

}
.body{
  flex: 1;
   justify-content: space-between;
   padding: 0 10px;
}
    <div class="container" style="background-color:yellow">
  <div class="square"></div>
  <div class="container body">
    <label> <b> User Name</b></label>
    <button>add friend</button>
  </div>
</div>
    Login or Signup to reply.
  3. 0

    I wrote the easiest way to do this below

    .container1 #box {
  display : inline-block;
  width : 70%;
  justify-content: space-between;
}

.container2 {
  width: 100vw ; 
  height:300px;
  display: flex;
  flex-direction: column; /*be placed under each other*/
  justify-content: space-evenly;
  align-items: center;
}
    <div class="container1" style="background-color:yellow">
  <div style="display:inline-block;height:140px;width:29%;background-color:red">
  </div>
  <div id="box">
    <label> <b> User Name</b> </label>
    <button style="float:right">add friend</button>
  </div>
</div>

<br><br>

<div class="container2" style="background-color:yellow">
  <div style="display:inline-block;height:140px;width:140px;background-color:red">
  </div>
  <label> <b> User Name</b> </label>
  <button style="float:right">add friend</button>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search