Troubles with Marquee Element

Being a beginner in the world of html and css, I have encountered an issue while creating a responsive web page. At the top of my page, there is a text within a div which gets cut off from the right side as I decrease the browser width. Initially, I considered using marquee to solve this problem, but I've been informed that it's now obsolete. Can someone please provide me with a solution to fix this issue? Any help or suggestions would be greatly appreciated.

#topdiv {
    position: fixed;
    top: 0;
    width: 100%;
    height: 20px;
}
#topdiv p {
    position: relative;
    color: #FFF;
    float: right;
}
htmlcss

Answer №1

Perhaps this is the solution you are looking for

#topdiv
{
    position:fixed;
    top:0;
    right: 0;
    text-align: right;
    width:100%;
    height:20px;
}
#topdiv p
{
    position:relative;
    color:red;
    /*float:right;*/
}
<div id="topdiv">
<p>some text jfkdjfk fjkdfjkd fghjg fjsklfjsdklf fgsdfhusdgfjksdfsdl 123</p>
</div>

Check out this jsfiddle here

Answer №2

Apply max-width styling to the topdiv element

#topdiv {
    position:fixed;
    top:0;
    width:100%;
    max-width:95%;
    height:25px;
}

Answer №3

It seems that you are utilizing position:fixed. If this is necessary, consider removing the width of the parent div as shown in the snippet below.

#topdiv {
    position: fixed;
    top: 0;
    height: 20px;
    left: 0px;
    padding: 10px;
 }
 #topdiv p {
    color:#000;
    float:right;
    text-align:justify;
    margin:0;
    }
<div id="topdiv">
     <p>
       Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
      quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
      consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
      cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
      proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      <br><br>
         Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
      quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
      consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
      cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
      proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
     </p>
    </div>

If using a fixed position is not required, update the CSS as indicated below.

#topdiv {
    padding:10px;
}


#topdiv
    {
        padding:10px;
    }
    #topdiv p
    {
        color:#000;
        float:right;
        text-align:justify;
        margin:0;
    }
<div id="topdiv">
     <p>
       Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
      quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
      consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
      cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
      proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      <br><br>
         Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
      quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
      consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
      cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
      proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
     </p>
    </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

AngularJS integration with Bootstrap Confirmation jQuery plugin

I am currently struggling to implement the Bootstrap-Confirmation plugin with AngularJS. Despite following instructions from this YouTube tutorial, I cannot seem to get the directive to function correctly. A related query on Stack Overflow references a di ...

jqueryhtmlangularjsangularjs-directivejquery-plugins

Guide to selecting a checkbox using its unique identifier with a specific key press

Does anyone know how to create a script that will automatically click a checkbox when the 'c' key is pressed? I would appreciate any guidance or assistance in creating this script. This is the desired functionality: $("#cHideChat").click(); ...

javascriptjqueryhtmlcsscheckbox

Adding AngularJS modules to an HTML file

Recently, I've been diving into the world of AngularJS, but I'm facing a roadblock - my HTML doesn't recognize the angular module I created. It's odd because the bindings work perfectly without involving the module... This is my HTML: ...

javascripthtmlangularjs

Permanent header that clicks into place below the primary fixed header

I've been collaborating with fellow developers on this platform to tackle a persistent issue related to a fixed header. Here is the updated fiddle for reference: http://jsfiddle.net/f95sW/ The Challenge 1) As you scroll down the page, the yellow bl ...

jquerycssfixed

React isn't updating the on-change value despite changes being made

In my React application, there is a file called EditTodos.js that is responsible for updating the to-do list. When I click on the "Edit" button, it triggers a pop-up modal component. import React, { useState } from "react"; import { Button, Modal } from " ...

javascripthtmlreactjsbootstrap-4

Is there a way to modify the button's color upon clicking in a React application?

I am a beginner in the world of React and currently exploring how to utilize the useState hook to dynamically change the color of a button upon clicking. Can someone kindly guide me through the process? Below is my current code snippet: import { Button } ...

javascriptcssreactjsreact-hooksfrontend

Is it possible for me to create an HTML script that can transfer data from the script to a cell within Qubole?

