There are several reasons why your content may be going outside of a div container in HTML/CSS:

1. Overflow property: The overflow property in CSS controls how content that exceeds the boundaries of an element is handled. If the value is set to visible, the content will overflow outside of the container. Setting it to hidden or scroll will prevent the content from overflowing.
2. Width and Height: If the width and height of the div container are not set correctly, the content may exceed the boundaries of the container. Make sure that the width and height are set to fit the content.
3. Margins and Paddings: The margins and paddings of the div container can also affect how the content is displayed. If the margins or paddings are set too large, the content may be pushed outside of the container.
4. Float: If you are using floats, make sure that you clear the floats after the element you want to contain.
5. Positioning: The positioning of the div container and its content can also affect how the content is displayed. Make sure that the position of the container and the content are set correctly.

It is always recommended to check the HTML and CSS code, inspect the element and use developer tools to debug the issue.

If you can provide the code or more information, I can help you to identify the problem.

You can set the height of the div to an absolute pixel value and this will restrict it to that height. A side effect of this is that at a certain point, your text or image etc. will start to overflow the div, which is usually not the preferred way of doing things.

To stop this from happening, you can set the div’s overflow to hidden.

.testDiv { 
  border: 2px solid black; 
  width: 200px; 
  height: 200px; 
  overflow: hidden; 
} 

Of course, you lose the ability to see the hidden content. So, unless that’s what you want to happen, you will want to set the overflow to auto, which will apply scroll bars if necessary.

Strictly speaking, you don't have vertical centering in CSS2.1 and there are techniques you can use to accomplish horizontal centering, but that doesn't really exist either.

Both horizontal and vertical centering exist in CSS3, however.

Why your code isn't working

1. It appears that you are trying to use the "margin" technique, but margin: auto only centers horizontally.
2. You are using two divs, which are block level elements (they naturally want to take up as much width as is available, and as much height as content needs). Block level elements also always start taking up space in the top. So it's partly the display property
3. In your case, even though the arrow has no height, it still wants to act "block level" and start its positioning at the top.

Alternatives

You're creating a CSS-based triangle, which requires you to have a height: 0 and width: 0. Setting a height/width will distort the triangle. So you need a solution that doesn't affect the properties of your triangle.

1. Use a unicode character for the triangle, instead of HTML + CSS
1. Treat the triangle like it's inline, and then set this on your #play-button text-align: center and line-height: 2
2. completely ignore the CSS-based triangle
2. Change the display property of your #play-button
1. display: table-cell first, then add
2. vertical-align: middle to center your play button
3. Use padding on the #play-button for your centering:
1. add padding: 10px;
2. reduce the height and width by [math](padding * 2)[/math]: height: 15px; width: 15px;
4. Use flex box, which allows vertical and horizontal centering:
1. display: inline-flex;flex-direction: row; justify-content: center; align-content: center;

Fundamentally, the reason things aren't centering the way you want them to is because CSS 2 never allowed for vertical centering of block level elements. In order to accomplish your goal, you will have to change the display property and apply other properties that will "fake" your centering.

By enabling developer options you can speed up your phone considerably .Go to settings then scroll down to about phone scroll down again until you see build number. Tap on build number 7-9 times and you will see a little pop-up that says you are now a developer. Tap back twice and you'll see a new Option called developer options tap that.

School down until you see the above photo. You can reduce same of the window animation, transition animation and the duration scales to .5x or even turn them off altogether, quite noticeably improving your device’s performance.

I hope this helps!

You don’t mention what you consider to be “issues”. Getting things to fit correctly is often a problem of what the web browser considers to be the size of a container. An excellent way of fixing many of these problems is to use this CSS style rule to make things behave the way one would expect them to: * { box-sizing: border-box; }

Or are you asking why things look different between two browsers? That’s often because of different default behaviour choices. One thing many people do is to use their style sheets to explicitly reset all the default values (e.g. set all margins, and padding to 0 by default, and change them where needed). This is often accomplished by linking in a style sheet intended strictly for this purpose. Search Google for “css reset” for some examples.

