Related
I show a lot of code on my site. The rest of my site is responsive, but the "pre" tag refuses to shrink and display horizontal scroll bars. Here's a screenshot of my content getting cut off due to the long "pre" tag at the top:
I'm using overflow:horizontal, but you can see in the example that it doesn't work. Here's the actual link enter link description here
As soon as I switch my theme, it works fine! I'm using a child theme of the Genesis Framework...
You need to assign a width to the element, so that the content can overflow.
Try setting width: 100vw, for example, and it will work.
If your pre tag has margin/padding to the sides for your actual website layout, try width: calc(100vw - 40px) whereas in this example 40px relates to a margin of 20px to both sides. Replace it with your own actual margin/padding.
I don't know why nobody gave the answer of:
pre {
white-space: pre-wrap;
}
It preserves the lines and words while at the same time wrapping the lines if there isn't enough space.
As of 2022, you can achieve this without hard-coding widths by setting overflow: auto on the element you want to scroll.
Often this isn't enough, because the element has already enlarged its parent before the overflow property is checked. So you usually have to set overflow: auto on a bunch of parent/grandparent/etc. elements as well, to stop them from enlarging themselves. Normally this would mean they would also get scroll bars, but their children having overflow: auto prevents this (because when the children scroll, there's nothing extending beyond the parents' boundaries).
It also helps to set one of the parents to display: flex.
div.container {
display: flex;
flex-direction: column; /* Optional */
overflow: auto;
border: 1px solid red;
}
pre {
overflow: auto;
}
<html>
<body>
<div class="container">
<div>This text won't scroll</div>
<pre>
This is really long text that should scroll. This is really long text that should scroll. This is really long text that should scroll. This is really long text that should scroll. This is really long text that should scroll. This is really long text that should scroll. This is really long text that should scroll. This is really long text that should scroll. This is really long text that should scroll. This is really long text that should scroll. This is really long text that should scroll. This is really long text that should scroll. This is really long text that should scroll. This is really long text that should scroll. This is really long text that should scroll.
</pre>
</div>
</body>
</html>
Pre tag displays preformated text, and preserves spaces and line breaks and is fixed. Declare the white-space normal or pre-wrap.
pre {
white-space: normal;
}
I have a DIV defined thusly:
<div id="divContent" class="content" style="margin-left:239px;min-height: 100%; padding: 130px 80px 30px 80px; overflow: hidden;">
The contents of the div are complex and varied, including lots of different html and css. All I want is to force the contents of the div NOT to wrap, so that as you drag the right edge of the browser window in toward the left edge, content may disappear off the right side, but never wrap.
I have already tried applying this CSS on the divContent div, and also on sub-divs inside divContent, but it did nothing:
white-space: nowrap
What options do I have?
<< EDIT >>
Here's the actual web page.
Here's how it looks (correctly) before making the page smaller:
Here's how it looks (wrongly) after making the page smaller, and it starts wrapping:
Adding overflow:hidden to the element's style, will cause any text that would have flowed out of the div to be hidden. you should remove it and replace it with white-space:nowrap
<div id="divContent" class="content"
style="margin-left:239px;min-height: 100%;
padding: 130px 80px 30px 80px; white-space:nowrap;">
Ok, thanks for adding a link to the code. My, do you you have a lot of stuff in that div? (It always helps to give the full picture with a question!) And that's the problem - specifically the label/input field pairs. These are inside dd elements, which are inside a div with class = column-thirds. That has a percentage width, which means they shrink as the window shrinks.
But there is nothing to stop the input fields dropping under their labels as the columns shrink in width. So that's what you need to stop. Adding nowrap to their containing elements (the DD elements), and a width as well to stop the label and field overflowing the end of the DD element, should do it:
dd {
white-space: nowrap;
width : 400px; /* choose your width here to be wider than the label + field */
}
to stop these items wrapping. (And check there is no float property on the labels or input fields, which might also be part of the problem).
[Further edit]
Unfortunately your setup is rather complicated. So to show the nowrap solution is basically correct: do a small test, with a bank page containing just one of your label field pairs:
<dl><dd>
<label for="txtFirstName" id="lblFirstName" title="First Name" data-required="true">First Name</label>
<input name="txtFirstName" type="text" value="Frankie8" id="txtFirstName" data-capture="DLFirstName" style="width:131px" />
</dd></dl>
and some CSS:
dd {
margin-left: 400px;
border:2px solid black;
white-space: nowrap;
}
Then narrow your window until the right window margin overlaps the field, then comment out the white-space line; you'll see the field drop down under the label. (I've tried it, it works as expected). Hopefully that shows what the basic problem to solve is.
However, looking through your CSS files I see you have a media query in the LESS file Style.less (look for #media around line 1976), that redefines labels as block elements, using display: block. That stops the above nowrap solution working. Labels are normally inline elements. So either you need to be able to get rid of that display change if you can, or find another solution.
An alternative solution would be to give the containing divs (the class = column-thirds ones), a min-width to stop them shrinking so much they cause your wrapping problem in the first place. The only other thing I can think of might be floating the labels, but I wouldn't like to bet how that would turn out.
I hope this all helps you obtain a suitable fix for your problem.
You need to set the width to the size you want the div to be, in px units, e.g.:
... width: 500px; ...
Then, if the screen gets narrower than that, the div will disappear off the right of the screen as required, regardless of the overflow setting.
It often helps in problems like this to give all the divs borders temporarily, eg with: border 1px solid red; so you can see what's happening.
Overflow only comes into play if you fix both the width and height of the div, and the text is too long to fit in that box - it will then spread down below the div. White-space looks as though it works, because it makes the text stick to one line, until you give the div a border and realise that the div still ends at the edge of the screen (however wide that may be at any given moment) and the text now extends beyond the end of the div (which you can see if you add the border, and remove the overflow hidden).
So fixing the width of the div, if done right, should work (I've used 500px, but change that to whatever you want):
<div id="divContent" class="content" style="width: 500px; margin-left:239px;min-height: 100%; padding: 130px 80px 30px 80px; overflow: hidden;">
However, a lot depends on what content you have in your div, and what CSS they have, so if fixing the width like this doesn't work, give us those as well, please.
I'm stumped on a css problem. I've put up a test page here: http://georgecrawford.com/test/ for you to check.
I have a left-floated sidebar div, and a main content div which follows it (and which should wrap around it). If the content is just paragraphs, there's no problem, as the text wraps nicely around the float. However, I have some blockquotes in the content, and I'd like these to have a background-color and/or a border. The text in these is no problem, it wraps nicely around the sidebar of course. However, the blockquote itself spans the entire width of the content div, which means a border around it would run over the top of the sidebar.
How can I ensure that blockquotes in the content div are shortened horizontally to be the same width as the text lines (the 'line boxes') within them? Paragraphs have the same behaviour, but I don't need a border around my paragraphs!
Thanks for any help!
I've stumbled upon a potential fix for this problem.
If I set all blockquotes with the CSS property overflow: auto, it makes them reduce to the desired width when they'd otherwise overlap the floated sidebar. I've updated the demo at http://georgecrawford.com/test/ so you can see the difference. It's perfect in Safari/OS X, but I haven't yet tested in other browsers.
Any comments? Does this solution have any drawbacks? Many thanks again for your help.
In IE 9 the "overflow: auto" corrects blockquote underlay or overlay of a div floating to one side, however the overflow correction does not allow standard blockquote indentations on both blockquote borders.
background-color: #ccdfff;
border: 5px #dfefff solid;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
color: #003366;
line-height: 2em;
letter-spacing: 0.2em;
overflow: auto;
padding: 20px;
This leaves blockquote pushed right to the left edge of a "float: right" div. Blockquote border-right margins are ignored by IE9. Chrome has no problem displaying correct blockquote indentations.
I have tested parent-child adjustments, also display, float, and position selectors but these are not helpful. Anyone know how to correct IE blockquote margin collapse when blockquote is positioned beside a floating div?
The problem is not the blockquote - that just does what it's told, it stretches to 100% of it's parent's width. It's the parent div with the id content that does not have a float property, and thus spans across the floated div.
Can you try putting the sidebar as a child into content, and not as a sibling next to it? I think the blockquote should then adhere to the width rules.
Alternatively, you can always set the blockquote to display: inline, but that may not be what you want, as it then won't stretch to the full width anymore.
What is the difference between margin and padding in CSS?
In what kind of situations:
both work.
only margin is appropriate.
only padding is appropriate.
TL;DR: By default I use margin everywhere, except when I have a border or background and want to increase the space inside that visible box.
To me, the biggest difference between padding and margin is that vertical margins auto-collapse, and padding doesn't.
Consider two elements one above the other each with padding of 1em. This padding is considered to be part of the element and is always preserved.
So you will end up with the content of the first element, followed by the padding of the first element, followed by the padding of the second, followed by the content of the second element.
Thus the content of the two elements will end up being 2em apart.
Now replace that padding with 1em margin. Margins are considered to be outside of the element, and margins of adjacent items will overlap.
So in this example, you will end up with the content of the first element followed by 1em of combined margin followed by the content of the second element. So the content of the two elements is only 1em apart.
This can be really useful when you know that you want to say 1em of spacing around an element, regardless of what element it is next to.
The other two big differences are that padding is included in the click region and background color/image, but not the margin.
div.box > div { height: 50px; width: 50px; border: 1px solid black; text-align: center; }
div.padding > div { padding-top: 20px; }
div.margin > div { margin-top: 20px; }
<h3>Default</h3>
<div class="box">
<div>A</div>
<div>B</div>
<div>C</div>
</div>
<h3>padding-top: 20px</h3>
<div class="box padding">
<div>A</div>
<div>B</div>
<div>C</div>
</div>
<h3>margin-top: 20px; </h3>
<div class="box margin">
<div>A</div>
<div>B</div>
<div>C</div>
</div>
Margin is on the outside of block elements while padding is on the inside.
Use margin to separate the block from things outside it
Use padding to move the contents away from the edges of the block.
The best I've seen explaining this with examples, diagrams, and even a 'try it yourself' view is here.
The diagram below I think gives an instant visual understanding of the difference.
One thing to keep in mind is standards compliant browsers (IE quirks is an exception) render only the content portion to the given width, so keep track of this in layout calculations. Also note that border box is seeing somewhat of a comeback with Bootstrap 3 supporting it.
There are more technical explanations for your question, but if you want a way to think about margin and padding, this analogy might help.
Imagine block elements as picture frames hanging on a wall:
The photo is the content.
The matting is the padding.
The frame moulding is the border.
The wall is the viewport.
The space between two frames is the margin.
With this in mind, a good rule of thumb is to use margin when you want to space an element in relationship to other elements on the wall, and padding when you're adjusting the appearance of the element itself. Margin won't change the size of the element, but padding will make the element bigger1.
1 You can alter this behavior with the box-sizing attribute.
MARGIN vs PADDING :
Margin is used in an element to create distance between that element and other elements of page. Where padding is used to create distance between content and border of an element.
Margin is not part of an element where padding is part of element.
Please refer below image extracted from Margin Vs Padding - CSS Properties
From https://www.w3schools.com/css/css_boxmodel.asp
Explanation of the different parts:
Content - The content of the box, where text and images appear
Padding - Clears an area around the content. The padding is transparent
Border - A border that goes around the padding and content
Margin - Clears an area outside the border. The margin is transparent
Live example (play around by changing the values):
https://www.w3schools.com/css/tryit.asp?filename=trycss_boxmodel
It's good to know the differences between margin and padding. Here are some differences:
Margin is outer space of an element, while padding is inner space of an element.
Margin is the space outside the border of an element, while padding is the space inside the border of it.
Margin accepts the value of auto: margin: auto, but you can't set padding to auto.
Tip: You can use the trick to make elements centered inside their parents (even vertically). See my other answer for example.
Margin can be set to any number, but padding must be non-negative.
When you style an element, padding will also be affected (e.g. background color), but not margin.
Here is some HTML that demonstrates how padding and margin affect clickability, and background filling. An object receives clicks to its padding, but clicks on an objects margin'd area go to its parent.
$(".outer").click(function(e) {
console.log("outer");
e.stopPropagation();
});
$(".inner").click(function(e) {
console.log("inner");
e.stopPropagation();
});
.outer {
padding: 10px;
background: red;
}
.inner {
margin: 10px;
padding: 10px;
background: blue;
border: solid white 1px;
}
<script src="http://code.jquery.com/jquery-latest.js"></script>
<div class="outer">
<div class="inner" style="position:relative; height:0px; width:0px">
</div>
</div>
The thing about margins is that you don't need to worry about the element's width.
Like when you give something {padding: 10px;}, you'll have to reduce the width of the element by 20px to keep the 'fit' and not disturb other elements around it.
So I generally start off by using paddings to get everything 'packed' and then use margins for minor tweaks.
Another thing to be aware of is that paddings are more consistent on different browsers and IE doesn't treat negative margins very well.
The margin clears an area around an element (outside the border), but the padding clears an area around the content (inside the border) of an element.
it means that your element does not know about its outside margins, so if you are developing dynamic web controls, I recommend that to use padding vs margin if you can.
note that some times you have to use margin.
One thing to note is when auto collapsing margins annoy you (and you are not using background colours on your elements), something it's just easier to use padding.
Advanced Margin versus Padding Explained
It is inappropriate to use padding to space content in an element; you must utilize margin on the child element instead. Older browsers such as Internet Explorer misinterpreted the box model except when it came to using margin which works perfectly in Internet Explorer 4.
There are two exceptions when using padding is appropriate to use:
It is applied to an inline element which can not contain any child elements such as an input element.
You are compensating for a highly miscellaneous browser bug which a vendor *cough* Mozilla *cough* refuses to fix and are certain (to the degree that you hold regular exchanges with W3C and WHATWG editors) that you must have a working solution and this solution will not effect the styling of anything other then the bug you are compensating for.
When you have a 100% width element with padding: 50px; you effectively get width: calc(100% + 100px);. Since margin is not added to the width it will not cause unexpected layout problems when you use margin on child elements instead of padding directly on the element.
So if you're not doing one of those two things do not add padding to the element but to it's direct child/children element(s) to ensure you're going to get the expected behavior in all browsers.
First let's look at what are the differences and what each responsibility is:
1) Margin
The CSS margin properties are used to generate space around elements.
The margin properties set the size of the white space outside the
border. With CSS, you have full control over the margins. There are
CSS properties for setting the margin for each side of an element
(top, right, bottom, and left).
2) Padding
The CSS padding properties are used to generate space around content.
The padding clears an area around the content (inside the border) of
an element. With CSS, you have full control over the padding. There
are CSS properties for setting the padding for each side of an element
(top, right, bottom, and left).
So simply Margins are space around elements, while Padding are space around content which are part of the element.
This image from codemancers shows how margin and borders get togther and how border box and content-box make it different.
Also they define each section as below:
Content - this defines the content area of the box where the actual content like text, images or maybe other elements reside.
Padding - this clears the main content from its containing box.
Border - this surrounds both content and padding.
Margin - this area defines a transparent space that separates it from other elements.
I always use this principle:
This is the box model from the inspect element feature in Firefox. It works like an onion:
Your content is in the middle.
Padding is space between your content and edge of the tag it is
inside.
The border and its specifications
The margin is the space around the tag.
So bigger margins will make more space around the box that contains your content.
Larger padding will increase the space between your content and the box of which it is inside.
Neither of them will increase or decrease the size of the box if it is set to a specific value.
Margin
Margin is usually used to create a space between the element itself and its surround.
for example I use it when I'm building a navbar to make it sticks to the edges of the screen and for no white gap.
Padding
I usually use when I've an element inside a border, <div> or something similar, and I want to decrease its size but at the time I want to keep the distance or the margin between the other elements around it.
So briefly, it's situational; it depends on what you are trying to do.
Margin is outside the box and padding is inside the box
What is the difference between overflow:hidden and display:none?
Example:
.oh
{
height: 50px;
width: 200px;
overflow: hidden;
}
If text in the block with this class is bigger (longer) than what this little box can display, the excess will be just hidden. You will see the start of the text only.
display: none; will just hide the block.
Note you have also visibility: hidden; which hides the content of the block, but the block will be still in the layout, moving things around.
display: none removes the element from the page, and the flow of the page acts as if it's not there at all.
overflow: hidden:
The CSS overflow: hidden property can be used to reveal more or less of an element based on the width of the browser window.
Overflow:hidden just says if text flows outside of this element the scrollbars don't show. display:none says the element is not shown.
Simple example of overflow: hidden http://www.w3schools.com/Css/tryit.asp?filename=trycss_pos_overflow_hidden
If you edit the CCS on that page, you can see the difference between the overflow attributes (visible | hidden | scroll | auto ) - and if you add display: none to the css, you will see the whole content block is disappears.
Basically it's a way of controlling layout and element "flow" - if you are allowing user input (from a CMS field say), to render in a fixed sized block, you can adjust the overflow attribute to stop the box increasing in size and therefore breaking the layout of the page. (conversely, display: none prevents the element from displaying and therfore the entire page re-adjusts)
By default, HTML elements are as tall as required to contain their content.
If you give an HTML element a fixed height, it may not be big enough to contain its content. So, for example, if you had a paragraph with a fixed height and a blue background:
<p>This is an example paragraph. It has some text in it to try and give it a reasonable height. In a separate style sheet, we’re going to give it a blue background and a fixed height. If we add overflow: hidden, we won’t see any text that extends beyond the fixed height of the paragraph. Until then, the text will “overflow” the paragraph, extending beyond the blue background.</p>
p {
background-color: #ccf;
height: 20px;
}
The text within the paragraph would extend beyond the bottom edge of the paragraph.
The overflow property allows you to change this default behaviour. So, if you added overflow: hidden:
p {
background-color: #ccf;
height: 20px;
overflow: hidden;
}
Then you wouldn’t see any of the text beyond the bottom edge of the paragraph. It would be clipped to the fixed height of the paragraph.
display: none would simply make the entire paragraph (visually) disappear, blue background and all, as if it didn’t appear in the HTML at all.
Let's say you have a div that measures 100 x 100px
You then put a whole bunch of text into it, such as it overflows the div. If you use overflow: hidden; then the text that fits into the 100x100 will not be displayed, and will not affect layout.
display: none is completely different. It renders the rest of the page as if if the div was still visible. Even if there is overflow, that will be taken into account. It simply leaves space for the div, but does not render it. If both are set: display: none; overflow: hidden; then it will not be displayed, the text will not overflow, and the page will be rendered as if the invisible div were still there.
In order to make the div not affect the rendering at all, then both display: none; overflow: hidden; should be set, and also, do something such as set height: 0;. Or with the width, or both, then the page will be rendered as if the div did not exist at all.
overflow: hidden - hides the overflow of the content, in contrast with overflow: auto who shows scrollbars on a fixed sized div where it's inner content is larger than it's size
display: none - hides an element and it completely doesn't participant in content layout
P.S. there is no difference between the two, they are completely unrelated
display:none means that the the tag in question will not appear on the page at all (although you can still interact with it through the dom). There will be no space allocated for it between the other tags. Overflow hidden means that the tag is rendered with a certain height and any text etc which would cause the tag to expand to render it will not display. I think what you mean to ask is visibility:hidden. This means that unlike display none, the tag is not visible, but space is allocated for it on the page. so for example
<span>test</span> | <span>Appropriate style in this tag</span> | <span>test</span>
display:none would be:
test | | test
visibility:hidden would be:
test | | test
In visibility:hidden the tag is rendered, it just isn't seen on the page.