The body increases width if i have enough text on the page to fill the screen
Why does this happen?
See example here:
https://jsfiddle.net/dktzLqfm/2/
uncomment text and see the nav bar move slightly
Inline elements fill the block elements that contain them. When you insert a you are forcing a line break between inline elements. You only want to do this when you have some text needs to be forced to split on two lines. For example:
Burger
King
In general you should only use for this purpose. Instead, if you have blocks of text wrap them in the (when they are paragraphs) or other appropriate block level tags. In this way they will always fill their container and the text will wrap naturally.
Use CSS styles to set the width of the container.
Forcing
overflow-y: scroll;
on Body causes scrollbar to always show, which means the width is consistant across pages
Related
When I have an HTML paragraph (<p> tag) that has its max-width set, sometimes, depending on the text, the paragraph takes up more horizontal space than necessary. I would like to prevent this, i.e. make the paragraph shrink so that it only takes up the minimum horizontal space it needs for the text. The following are my design requirements:
max-width property is given
the text itself should look the same, so for example, it should not be hyphenated at line breaks
it should have a background color in its exact area, overflowing is not allowed
For example, in this fiddle, the first paragraph's width is 123px while 104px would be enough to fit its content, as shown by the second paragraph.
The following picture shows the extra space that I would like to remove, along with the desired outcome (second paragraph):
How can I achieve this?
I have not found a way to achieve this with pure CSS and HTML, but there's a way with JavaScript.
Instead of the paragraph (<p>), we need a more complex structure: a <span> inside a container <div> and the styling has to be applied to the div (the background color and the max-width). The following JavaScript code has to run to set the correct width on the div:
const container = document.getElementById('container');
const paragraphSpan = document.getElementById('paragraph-span');
container.style.width = paragraphSpan.offsetWidth + "px";
The full solution is available here.
I'm looking for a HTML/CSS solution to a problem we've encountered on a site we're building.
I am happy to implement a JavaScript based solution if I need to, but I'd prefer it was handled natively.
We have content managed text which needs to sit inside a designated area but wrap if it exceeds the available width.
Behind the text is a background colour with opacity.
When the text is short, due to the float, the container collapses to the width of the text.
When the text is long, and a wrap occurs, the container hangs out at the maximum width, even though the text inside has wrapped underneath, so there's a small section of background colour on the right side (which isn't big enough for the wrapped word)
I want the container to collapse to the edge of the previous word so it doesn't "look like" there is space for the wrapped word, when it is very close.
HTML
<div>
<p>Crack the Shutters Open Wide for Parkside Paradise</p>
</div>
CSS
body div {
background-color: #AAFF3B;
max-width:80%;
padding:20px;
display:inline-block;
float:left;
}
body p {
display:inline-block;
background-color: #FFAA3B;
position: relative;
float:left;
white-space:pre-line;
clear:left;
}
Here is a JSFiddle: http://jsfiddle.net/nmuot8bm/3/
If you look at the 3rd example, you can see a small amount of padding on the right hand side of the orange box, where the word porttitor has wrapped underneath to a new line but the orange container still sits at the maximum width, despite the float.
If line breaks are introduced by the content editors (e.g. between vestibulum and porttitor as per example 4) then the container collapses correctly.
What I think is happening is the container grows before the text wraps and the browser doesn't recompute the width after wrapping?
Here's a picture of my test case shown in the JSFiddle:
Here is a picture of the fault on the staging site (before separated out to a JSFiddle):
You can see that the text has wrapped, but the container has not collapsed, leaving a big gap of background colour.
n.b. We can emulate this by doing text-align:justify but then the spacing between the words is not consistent with the rest of the text on the site.
edit: I see that this question may be a duplicate. I swear I did research before I posted!
max-width adjusts to fit text?
CSS Width / Max-Width on Line Wrap?
Wrapping text forces containing element to max-width
Shrink DIV to text that's wrapped to its max-width?
I think that the general consensus/conclusion is that it is not possible without bleeding edge CSS and I should use a JavaScript solution.
I have added a few more examples to my JSFiddle: http://jsfiddle.net/nmuot8bm/6/
including the JavaScript solution from here: https://stackoverflow.com/a/33246364/647728
Not possible with CSS...that's the way the inline box model works
JS example/solution can be found on the JSFiddle
If the problem is floated elements collapsing the parent container, there are many solutions; the easiest among them being adding overflow: hidden or display: table to the parent (the thing collapsing). Also be aware that inline-block and floated elements are essentially redundant.
As you see, I'm trying to put two <p> in one line. What am I doing wrong?
You look for the width of the div you putting the two P's if the width of the div is less than the width of the two text then the second P will automatically move to next line if div size large then you apply float property of css on div with position relative
Make the container bigger. Or the font smaller so it fits in one line.
<p>s are, by default, block elements, so they aren't normally displayed inline.
To fix this, you have to add display:inline; to the style tag in each of your <p>s.
If this still doesn't work, that means that the containing <div> isn't wide enough for both of them to be side by side.
Which means that you have to increase the width of the <div>.
I positioned two div elements side-by-side by using float= left;
But buttons are getting displayed beside the div elements.
I want the button elements right below the two div elements which were placed side- by-side.
When you use float:left property then the div's height and width are set by either of the following
amount of space it's content html elements require
applied css height and width.
hence say if your screen if too big and space is left out on the sides then the next element (if it can be fitted in that space) is rendered (if it requires more then it would appear on the next line).
hence now regarding your problem there are two possible solution's
Increase the widths of your div so that it takes most of the screen width.(mostly never used as it might look ugly on big screens)
but if u want to go by this approach the setting the width's in percent can do the job.
Fiddle demo
use the clear:both property of css (mostly used)
for it's explanation you have to read it's documentation
i would suggest you go by this approach
Fiddle demo
Here is my site, first of all.
You'll notice that underneath the divider bar in the middle of the page, there are three columns, one with a form, one with text, one with links.
Now, resize the window to slightly smaller, and the right div will drop down to the next line.
Is there anyway to just not display that? So, the divs will adjust (I have a liquid layout) up to the point where they won't fit, then, instead of wrapping the div down to the next line, it just won't be displayed?
You can also achieve that with CSS only.
Just assign the following CSS attributes to #row4:
#row4 {
min-width:1202px; /* the exact value depends on the sum of the width of your 3 column boxes */
overflow:hidden;
}
This differs slightly from your intended solution, since the right box will stay partly visible when sizing down the window and will not immediately disappear completely.
Please be aware that min-width won't work in IE6. However, there are several ways to emulate the min-width property, if you need to support old IEs:
http://www.thecssninja.com/xhtml/ie6-min-width-solutions
You can give them a wrapper div with a min-width set and force it to use a horizontal scrollbar if it gets too small. The nice thing about a wrapper div is you can give it a max-width as well and keep things from getting wonky on super huge monitors.
I'm not a fan of horizontal scrollbars, but it beats completely removing content.
Ok here is what you should do
Wrap all three floated division on a parent div, something like this
<div id="parent">
<div class="form">......</div>
<div class="text">......</div>
<div class="links">.....</div>
</div>
Now to solve your problem give a fixed height to the parent div like
#parent { height:400px;clear:both; }
You would have to use Javascript to get the width of the viewport, then change the display property of the div that is wrapping to display:none so that it doesn't show up when the browser width is too small.