Another common problem is caused by assigning fixed sizes to things. Instead of absolute units like “px”, “in”, etc., you can make your pages much more adaptable by using only relative units, in particular only “%” and “em”. Use the percentage when you are concerned with the overall layout, and “em” when you are concerned with size relative to the surrounding text. For instance make an image { width: 50%; min-width: 20em; } if you want it to take up half the width of the window but not get too small on tiny windows, and { width: 10em; max-width: 100%; } if you want the level of image detail to correspond to the visibility of the text. But never give sizes in absolute units.

You can use the CSS property white-space: nowrap; on the div to prevent it from breaking to the next line.

Here's an example of how you can prevent a div from breaking to the next line using CSS:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<style>

.no-wrap {

white-space: nowrap;

}

</style>

<title>No Wrap Example</title>

</head>

<body>

<div class="no-wrap">

This div will not break to the next line even if the content is long.

</div>

</body>

</html>

In this example, the white-space: nowrap; CSS property is applied to the class .no-wrap. Any content within a div with this class will not wrap to the next line, even if it exceeds the width of its container. Adjust the class and content as needed for your specific use case.

If you have found a bug in Google Chrome and want it to get fixed just report it to google. Go to the options of your browser and click Help. Report your issue, give attachments such as screenshots, e-mail or website links to help them to understand and recreate your issue. Go to Report an issue or send feedback on Chrome for more details.

You can fill the form for reporting security bug on any Google product here, Google - Security Bug Report

Through Chrome vulnerability reward program Google gives monetary awards and public recognition to the security researchers. For details about Chrome vulnerability reward program visit Application Security .

For what I can see and tell the arrow has no content and size. It will by default position itself to the zero points on the x and y axis of the parent div. This results in the image you get.

This is probably not the best way to solve this problem.

If the parent div is 35px by 35px and you want to center the object within the parent div, you have to offset it with at least 17.5px from the top and 17.5px from the left. But this will not result in the exact center from left to right. You have to take into account that the center of the arrow should be in the center so it is 17.5px plus the halve of the arrows width.

This can be achieved by using

position: absolute; 
left: /* sum of 17.5px and the halve of the arrow */px; 
top: 17.5px  

I hope this helps!

I’m not sure if I am reading the question correctly, but it depends on what you are trying to specifically accomplish. If you want a few places to start though, &nbsp; prevents breaks for an individual character space and <nobr></nobr> can be used to prevent breaks for a line of text. Otherwise, you can use nowrap as an in-line CSS treatment.

As a note, <nobr> is a little controversial, as it has been degraded in HTML. That said, I (personally) feel like it is still widely supported by most browsers.

Ex 1: This&nbsp;line&nbsp;of&nbsp;text&nbsp;won’t&nbsp;break
Ex 2: <nobr>This line of text won’t break</nobr>
Ex 3: <span style=”white-space: nowrap;”>This line of text won’t break</span>

It looks like the issue is caused by the blend of units. Your header-container is a width of 100% with a backround-color, which makes the color span the entire width of the screen (and 120px in height). You later specify a grid with 3 columns, where columb 1 is 200px, middle is 900 and end is 200px.

Now, what is the difference between 1300px and 100%? That's right; one is dynamically calculated while the other is a static value. On my phone screen (which is like 600 or 700 px wide) your last column flows over the color, because 1300px is a lot more than 700px. If you want your columns to always be inside your header of 100%, use dynamic units like % or fr. Fr is a unit “fraction” which you can think of like a percentage, but you are the one who controls what “100%” is. So if you say

grid-template-columns: 1fr 4fr 1fr

it will divide the available space into 6 pieces and give column 1 1/6 of that space, column 2 4/6 and column 3 1/6. You can also use percent, though. Hope that clarifies things

Hi,

you have used border in order to make that triangle play icon , so even if your div will be at center that border wont