Is it possible to create an HTML script that allows user interaction, pass the data back to a zeppelin cell, and trigger a rerun of the data? Thank you! Update: I have made some progress in rerunning the cell with an HTML click. The cell I want to rerun ...

htmlangularapache-zeppelinqubole

What is the best way to retrieve a variable from a .php file that is included in a different .php file?

My question is how can I retrieve a value entered in a text field (with the field name = usn) in my_file.php file, from another file called demo.php without re-entering it every time? I have multiple files and I want to access this value without using tex ...

phphtmlmysql

What is the best way to align content evenly between the logo and navigation items in the Bootstrap navbar?

Welcome to my HTML code: <nav class="navbar navbar-expand-lg navbar-light bg-light"> <div class="container-fluid"> <img class="logo" src="/images/logo.png" alt=""> < ...

cssbootstrap-4

Issue with HTML and CSS where the header is displayed behind the rest of the content

I'm having issues with creating a fixed header for my webpage. It seems to be hiding behind the rest of the content on the screen even though I have tried adjusting the z-index without success. Here is a snippet of my HTML code: body { m ...

htmlcssheader

Here's a guide on how to display texts underneath icons in Buttons using Material UI

Currently, this is the Button I have displayed https://i.sstatic.net/YkHp0.png I am trying to figure out how to position the Dummy Button text beneath the icon. Can someone assist me with this? Below is my code snippet: <Button className={classes.d ...

javascripthtmlreactjsmaterial-ui

What is the best way to implement the Gotham-Light font using @font-face?

Looking to display Gotham-Light font on a website using CSS but lacking coding skills? I have the fonts Gotham-Light.eot and Gotham-Light.ttf. How do I go about using them in a browser? Thank you for your assistance! ...

htmlcssfont-face

Guide for Sending a Textnode from One Page to a Different Page within a Specific Id Element through PHP

firstpage.html : <body> <?php $text = $_POST['text']; ?> <p style = "color:red; " id = "getext"><?php echo $text; ?></p> </body> secondpage.php : <body> <?php $text = $_POST['text']; ?> ...

javascriptphphtml

Is it better to use one large CSS file for Angular 2 or opt for separate files per component

When working with Angular 2, the choice of how to style your application is an important decision. Should you create one large minified .css file using a task runner like Gulp, or use Angular 2's styleUrls: ['myfile.css'] for each component? ...

cssperformanceangular

Audio transition on hover over image

I'm currently designing a website and I have an image depicting a house with windows. I would like to create an interactive element where the face of Goldilocks pops up in one of the windows on mouseover, accompanied by sound. I envision the face movi ...

javascriptcss

Showing the image as a backdrop while scrolling through text

How can I create an effect that continuously displays the image while scrolling text in Internet Explorer without using position: sticky or position: fixed? var sticky = document.querySelector('.sticky-container'); var img = document.querySele ...

javascripthtmlcssanimation

The media does not need to be applied to the ".nav__btn" class

How can I hide an element with the ".nav__btn" class by setting its display to none when the screen width is at least 768px? I tried the following media code but it doesn't work. Media Code @media (min-width: 768px) { .nav__btn { display: ...

cssmedia-queries

Issue with border-color in CSS on Chrome tables

Here is a table style I have defined for selected elements: tr[selected] { background: #FFF; border-color: #000000; color: #000000; } To apply this style, I use JavaScript: $this.unbind().change(function () { element = $(this).parent ...

javascriptjquerycssgoogle-chrome

What is the technique for adding a blur effect to the top and right side of a div element?

Here is a link to my fiddle: https://jsfiddle.net/aod4rmx8/ .background{ position: absolute; left: 0; width:50%; right: 0; bottom: 0; top:0; background-color: #000; /*box-shadow: 100px 0 40px 6px rgba(0, 0, 0, 1);*/ -webk ...

css

The app is unexpectedly crashing when attempting to present a view controller in a modal fashion

I am encountering a specific exception while attempting to display a modal view controller: "Application tried to present modally an active controller <ViewController: 0x16e9d270>" This crash only happens in one particular scenario. Essentially, ...

htmlioswebview