Setting the size of a box using CSS in HTML pages

I am facing issues with resizing boxes. Below is the code snippet:

<!DOCTYPE html>
<html lang="en">
  <head>
    <style>
      .wrapper { 
        text-align: center; 
      } 
      #bubble { 
        display: inline; 
        -moz-border-radius: 15px;
        border-radius: 15px;
        margin: 5px;
        width: 100px; 
        height: 100px; 
        position: relative; 
        border: solid;
        border-width: 1px; 
        background-color: #999999;
        font-name: arial;
      }
    </style>

  </head>
  <body>
    <div class="wrapper"> 
      <div id="bubble">Box 6</div> 
      <br clear="all"> 
      <div id="bubble">Box 5</div> 
      <div id="bubble">Box 5</div> 
    </div>

  </body>
</html>

The issue I am facing is that despite specifying 100px x 100px size for the boxes in the style, Chrome displays them as 42px x 19px.

There might be a simple solution that I seem to have overlooked. -.-°

I appreciate any assistance provided. Thank you.

htmlcss

Answer №1

  1. Avoid using the same id for multiple elements, consider using classes instead.
  2. To ensure width/height properties work correctly, switch your display to inline-block or block.

I hope this information proves helpful.

 .box { 
    text-align: center; 
} 

.bubble { 
    display: inline-block; 
    -moz-border-radius: 15px;
    border-radius: 15px;
    margin: 5px;
    width: 100px; 
    height: 100px; 
    position: relative; 
    border: solid;
    border-width: 1px; 
    background-color: #999999;
    font-family: arial;
}

Click here for a demonstration on JSFIDDLE.

Answer №2

Switch out this

display: inline;

for this

display: inline-block;

Check out the demonstration here.

Answer №3

To achieve the desired dimensions, adjust the #bubble's display property to inline-block. This will transform it into a block element and ensure it receives the specified size.

Answer №4

Here is a suggestion to consider:

#bubble { 
    display: inline-block; 
    vertical-align: top;
    -moz-border-radius: 15px;
    border-radius: 15px;
    margin: 5px;
    width: 100px; 
    height: 100px; 
    position: relative; 
    border: solid;
    border-width: 1px; 
    background-color: #999999;
    font-name: arial;
  }

For further reference, you can view the codepen example

Answer №5

Swap out display:inline; with display:inline-block;

To make it 100x100px, you can also use:

 *, *:before, *:after {
  -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
 }

http://jsfiddle.net/mBBJM/4553/

Upon inspecting each circle, you will notice they are indeed 100px x 100px.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

CSS styling not functioning properly

After spending a considerable amount of time on this issue... <div id="pager" style="top: 5px; position: relative; " class="pager" > <form> <img src="http://tablesorter.com/addons/pager/icons/first.png" alt="first" class="first" ...

htmlcsstablesorter

Interactive calendar feature displaying events upon hovering over a date

I need some assistance with displaying a drop-down list on full calendar events when hovering over the events. Can someone provide guidance? Here is a glimpse of what I currently have: I've attempted setting the z-index, but I can't seem to get ...

javascriptcssfullcalendarfullcalendar-3

To emphasize code in an HTML document, you can use the <font color="#xxx"> tag

Can anyone guide me on how to add color highlights to my HTML code in this way? <font color="#1773cc">#include </font><font color="#4a6f8b">&lt;NTL/ZZ.h&gt;</font><br> <br> <font color=&quo ...

htmlhighlight

Instructions for connecting a button and an input field