so in this case you need to modify your css

please follow my code i just add some more style in order to make center

#services-offered #play-button {

background-color: lightgray;

height: 35px;

width: 35px;

border-radius: 20px;

position: relative;

/*Add Position relative here so that we can play with play icon div*/

}

.right-arrow {

height: auto;

width: auto;

border-left: 14px solid #000;

border-top: 7px solid transparent;

border-bottom: 7px solid transparent;

margin: auto;

position: absolute;/*Change position here*/

left: 13px;/*adjusting icon though height and width of parent div are fixed*/

top: 10px;

}

Caniuse.com tells us that chrome 57 supports the CSS Grid spec

You can also use CSS Atrule @supports to detect for browser support like

@support(display: grid) { 
	main {  
		display: grid; 
	} 
} 
 
@supports not (display: grid) { 
	main { 
		display: flex 
	} 
} 

A working codepen demo is also attached.

I’ll assume that the question is actualy how to stack a div on another div. Float gives the idea of float: property which im sure thats not the question.

• if its a parent-child situation, then simply give the parent position: relative & position: absolute for the child element. Then u can position this child to any absolute position to its parent, or if u want it to cover the parent, give it top: 0; left: 0; right: 0; bottom: 0;
• If its not parent-child & they are siblings, - basically same idea- just wrap the 2 in a relative wrapper then give them absolute positioning, then apply the above rules.

Have fun!

I would add to my left margin, or in some cases I might add left padding. By adding space to the left you are pushing your content to the right.

Margins add space to the outside of an element, while padding adds space inside the element. If you add a left margin you move the whole div to the right.

.myclass {position: relative; margin: 0px 0px 0px 10px}

or

.myclass {position: relative; margin-left: 10px}

If you add padding on the left side you will shift the contents of your div to the right, though it would remain inside the div.

.myclass {position: relative; padding: 0px 0px 0px 10px}

or

.myclass {position: relative; padding-left: 10px} 

Margins and padding are included in the CSS Box Model, illustrated below. Read Introduction to the CSS box model to learn more.

Globally add outlines to the elements on your page.

Add this CSS to your page:

* { 
	outline: 1px dashed red; 
} 

That will add a red, dashed outline around every element.

This shows the size of each element.

You can add an element outlines to any site:

1. Open the website in Firefox (or another browser)
2. Toggle the web developer tools (typically Command + Alt + I on Mac)

1. Ensure the Inspector and Rules section is open

1. Right click and select Add Rule

1. Type in the following code choosing any color or style that suits you:

If you added the style correctly every element on the page should have an outline around it.

Once you spot the oversized div you can select it using the selection tool.

That’s the arrow in the corner.

Click that arrow and hover over the oversized element.

It will show you the name or id in the tooltip, plus the size, margin and padding and more with different colors.

While you are hovering over the element, the row that contains the code declaring the element will be highlighted.

You can use this info and the info on the right hand side in the Rules section to show the CSS styles declaration and cascading stylesheets that are applied to your element and showing from where.

TL;DR: to move an element a bit to the right, your best bet is margin-right with a negative value or transform: translateX.

There’s many ways to move elements in CSS: left/right, margin-left/margin-right (positive or negative), padding, transforms with translateX, pseudo elements, or even transparent borders.

Margin-left/margin-right are probably the most common solution. Margin adds space to the outside of an element. Negative margins technically do this too, though in the opposite direction, and can extend well beyond the dimensions of the element. Counterintuitive, but very handy and perfectly legit in CSS.

TranslateX/translateY shifts an element. When using CSS transforms like translate, the element maintains its original position and size in the document flow. Super useful when tweaking without affecting the rest of the layout.

Padding can visually achieve what you are after. However, padding adds space to the inside of an element. With the default box model, this expands the size of the element in the document flow, which may break the layout. (Sorry, there is no negative padding.)

