Width of the `div` element is expanding

I'm encountering an issue where a div container is automatically stretching to the full width of the page, instead of adjusting to fit the content within it. Below is the HTML code snippet:

<!doctype html>
<html>
<!-- Head -->
<head>
    <title>html_blocked_text</title>
    <meta charset="utf-8" />
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />   

    <!-- Area for Additional Links -->
    <link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>
    <link href='html_blocked_text.css' rel='stylesheet' type='text/css' />
</head>

<!-- Body -->
<body>
    <div id="container">
        <div class='block'>
            <div class='letter'>S</div>
        </div>
        <div class='block'>
            <div class='letter'>T</div>
        </div>
        <div class='block'>
            <div class='letter'>A</div>
        </div>
        <div class='block'>
            <div class='letter'>Y</div>
        </div>
    </div>
</body>
</html>

Here's how the issue is manifested (with results displayed in 25px and 50px):

The problem lies in the excessive white space after the last letter. How can I remove the unnecessary white space on the right side of the last letter? I want the container to perfectly wrap around the content (the letters).

htmlcss

Answer №1

To increase the visibility of the content in #container, include the property display: inline-block.

#container {display: inline-block;}

For a live example, check out http://jsfiddle.net/0sh4uwnf/

Answer №2

To overcome this issue, you have the option to include either display : inline-block or float : left in your CSS code:

#container {
background-color: white;
border-radius: 5px;
overflow: hidden;
float: left;   
}

Check out the live demonstration

Answer №3

div acts as a block container, meaning it takes on the width of its parent element. In this situation, the parent element is the body element, which spans the full width of the page.

#container {
    display:inline-block;
}

By using the code above, you should achieve the desired outcome.

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

Whenever I attempt to include additional drop-down lists, jQuery fails to function

My webpage features multiple drop down lists, with one populating based on the selection from another. Additionally, I have included a button at the bottom of the page. When this button is clicked, I need to add another column to the page. However, after ...

javascriptjqueryhtml

Categorizing dl elements

Imagine having a definition list with multiple sets. Here's an example: <dl> <dt>Colors <dd>Red <dd>Blue <dt>Shapes <dd>Circle </dl> Now, what if you want these definitions to be displayed horizon ...

htmlcsslayout

Non-responsive Click Event on Dynamically Created Div Class

I am facing some uncertainty in approaching this problem. In the HTML, I have created buttons with additional data attributes. These buttons are assigned a class name of roleBtn. When clicked, they trigger the jQuery function called roleBtnClicked, which ...

javascriptjqueryhtmlclickjquery-events

Arrow indicating the correct direction to expand or collapse all items with a single click

I have successfully implemented the "expand/collapse all" function, but I am facing an issue with the arrow direction. The arrows are not pointing in the correct direction as desired. Since I am unsure how to fix this problem, I have left it empty in my co ...

javascriptjqueryhtmltoggleexpander

Guide for accessing and interpreting a random folder arrangement using JavaScript located alongside index.html

I am currently developing a testing reporting tool that organizes images into folders, resulting in a structure similar to this: root/ /counter/ img1.png img2.png /alarm/ img3.png The names of the folders like counter and alarm are not f ...

javascriptjqueryhtml

Dynamic content display using AJAX

Having already tried to find a solution through Google with no success, I am at a loss. I have articles where a paragraph is initially displayed, followed by a "read more" link which reveals more content using JavaScript. However, this approach may slow do ...

phpjavascripthtmlajax

Add a container element resembling a div inside a table without implementing the table layout

I am working with a table that is rendered by DataTable, and I have the requirement to dynamically append new elements inside the table like this: The dark grey area represents the new DOM elements that need to be inserted dynamically. The first row cont ...

javascripthtmlcss

Notification continuously appears when clicking outside of Chrome

I have implemented the use of onblur on a text box to display an alert. However, I encountered an issue where if I click outside my Chrome browser after entering text in the text box and then click on the Chrome browser button in the task bar, the alert ap ...

javascriptjqueryhtmlgoogle-chromeonblur

How can I use jQuery to set the text in a select element in HTML?

I have come across more examples of this, but unfortunately they do not seem to work. $(window).load(function () { $("#country").html('Please make a selection from the options below'); }); <select id="country"> <option value="None"> ...

javascriptjqueryhtmlselect

Is there a way to eliminate this from the footer section?

Check out my website: If the text is not visible, try using a larger monitor or zooming out in your browser. I've added an image to help explain: I only want to remove that element + title on the first page This is the HTML code: <div id="to ...

htmlcss

Minifying HTML, CSS, and JS files

Are there any tools or suites that can minify HTML, JavaScript, and CSS all at once? Ideally, these tools should be able to: Identify links from the HTML document and minify the associated JavaScript and CSS. Remove any unused JavaScript functions and CS ...

javascripthtmlcssminify

Using bootstrap's center-block class, you can easily center

I'm attempting to center the content of a form. <div class="login-container"> <div class="center-block"> <form action="/joinChart" method="get"> <input name="username" id="username" type="text"><br><br> ...

htmlcss

Execute the JavaScript [ window:print() ] function once the webpage has finished loading along with any

I am facing an issue with my web page that has around 10 Google Analytics charts. I want to trigger a print dialog box once the page is fully loaded, including all the charts and JavaScript. Currently, the problem is that the print dialog box opens after t ...

javascriptjqueryhtmlprintinggoogle-analytics

The presence of an image within an HTML anchor is causing an unexpected artifact to

Currently, I am working on a simple header design, but there seems to be a strange issue with the anchors containing image tags. The problem can be seen in the screenshot below: Image Link Here is the HTML structure: <div class="block-content"> ...

htmlcssanchor

Using CSS alone, incorporate two images within a section in HTML5

Is there a way to add two images inside a section using CSS to make them look like this: https://i.sstatic.net/74JSK.png However, the only result I can achieve with CSS looks like this: https://i.sstatic.net/TWrSR.png I could use divs in HTML and add th ...

htmlcss

Tips for wiping clean and restarting data in a modal?

After closing and reopening this modal, both the old information and new data remain. I aim to reset everything within the modal, wiping out details from both the header and body. Expected scenario - https://i.sstatic.net/Z42Rk.png Actual situation - http ...

javascriptjqueryhtmlruby-on-rails

Limit the character input in AngularJS/Ionic to a specific number

I have a text input field that needs to restrict the user from entering more than a specific number of characters. Let's say I only want the user to type 10 characters, and if they try to enter more, the text field should not accept it. It should stop ...

htmlangularjsvalidationangularjs-directiveionic-framework

What is the best way to arrange div elements in this particular manner using CSS?

Wanting to create a specific layout for my website by positioning some divs in a unique way and adding content to them, I have been focusing on responsive design. I am wondering if it is possible to position these divs while ensuring responsiveness. The de ...

htmlcss

Changing the Style Sheets on the Fly

I have designed a grid of 5x5 boxes. My goal is to be able to click on a link and have that specific link change color after it has been clicked (a:visited) - one at a time. Unfortunately, my current code changes the color of all the links instead of just ...

jquerycssdynamichyperlink

JavaScript confirmation for PHP delete button

Is there a way to implement a JavaScript alert that prompts the user to confirm their action when they click the delete button? I attempted to integrate a class into an alert box: <?php //$con = mysqli_connect("localhost", "root", "root", "db"); $sql ...

javascriptphphtmlalert