The image is not staying within the boundaries of its containing div and is being pushed outside

Calling all geniuses! The Nobel Prize awaits the one who can unravel the mystery of why the second image is being pushed outside its containing div.

I followed what I thought was a simple set-up:

<div class="outerdiv" id="headerbox">
    <div id="uwlogo">
        <img src="uwlogo.png" height="50px"\>
    </div>
    <div id="JaminWEB">
        <h1>JaminWEB</h1>
    </div>  
    <div id="rainer">
        <img src="rainer.jpg" height="50px"\>
    </div>
</div>

accompanied by the appropriate CSS code

#uwlogo
{
    float: left;
}

#JaminWEB
{
    float: center;
}
#rainer
{
    float: right;
}
h1
{
    color: #FFF;
    font-weight: 400;
    text-align: center;
    margin: auto;
    padding: auto;
}

Here's the JFiddle link, just in case: http://jsfiddle.net/u7PJj/

Answer №1

There are several reasons why this issue is occurring:

  1. The use of float: center is not valid, so it does not cause the element to float.
  2. Your #JaminWeb element is set to 100% width, which causes the third floating (rainer) element to wrap and float to the right on the next line.
  3. The height of your headerBox is fixed at 50px, and using float does not affect those dimensions, making it appear as if it is floating outside its container.

To resolve this, I recommend using absolute positioning instead of floating. This will allow your JaimenWEB div to be centered and take up the full width, while still allowing the logos to be placed around it.

#headerbox
{
    width: 80%;
    height: 50px;
    position: relative;
}
#uwlogo
{
    position: absolute;
    left: 5px;
    top: 5px;
}

#JaminWEB
{
    text-align: center;
}
#rainer
{
    position: absolute;
    right: 5px;
    top: 5px;
}

I have made updates to your fiddle here: http://jsfiddle.net/u7PJj/1/

Answer №2

Check This Out!

<div id="newlogo">
        <img src="newlogo.png" height="50px" />
    </div>
<div id="mountain">
        <img src="mountain.jpg" height="50px" />
    </div>
<div id="CodeMaster">
        <h1>CodeMaster</h1>
    </div>  

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

Issue with Typescript and react-create-app integration using Express

I'm relatively new to Typescript and I decided to kickstart a project using create-react-app. However, I encountered an issue while trying to connect my project to a server using express. After creating a folder named src/server/server.ts, React auto ...

typo in tweet share button

There seems to be a strange typo in the Twitter button on my website: https://i.sstatic.net/mx3NB.png Here is the code for the button: <a lang="<?php echo mida_is_english() ? 'es' : 'he' ?>" href="http://twi ...

Challenged with selecting an item within select2 due to the presence of a lower-down multiple select

Why am I unable to select options 2 & 3 when I open #s1? Instead, when I click on them, the cursor goes into #s2. How can I resolve this issue? I initially considered that it might be related to the z-index, but after attempting to adjust it, the prob ...

The HTML background image adjusts to the screen size, scaling down from the middle as the screen size changes

I am still learning HTML programming and experimenting with new things. I have encountered a challenge that I need help with. I have a .png image set as the background of my HTML file. However, when I resize the screen, the sides of the picture get cut of ...

Confirmation notification fails to appear on Firefox browser

I have implemented a script I found online that generates a confirmation message when a user tries to leave a page without submitting a form after making changes. Here is the script I am using: <script type="text/javascript"> var formSubmitting = ...

Issue: EPERM - Unable to perform action, scan directory 'C:/Users/ . . . /node_modules/react-native-gesture-handler/android/'

Every time I execute the command: npx react-native run-android An error message is displayed as follows: Error: EPERM: operation not permitted, scandir 'C:/Users/ . . . /node_modules/react-native-gesture-handler/android/... Even after running the C ...

What steps should I take to address these styling challenges?

Recently, I came across some code that uses the hspace attribute which is now considered outdated. In order to create space between elements in a widget, I am looking for a solution that involves adding 10px of space above and between the items using CSS. ...

AngularJS becomes dysfunctional due to CSS conflicts with jQueryMobile

Here are two URLs that lead to files with slight variations: mobileCSS.html noCSS.html In the mobileCSS.html file, you will find this line: <link rel="stylesheet" href="/code.jquery.com/mobile/1.4.3/jquery.mobile-1.4.3.css"> Meanwhile, in the no ...

Position a centered responsive image above the table with a horizontal line crossing underneath

#logo-center { max-width: 100%; height: auto; display: flex; } @media only screen and (min-width:991px) { .logo-div { -webkit-margin-start: -5%; -webkit-margin-end: -15%; -webkit-margin-before: -6%; left: 40 ...

JavaScript will return undefined for an object property even when it is present

I encountered a similar issue as described in this thread: Can't access object property, even though it exists. Returns undefined However, in my scenario, the problematic property is data.hostId.id. The data object comes in fully, but the hostId appea ...

Is there a way to integrate personalized Javascript files within Bootstrap 4?

As I work on developing my own components of Bootstrap 4 for a dashboard site, I have run into a challenge. I need to include custom JS to be compiled with my Bootstrap 4 project, but I am facing limitations. Every time I try to include a module, I am unab ...

What is the best way to perform a redirect in AngularJS?

Upon clicking a category on the shop-landing page, a sessionStorage variable is established and the user is redirected to the shop page. Unfortunately, there seems to be an issue with the redirection process. ***EXISTING CODE (functional but not compatibl ...

Hash functionality does not cooperate with the back button, requiring the use of JavaScript to trigger a function when the URL changes

Hi everyone, I have a code snippet that is designed to read the value after the hash in the URL and display a specific div based on that value. It works as expected, except for when the hash is changed while already on the site or when navigating back with ...

Searching for Select Option text that starts with

Currently, I am working with a select box setup as shown below: <select id="fruit"> <option value="0">--select--</option> <option value="1">apple</option> <option value="2">pineapple</option> <o ...

Effortless document uploading and visualization

I am currently utilizing the express-fileupload package for image uploads. The uploaded images are stored in my local directory. My goal is to include the filename in the MongoDB database if possible and then display the image on the frontend of my applica ...

Combining two arrays containing objects in JavaScript

Imagine having 2 arrays of objects that you want to merge in a parallel manner. For instance var array = [{foo: 2} , {boo: 3}] var array2 = [{foo2: 2}, {boo2: 4}] The outcome would be var array3 = [{foo:2,foo2:2},{boo:3,boo2:4}] In what way can this be ...

Showing an HTML div on top of a Flash object

I have a flash slideshow with two overlapping divs - one at the top and one at the bottom. <header> <div id="top-menu"> <ul> <li>Main Menu Link</li> <li>Main Menu Link</li> <li>Main Menu Link</li&g ...

Error: pos variable is not defined

I encountered a TypeError: pos is undefined while running the code below. $(document).ready(function() { var s = $("#col-scroll"); var pos = s.position(); $(window).scroll(function() { var windowpos = $(window).scrol ...

Determine the class name of an element when it is clicked on

For various reasons, I am unable to use $('.class').click or on('click', function..) Therefore, I must utilize the onclick="" event from the html element. Is there a way to determine the class of the element where the onclick event oc ...

Is it possible to create a Morris.js Bar Graph using PHP?

I've been trying to showcase my MySQL data using Morris.js graphs, but unfortunately, the graphs are not showing up at all. I carefully followed a basic tutorial, yet nothing seems to be working. Can someone please point out what may be going wrong wi ...