Left/right are a bit trickier to use. They position the element relative to its parent, so for moving a little to the left or right, it’s probably not the right solution, though bottom and top are good solutions for what’s in typesetting is called a baseline shift (e.g. adjusting <sup> tag positions). The positioning value (relative, absolute, fixed, etc.) of the element itself and its parent element may affect or conflict with the result.

Pseudo-elements add elements to the document flow that are not in the markup, before and/or after a particular element. A pseudo-element with a transparent background can create a controlled-width gap in the document flow, shifting the element in question.

Borders — when all else fails, it is possible to use a transparent border to nudge an element around. Set the border-width to the amount of offset you need and set the color to transparent. It’s best to specifically set all border sides (left/right/top/bottom) to clear any inherited values. Like margins, borders also add to the total width of an element.

It’s good to become familiar with the range of options above to avoid overriding inherited settings, effect a temporary state change (e.g. hover) without affecting the rest of the layout, or stay away from unnecessary !important declarations. Most of the above solutions can work at the same time on an element, though not all options are animatable.

N.B.: CSS flexbox or floats may override or conflict with your results, so be sure to check for them when troubleshooting.

The question is paradoxical because adding the declaration {position: fixed;} to a div in your CSS makes the divs position relative to the viewport (the browser window). That means if the div is fixed, and it renders at the top of the page, content will flow under it as you scroll down. A good example of this is the navigation bar on this website. Content that flows under it is technically overlapping.

Any time you assign a value of fixed, absolute, or relative to the position property of a div, you are taking it out of the normal flow. The default value for element positions is static, meaning they are in normal flow. Otherwise, out of the flow of the document, it’s depends on where you put the div, whether or not it overlaps with other elements.

Your problem with overlapping may be more specific. If by fixed, you mean that you want the div to be somewhere in the document and not overlap, I would try assigning a relative or absolute position. That allows you are able to play around with left, right, top, and bottom (you can do this with fixed as well).

Example:

div #bluebox {position: absolute; left: 400px; top: 10px;}

This makes me think that the webpage is either outdated, or is incorrectly recognizing your browser/device to be one that it is not.

If the webpage is outdated and poorly developed, it could be that the developer checks for specific browsers and devices that were up-to-date at the time, and block all others.

However, since it’s not very often that developers will do the above with their websites, it’s more likely that the site was simply designed for a different browser. Try viewing the site in another powerful browser like Firefox, and see what happens then. It could be that the site was designed specifically for Firefox (or another browser), and will work incorrectly in anything other than Firefox (or another browser).

This is not an error message that comes with Google Chrome and is likely the webpage incorrectly identifying your device as outdated.

Set the right div to float: right; and make sure it comes first in your HTML. (Source order matters for floats, because they like it when you're sad.)

Live demo here: Left-right float layout.

You get the left div on the left for free, since that's where it would go by default, and the right div ends up on the right. Now we have two problems:

1. The left div still takes up the whole page width; floats just paste the floated element on top of what's already there (on the z-axis).
2. If the right div's height is greater than the wrapper's height, the wrapper won't expand to fit. The floated div just spills all over everything.

Solutions:

1. Figure out the right div's width, or give it one, and set the left div's margin-right to that plus any gap you want between them.
2. Set the wrapper's overflow to auto.

I played with content editable a while back and wanted to create a editor like medium just for the fun of it, so I sort of had this question myself and had to do a bit of research and play around with content editable in the major browsers.

Each browser seems to treat new lines differently. There is no standard - at least there wasn't any 6 months ago when I last checked -

Some browsers add br tags, others create new paragraphs depending on what node you are in. I think there was a difference between the behaviour of pressing enter in a div versus pressing it in a paragraph.

The way to normalise it - I'm assuming you want to do something like that since you asked this question - is to check each browser you want to support separately, see what tags they add or don't and write a bit of javascript in order to handle the normalisation so each browser behaves the same.

I wrote a small jQuery piece of code a while back while I was experimenting with this: Content Editable Test - JSFiddle