Excessive HTML and CSS overflow stretching beyond the boundaries of the page on the right

It seems like the issue lies with div.ü and div.yayın, as they are causing overflow on the right side of the page. When these elements are removed, the overflow issue goes away. Are there different positioning codes that can be used to prevent this?

div.ü{
    
    position:relative;
    left:10%;
    vertical-align:top;}

div.yayın{
    
    position:relative;
    left:10%;
}
<div class="ü">
       <a href="#">Yayın Akışı</a>


</div>


<div class="yayın">
  <br>
  <a href = "http://localhost/php/sistemler/haber.php">
  <h3><img class="u" src = "images/7.jpg" class=""   height = "125px" style="margin-right:20px;">Section 1.10.33 of "de Fi"</h3>
  </a>
  <br>
  <h3><img class="u" src = "images/7.jpg" class=""   height = "125px" style="margin-right:20px;">Section 1.10.33 of "de rm"</h3>
  
  <br>
  <h3><img class="u" src = "images/7.jpg" class=""   height = "125px" style="margin-right:20px;">Section 1.10.33 of "de um"</h3>
  
  <br>
  <h3><img class="u" src = "images/7.jpg" class=""   height = "125px" style="margin-right:20px;">Section 1.10.33 of "de um"</h3>
  
  
  
  
</div>

htmlcss

Answer №1

Your CSS contains 3 errors:

  • The div with class ü is missing
  • This style rule is applied to an image, not a div.
  • You have included 2 class attributes on your image.

To fix these issues, add max-width:90%; if you must use left:10%; in your CSS like so:

div.yayın{ 
  position:relative;
  left:10%;
  max-width: 90%;
}

Also, replace left: 10%; with margin-left:10%; in the class yay1n.

DEMO

div .u{
  position:relative;
  margin-left:10%;
  vertical-align:top;
}

div.yayın{ 
  position:relative;
  left:10%;
  max-width: 90%;
}
<div class="yayın">
  <br>
  <a href = "http://localhost/php/sistemler/haber.php">
  <h3><img class="u" src = "images/7.jpg" height = "125px" style="margin-right:20px;">Section 1.10.33 of "de Fi"</h3>
  </a>
  <br>
  <h3><img class="u" src = "images/7.jpg" height = "125px" style="margin-right:20px;">Section 1.10.33 of "de rm"</h3>
  
  <br>
  <h3><img class="u" src = "images/7.jpg" height = "125px" style="margin-right:20px;">Section 1.10.33 of "de um"</h3>
  
  <br>
  <h3><img class="u" src = "images/7.jpg" height = "125px" style="margin-right:20px;">Section 1.10.33 of "de um"</h3>
  
  
  
  
</div>

Answer №2

When you utilize left: 10%, it causes the element to be taken out of the normal document flow, thus not affecting any other elements on the page. A better approach would be to use margin-left: 10% instead.

div.u {
  position: relative;
  margin-left: 10%;
  vertical-align: top;
}

div.yayın {
  position: relative;
  margin-left: 10%;
}
<div class="yayın">
  <br>
  <a href="http://localhost/php/sistemler/haber.php">
    <h3><img class="u" src="images/7.jpg" class="" height="125px" style="margin-right:20px;">Section 1.10.33 of "de Fi"</h3>
  </a>
  <br>
  <h3><img class="u" src="images/7.jpg" class="" height="125px" style="margin-right:20px;">Section 1.10.33 of "de rm"</h3>

  <br>
  <h3><img class="u" src="images/7.jpg" class="" height="125px" style="margin-right:20px;">Section 1.10.33 of "de um"</h3>

  <br>
  <h3><img class="u" src="images/7.jpg" class="" height="125px" style="margin-right:20px;">Section 1.10.33 of "de um"</h3>




</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

Is there a way to override the padding of a container?

Working with Wordpress for the first time has been quite a challenge. Adjusting to everything is causing me some major headaches. So, I've got this container div and added a lazy 10px padding. However, for the theme I'm attempting to develop, I ...

csshtmlpadding

Implement a context path in Angular 2 for enhanced functionality

Is there a way to change the base URL for my app from http://localhost:4200 to http://localhost:4200/pilot/? I attempted to modify the base href in index.html, but encountered an Uncaught SyntaxError: Unexpected token < This is the code snippet from m ...

htmlangularhrefangular2-routing

The use of HTML 5 Autofocus causes interference with CSS loading

Whenever I apply the autofocus="autofocus" attribute to an input element, it causes a brief glitch in Firefox. The content briefly appears without the CSS styling applied, resulting in elements not centered and headings rendered in default fonts. If I tak ...

csshtmlfirefoxautofocus

What is the best way to conceal all input elements in a form?

I have been attempting to conceal input elements within my form by using the code snippet below. Unfortunately, it doesn't seem to be functioning as expected... <html lang="en"> <head> <title>example</title> < ...

javascriptjqueryhtmlforms

