Struggles with arranging elements in the right position

Question

Struggles with arranging elements in the right position

Currently, I am in the process of learning CSS and working on developing a game that involves time and score.

In short, here is what I aim to achieve:

This is what I have so far:

You can find my progress on jsFiddle: http://jsfiddle.net/yZKTE/

CSS:

#boxbuttons {
    /*text-align: center;*/
/*  margin: 20px;*/
    display: block;
        top:0;
    left: 0;
    right: 0;
    padding:50px;
    /*width:900px;*/
}
#boxbuttons .button {
    text-transform: uppercase;
    padding: 5px 10px;
    margin: 5px;
    border-radius: 10px;
    cursor: pointer;
}
#rezz
{ 
   background:url(../images/score.png) left top; 
   width:35px;
   height:35px;
   background-repeat:no-repeat;
}
#counter{
    margin-left:50px;
}
#time
{ 
   background:url(../images/time.png) right top; 
   width:35px;
   height:35px;
   background-repeat:no-repeat;
}
#ttime{
    margin-right:50px;
}

HTML:

  <span id="boxbuttons">
    <span class="button" id="rezz">
      <span id="counter">0</span>
    </span>
      <span class="button" id="time"><span class="button" id="ttime"></span></span>
  </span>

javascript jquery html css

Answer 1

Answer №1

There are numerous factors contributing to this issue.

To address it, start by "shrink wrapping" your outer div. This adjustment ensures that any floated elements will align to the right of the parent div, rather than the outermost one. To achieve this effect, add the following CSS code and observe how the width of the #picbox div adjusts to fit its contents:

#picbox {
    display: inline-block;
}

The current #boxcard CSS includes margin: 0 auto;, which centers the div. Remove this line to align the #boxcard div flush against the left side. Introduce some margin-left instead to ensure proper alignment with the header, like so:

#boxcard {
    -webkit-perspective:1000;
       -moz-perspective:1000;
        -ms-perspective:1000;
         -o-perspective:1000;
            perspective:1000;
    display: table;
    margin-left: 50px;
    width: auto;
    z-index: 1;
}

Finally, adjust the positioning of the #time div by floating it to the right. Rename #time to #boxbuttons #time to overwrite existing #boxbuttons .button styles. Float the element to the right using float: right;, remove any set width for auto sizing, include padding on the left, and modify the background positioning to separate the time and clock image effectively:

#boxbuttons #time { 
   background:url("http://remake.hr/memtest/images/time.png") left top; 
   height:35px;
   background-repeat:no-repeat;
   float: right;
   padding-left: 30px;
}

These adjustments should cover all necessary modifications.

http://jsfiddle.net/yZKTE/6/

Answer 2

There are numerous factors contributing to this issue.

To address it, start by "shrink wrapping" your outer div. This adjustment ensures that any floated elements will align to the right of the parent div, rather than the outermost one. To achieve this effect, add the following CSS code and observe how the width of the #picbox div adjusts to fit its contents:

#picbox {
    display: inline-block;
}

The current #boxcard CSS includes margin: 0 auto;, which centers the div. Remove this line to align the #boxcard div flush against the left side. Introduce some margin-left instead to ensure proper alignment with the header, like so:

#boxcard {
    -webkit-perspective:1000;
       -moz-perspective:1000;
        -ms-perspective:1000;
         -o-perspective:1000;
            perspective:1000;
    display: table;
    margin-left: 50px;
    width: auto;
    z-index: 1;
}

Finally, adjust the positioning of the #time div by floating it to the right. Rename #time to #boxbuttons #time to overwrite existing #boxbuttons .button styles. Float the element to the right using float: right;, remove any set width for auto sizing, include padding on the left, and modify the background positioning to separate the time and clock image effectively:

#boxbuttons #time { 
   background:url("http://remake.hr/memtest/images/time.png") left top; 
   height:35px;
   background-repeat:no-repeat;
   float: right;
   padding-left: 30px;
}

These adjustments should cover all necessary modifications.

http://jsfiddle.net/yZKTE/6/

Answer 3

Answer №2

Revise the #time css as follows:

#time
{ 
   background:url("http://remake.hr/memtest/images/time.png") right top; 
   width:100px;
   height:35px;
   background-repeat:no-repeat;
   display: inline-block;
   float:right;
}

The default behavior of the span HTML element is display:inline, meaning that attributes like width and height do not apply. By changing it to display:inline-block, we can use the width attribute effectively. The width was adjusted to 100px for better visibility, and float:right was added to position the element on the right side within its parent container.

http://jsfiddle.net/yZKTE/1/

UPDATE:

To shift the time display to the right of the clock icon:

#time {
  background: url("http://remake.hr/memtest/images/time.png") left top;
  width: 145px;
  height: 35px;
  background-repeat: no-repeat;
  display: inline-block;
  float: right;
  line-height: 35px;
  padding:0!important;
}

#ttime {
  float: right;
  font-size: 35px;
  line-height: 35px;
  margin: 0!important;
  padding: 0!important;
}

http://jsfiddle.net/yZKTE/4/

Answer 4

Revise the #time css as follows:

#time
{ 
   background:url("http://remake.hr/memtest/images/time.png") right top; 
   width:100px;
   height:35px;
   background-repeat:no-repeat;
   display: inline-block;
   float:right;
}

The default behavior of the span HTML element is display:inline, meaning that attributes like width and height do not apply. By changing it to display:inline-block, we can use the width attribute effectively. The width was adjusted to 100px for better visibility, and float:right was added to position the element on the right side within its parent container.

http://jsfiddle.net/yZKTE/1/

UPDATE:

To shift the time display to the right of the clock icon:

#time {
  background: url("http://remake.hr/memtest/images/time.png") left top;
  width: 145px;
  height: 35px;
  background-repeat: no-repeat;
  display: inline-block;
  float: right;
  line-height: 35px;
  padding:0!important;
}

#ttime {
  float: right;
  font-size: 35px;
  line-height: 35px;
  margin: 0!important;
  padding: 0!important;
}

http://jsfiddle.net/yZKTE/4/

Struggles with arranging elements in the right position

Answer №1

Answer №2

Similar questions

Release a stationary element upon scrolling down the page

Implementing Twitter Login with Vue, Vuex, and Firebase

Using jQuery to dynamically add li elements with AJAX and using the Append and Prepend methods

Encountering a syntax/parse error while utilizing jQuery within Velocity code

Issues with React in a Production Environment

The JS Map displays only the final outcome

What is the process for fetching the chosen outcome from a subsequent webpage using HTML?

Execute a jQuery function every time the class of the parent container div changes

I'm seeking guidance on how to delete a specific ul li element by its id after making an ajax request to delete a corresponding row in MySQL database. I'm unsure about the correct placement for the jQuery

Transitioning with a CSS cubic-bezier function results in a noticeable jump of the content

Dealing with errors in React by utilizing the setState function

Extracting data from an array using Angular

Tips for implementing jQuery functions such as lightbox and other features on a page loaded via ajax requests

Create a custom key in SJCL that has an expiration time set for automatic deletion

Is there a way to refine results based on geographic location?

Is there a way to set up a local npm module directory without using symlinks

Could my HTML security measures be vulnerable to exploitation?

What methods can be used to construct components using smaller foundational components as a base?

Encounters a fault while processing the php output

What is the title of a document that is linked behind an HTML link?