How can I connect a button to an input field? My goal is to make it so that when the button is clicked, the content of the text field is added to an array (displayed below) const userTags = []; function addTags(event) { userTags.push(event.target.__ wha ...

javascripthtmlcssformsform-submit

Positioning images within a relatively positioned div using absolute positioning

I have come across multiple discussions on this topic, but I am still struggling to make the following code snippet function correctly: .container { position: relative; width: 100%; } .left { position: absolute; left: 0px; } .right { positio ...

htmlcsscss-position

Create a scrollable div within a template

After discovering a template that I want to use for my personal project, I noticed a missing element... There's a div where content can be added. That's fine, but what if I add more content than fits in the space provided? The whole website beco ...

javascriptjqueryhtmlcsstemplates

What is the proper way to utilize the script type "text/x-template" in a multilanguage context?

I'm currently working with ASP NET and VueJS. In my ASP NET, I have a view component that looks like this: <script type="text/x-template" id="form-template"> @if (string.IsNullOrEmpty(Model.LastName)) { <in ...

htmlasp.netvue.jskeyboardmonitor

conceal parent window element upon clicking an image within an iframe

I'm facing a challenge with hiding certain buttons in a parent window when opening a modal by clicking an image inside an iframe. Below is the code snippet that I am using: In the parent window - <iframe id="gallery" src="links/gallery.html" wid ...

javascripthtmliframe

Navigating redirects in HTML parsing with Python

I am currently experimenting with submitting multiple forms using a Python script and making use of the mechanized library. The purpose behind this is to set up a temporary API. The issue I am encountering is that upon form submission, a blank page appea ...

pythonhtmlhttpformsscreen-scraping

Accordion Box glitch detected in Firefox browser

I have been working on a JavaScript function that controls a slide up/down box. However, I've encountered some issues with Firefox as the box only opens and closes once before failing to work properly again. Upon further investigation, it seems that F ...

javascriptjqueryhtmlcss

php log in button with a redirect feature

As a complete beginner, I created a basic login.php. However, I am unsure how to make the login button redirect to another page. Below is the script I currently have: <php //Initiate the Session session_start(); require('connect.php'); ...

phphtml

Adjust the font color in code function for Woocommerce

I am looking to customize the appearance of a specific part of this code: '% discount' This section displays the percentage amount followed by the word "Discount," and I would like to apply a unique color to this "% discount" * Modify the disp ...

phphtmlcsswordpresswoocommerce

Location-based services: Updating the position of a Google Maps marker without refreshing the entire map interface

How can I update only the marker on a map when the device is in motion or has increased accuracy? I want to reload the map when the position changes, but only move the marker. Below is the code snippet that I currently have: if (navigator.geolocation) { ...

javascripthtmlgoogle-mapsgoogle-maps-api-3geolocation

Updating view with *ngIf won't reflect change in property caused by route change

My custom select bar has a feature where products-header__select expands the list when clicked. To achieve this, I created the property expanded to track its current state. Using *ngIf, I toggle its visibility. The functionality works as expected when cli ...

javascripthtmlangular

What causes the disparity in the rendering of iframe content height when using "src" compared to "srcdoc"?

After comparing the behaviors of iframes with src and srcdoc, I stumbled upon a puzzling difference: a div set to 100% height renders as the full height of the iframe when using src=[data uri], but not with srcdoc. The issue can be easily replicated with ...

htmlcssiframe

Is it possible to use only CSS to determine if text has wrapped and apply different styles to it?

Let's say we have a button with lengthy text: [Click here to find out more] Due to its length, the text may be split on smaller screens like this: [Click here to find out more] The goal is to align the text to the left when wrapped and to the ce ...

htmlcss

React - Highcharts Full Screen dark overlay

I am currently working on integrating highcharts/highstock into my application, and I have encountered an issue with the full screen functionality. The challenge I am facing is setting a fixed height for my charts while also enabling the option to view ea ...

javascriptcssreactjshighchartsreact-highcharts

Tips for embedding Javascript code within the window.write() function

I have a JavaScript function that opens a new window to display an image specified in the data variable. I want the new window to close when the user clicks anywhere on it. I've tried inserting some JavaScript code within window.write() but it doesn&a ...

javascriptphphtmlwindow.open

Require that double-width unicode symbols are displayed as double-width in Markdown or CSS

I am seeking a solution to manage the visual width of double-width unicode characters like the LARGE ORANGE SQUARE ...

cssunicodemarkdownascii-art

Trouble Arising from Regional Settings in my Hybrid App Developed with CapacitorJS and Vue.js

Issue with capacitor app input Correct input in chrome app I'm facing a problem related to regional settings in my mobile application, developed using CapacitorJS and Vue.js 2. The datetime-local control is appearing in a language that isn't the ...

htmlvuejs2capacitor