Easily transform a CSS file for optimal use on dark backgrounds from scratch

I've got around 200 CSS files that look like this: /** * GeSHi Dynamically Generated Stylesheet * -------------------------------------- * Dynamically generated stylesheet for bnf * CSS class: , CSS id: * GeSHi (C) 2004 - 2007 Nigel McNie, 2007 ...

phpcssalgorithm

Utilizing Wordpress for Effective Internal Linking

Looking to set up a Table of Content on a custom Wordpress template, I decided to hardcode the headings for internal sections in advance. However, I'm facing an issue where it doesn't scroll to the intended section in Wordpress. Take a look at th ...

phpjquerywordpresshtml

What could be causing these "areas" or "panels" to intersect with each other?

As I work on constructing a website, I'm facing an issue with the top two sections. They appear correctly when my screen is full size, but as soon as I adjust the screen size, they jump down and create white space. It seems like I may have approached ...

htmlcss

.click function failing to trigger on dynamically loaded form

I'm facing an issue with a form that displays images from my database. After retrieving the filepaths, they are loaded dynamically into the form along with a "Delete" <button> for users to delete the image via AJAX. Although I can successfully ...

javascriptphpjqueryhtmlajax

Prevent the elongation of HTML select elements in Bootstrap

Struggling to set the size of an HTML "select" field in Bootstrap 3 (latest) to normal width instead of 100%? Looking for a cleaner solution than resorting to tables or adding fields within bootstrap columns that might cause indentation issues due to borde ...

htmlcsstwitter-bootstrap

The issue of CSS3 Grid-gap not functioning properly on iPhone devices

I've been working on creating a CSS template and everything seems to be functioning correctly, except for the grid gap which doesn't seem to work properly on my iPhone. Here's the code I have so far: <div class="grid"> <h1 ...

htmliosiphonecss

Utilizing jQuery to Adjust Tab Transparency

I'm trying to add some opacity to my jQuery tabs, but so far I've only been successful with accordions. Any tips or tricks for achieving this effect with tabs? Styling with CSS .ui-tabs{ background-image: none; background: rgba(204, 204 ...

javascriptjqueryhtmlcss

The font-size transition using CSS3 is experiencing a lack of smoothness specifically in the

I have crafted a simple animation for an h1 element, utilizing css3 and a transition on the font-size. Here is the link to view: http://jsbin.com/oPIQoyoT/1/edit h1 { position: relative; width:500px; height: 500px; font-size: 3em; tra ...

htmlcss

Converting an HTML form with empty values into JSON using JavaScript and formatting it

While searching for an answer to my question, I noticed that similar questions have been asked before but none provided the solution I need. My situation involves a basic form with a submit button. <form id="myForm" class="vertically-centered"> ...

javascriptjqueryhtmljson

Using knockoutjs to call a component on the home page

I am currently facing some challenges with knockoutjs components, as I am following the guidance provided in the official knockout component documentation. Could someone please advise me on how to correctly invoke my widget component on the main page? It ...

javascripthtmlknockout.jsknockout-3.0

Tips for utilizing Jquery webcam on mobile devices like Android and iPhone

Currently, I am in the process of developing mobile web applications utilizing jquery mobile and HTML 5. I am working on a feature that requires access to the camera. In order to achieve this functionality, I have integrated the following plugin: While ...

jqueryhtmlmobilewebcam

Does MySQL Workbench automatically convert camel case attributes?

I'm curious to understand something. I defined an attribute called userId, but in MySQL Workbench it shows up as user_id. Is this usual? @Id @GeneratedValue(strategy = GenerationType.IDENTITY) @Column(name= "userId") private ...

htmlmysqlspring-boothibernatemysql-workbench

Performing automatic submission of form data without needing to redirect or refresh the page using Javascript

I am trying to find a way to automatically submit form post data without the page redirecting, but I haven't had success with any of the examples I've found that involve jquery and ajax. Currently, my code redirects the page: <!DOCTYPE html& ...

javascriptjqueryhtmlajax

What is the best way for me to locate and access the initial element that has been assigned the

How do I reference the first element with the "myabilities" class in the code snippet below? <div class="span6"> <h3 class="srvc-title">Responsive Design</h3> <p class="srvc-detail">Crafting great experie ...

csscss-selectors

Stopping CSS animations at a specific point along the path without using timing functions can be achieved by implementing a targeted

Is there a way to pause an animation at the 50% mark for 2 seconds and then resume? P.S. The setInterval method is not recommended! function pauseAnimation() { document.getElementById("0").style.animationPlayState = "paused"; }; var pauseInterval = set ...

javascripthtmlcsscss-animationskeyframe

Position the center button on the Bootstrap navbar while keeping it outside the collapse menu

I want a button in the navbar that: stays inline with other navbar items (doesn't go to the next line); sits outside of the collapsed navbar section; and remains centered on the page for all screen sizes, even when the right side of the navbar is c ...

csstwitter-bootstrap