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

Top Choice for Customizable Location Bar Dragging

I'm currently working on an app that features a draggable location bar. This feature will allow users to navigate through chapters in a book and will be displayed at the bottom of the screen, similar to Kindle or other mobile reading applications. I ...

htmlcssmarkup

IE11 is unable to display the background image

I am attempting to create a process roadmap by using background images on list items. The background-image on the list item is not showing up in IE11 (also in all versions of IE10, 9, etc). CSS CODE body{padding: 50px 0;} .status-line { width: 80%; ...

htmlcssinternet-explorer

Preserving input data based on click and change events

Upon form submission, I encounter an issue with displaying only the divs that contain fields with saved values. The form saves user-entered values using PHP, where some of the fields are initially hidden within div elements until an onclick or onchange eve ...

javascriptphphtmlforms

Having trouble with Bootstrap's "hidden-xs" class not working and struggling to create a sticky footer for small viewports

Trying to tackle the challenge of making my footer stick to the bottom of the page on smaller screens has been quite troublesome. As a temporary fix, I decided to experiment with hiding the div entirely until I figure out a proper solution. The HTML < ...

javascriptjqueryhtmlcsstwitter-bootstrap

Designing a dynamic button with changing colors using html and css

Is there a way to design a button with a starting color of red, but changes to orange when the mouse hovers over it? I am looking to add this type of button to my website. ...

htmlcss

Using jQuery, it is possible to eliminate a div element without affecting its contents

<div class="a"> <div class="b"> <ul> <li>Element A</li> <li>Element B</li> </ul> </div> </div> How can I eliminate div class="b" solely? I require the presence of div a, u ...

javascriptjqueryhtml

Tips for replacing all occurrences of a specific string in HTML while preserving JavaScript attributes

Is there a way to use RegEx to replace part of an HTML document without affecting the root element or other elements like event listeners? Consider this scenario: for (; document.body.innerHTML.indexOf(/ea/) != -1;) { document.body.innerHTML = docu ...

javascripthtml

Unable to store the outcomes from [ngbTypeahead] in [resultTemplate]

I'm trying to integrate ngbTypeahead into my HTML using the code snippet below <ng-template #rt let-r="result" let-t="term"> <ngb-highlight [result]="r.FirstName" [term]="t"></ngb-highlight> </ng-template> <input name ...

htmlangulartypescriptrxjsng-bootstrap

How can I eliminate the scrollbar from appearing on all browsers when visiting my website?

I've encountered an issue while building my portfolio with React.js. I'm having trouble removing the scrollbar. I've attempted using overflow: hidden for the parent element and overflow: scroll for the child div, but it's not producing ...

javascriptcssreactjssass

Enhancing list item appearance by replacing bullets with Font Awesome icons

I need to create a list similar to this example Although I successfully replaced the bullet with a fontawesome icon, the result is not quite right as shown here You may notice a difference in spacing between the two. Here is my CSS code: .custom_list l ...

csshtmlfont-awesome

Struggling to access a JSON file using Angular framework

I'm currently working with the following JSON and controllers: JSON Format: {"tomcatLogDir":"C:\\apache-tomcat-7.0.70\\logs","tomcatLogs":["1.log","2.log","3.log"]} Factory: app.factory('filesFactory', [ '$http&a ...

htmlangularjsjsonangularjs-ng-repeatangularjs-controller

What is the best way to organize and position numerous images and text elements within a flex container?

Currently learning the ropes of web development and working on a practice project. My goal is to utilize flexbox in order to achieve a layout similar to this design. Here's what I have so far: .flex-container { display: flex; align-items: cente ...

htmlcssflexbox

Encountering a problem with server-side jQuery autocomplete

I attempted to utilize a customized service I created in order to make this jquery autocomplete example work, but unfortunately it's not functioning properly. Here is the code snippet: $( "#city" ).autocomplete({ source: function( request, res ...

jqueryhtmljsonajaxautocomplete

Tips for adjusting the text color of input fields while scrolling down

I am currently working on my website which features a search box at the top of every page in white color. I am interested in changing the color of the search box to match the background color of each individual page. Each page has its own unique background ...

javascripthtmlcsswordpress

The makeSVG function from GoJS is failing to generate the correct HTML SVG object

I have been utilizing the Diagram.makeSVG() method to create an SVG from my diagram. Subsequently, I appended the SVG to a new empty tab using this script (diagram represents my Diagram Object): function print() { var newTab = window.open(), svg ...

javascripthtmlinternet-explorersvggojs

Is it possible to make the v-toolbar-title fixed within a v-navigation-drawer using Vuetify?

Can the <v-toolbar-title> be fixed within a <v-navigation-drawer>? <v-card class="d-inline-block elevation-12"> <v-navigation-drawer hide-overlay permanent stateless height="440" value="true"> <v-toolbar color="whi ...

javascriptcssvue.jsvuetify.js

Modifying the CSS style of an element on PageA by clicking a button on PageB

For my app, I am incorporating tabs. I want to implement a user button that, when clicked on tab-detail.html, will update the CSS of an element located on its parent tab page, tab.html. .controller('TabCtrl', function($scope,Tabs) { $scope.t ...

cssangularjscontrollersbetween

Flexible DIVs with a maximum width of 50% that adjust to different

I'm having trouble getting these two DIVs to display properly within a parent DIV while maintaining responsiveness. I want them to each take up 50% of the screen with a 10px margin between them. Does my current code approach seem correct? .box-cont ...

htmlcss

Can anyone help me with integrating a search functionality inside a select tag?

I am working on a select dropdown and want to add a search box to easily filter through the available options. I know this can be done using the chosen library, but I prefer to implement it using plain JavaScript or jQuery. Does anyone have suggestions on ...

javascripthtmljquerycss

When adding text to a React Material UI Box, it can sometimes extend beyond the boundaries

I'm currently working on a straightforward React page, but I've encountered an issue right from the start: my text is overflowing the box and I can't figure out why. Could someone take a look at my styles? Here's a picture showing the ...

cssreactjsmaterial-ui