I have the following HTML & CSS: http://jsfiddle.net/j8aFS/1/
When you decrease the window size, the red box and the text expands over the grey area because of the word wrap.
What can I do to prevent this? Can I prevent this?
What I have tried so far:
using the CSS white-space: nowrap; property, but it seems that this
isn't the best solution.
simply leaving space below the red box, but this really influences the design too much.
What I want to achieve: The grey box should grow so the red box never expands over the grey box. The text inside the red box should not be cut off.
What do you want to happen instead?
If you make the gray box position relative and set it's overflow to hidden, the red box gets cut off.
.div1 {
height: 62%;
background-color: grey;
overflow: hidden;
position: relative;
}
DEMO
Unless you specify a set width for the red box, making the window smaller will cause it to get taller and overflow. You can hide it (my solution), let it overflow (current behavior) or not do the position absolute and let it make the gray box bigger. In your question it isn't clear at all what you want it to do.
Updated demo
You could set a width: 180px for your red box
The viewport for smaller screens.
If you would'nt position your box absolute, the box below would float down as well
Related
in my web page top right(see in attached image ) there is a space between content(background image) and body
i want to fill this space with image.i want to load image to all that space.I want to close that space.I give margin,padding-left but it does not close that space
.wrapper {
width:100%;
margin:-5px;
}
what should i do
By using Chrome Developer tools, you will quickly see that the space comes from the CSS margin attribute of your <div class="wrapper">. Please see the print screen below.
In the print screen, the space has disappeared because div.wrapper has no longer a margin.
EDIT:
The background picture has a transparent border itself. You can see this if you open your picture with a graphic program.
Best solution would be to remove the border with a graphic program because then, you are sure how you set your picture at a precise pixel position.
If you would like to pull the picture to the left in order to hide the border as quick solution, then you have to pull it left and at the same time stretch it slightly, e.g.
.wrapper {
width: 101%; /* <<<< a bit wider to hide at right */
margin: -5px; /* <<<< pull to hide at left */
padding: 0
}
Like this, the border disappears left and right.
EDIT 2:
With width: 101%, scroll borders may appear. To get rid of them, use CSS overflow-x: hidden. https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-x
Flexbox can be used to vertically align elements. But when a vertically-aligned element later grows, it can escape the bounds of its flexbox container. This happens even when overflow:auto is used on the element.
Here's a demo with some expected and actual results.
Using the demo:
Open the demo
Enter lots of text in the gray box
Expected result:
The paragraph becomes taller as text is entered. When the paragraph is as tall as its flexbox container, it stops growing and a vertical scrollbar is shown.
Actual result:
The paragraph becomes taller as text is entered, but never stops growing. It ultimately escapes the bounds of its flexbox container. A scrollbar is never shown.
Other notes:
It's tempting to put overflow:auto on the container instead, but that doesn't work as expected. Try it out. Enter lots of text and then scroll up. Notice that the top padding is gone and lines of text are missing.
You need to do the following:
Add "max-height: 100%" on the <p> element to keep it from growing indefinitely.
If you want to keep your padding on the <p>, you also need to set box-sizing: border-box to get its padding included in that max-height.
(Technically box-sizing:padding-box is what you want, but Chrome doesn't support that; so, border-box will do, because it's the same as the padding-box since there's no border.)
Here's your JS Fiddle with this fix
In your css you need to give height
p {
padding: 20px;
width: 100%;
background-color: #ccc;
outline: none;
height: 60px;
}
JS Fiddle
I am trying trying to make a div's width as wide as it's content. Here's a fidle to show what I mean:
http://jsfiddle.net/djxpU/
I want the blue area to be as wide as the white. I tried float:left and display:inline-block, however they won't work with position:absolute;. Any workarounds?
If you want the white area to fit the blue parent, you'd set the width of the white to 100% #X{
width:100%;
}
Block-level elements actually do this naturally. The problem you have is, absolute positioned elements are taken out of the normal flow, so the block can't wrap around your white boxes.
Is there a reason you need them positioned absolute?
EDIT: If you just wanted the white boxes to be centered, here you go: http://jsfiddle.net/Marconius/djxpU/1/
Code (because I have to): margin: 0 auto;
By default a div will be the width of its parent and will display as block. Here is an example of the divs filling the available space while still maintaining the left margin.
Apply this to your 'X' divs: { margin-left: 120px; height: 40px; background-color: white;}
http://jsfiddle.net/yz3Dk/
I was trying out the on hover scroll bar style that is used in many places but ran into a problem. The appearance of the scroll bar on hovering causes text to jump which looks jarring.
#scroll {
width: 200px;
height: 200px;
overflow: hidden;
}
#scroll:hover {
overflow-y: scroll;
}
This Fiddle shows the jumping text on mouse hovering
Could I somehow prevent the jumping of text while keeping the appearance of scroll bar on hover?
just use <p> tag for your text like this:
http://jsfiddle.net/pdbYz/6/
UPDATE for firefox:
http://jsfiddle.net/pdbYz/19/
I propose to have another container within div#scroll with fixed, slightly smaller width.
This way your text won't 'jump' when scroll appears. Since scrollbars have different width on different OS (Windows, Mac, Linux) you should leave some free space to the right, where scrollbar appears.
Please see my fiddle here: http://jsfiddle.net/5RXSW/
To make containers more visible I've applied paddings and background colors. You can tweak these styles for your needs, but please reserve some pixels to the right of div#scroll for scrollbar.
You can change the width of the container on hover, so that when the scrollbar appears, it pushes outwards instead of inwards. This prevents the text from moving.
http://jsfiddle.net/pdbYz/3/
To achieve this I've added this line to your CSS:
#scroll:hover {
width: 360px;
}
I want to set a background image in a div class, and want to add some text on the image, with 5px padding but my text is overflowing, please see my css and demo here http://jsfiddle.net/LcQzG/ and help me with it. Thanks.
You should set a width and add
word-wrap:break-word;
example : http://jsfiddle.net/LcQzG/6/
Either make the background image higher, make the text smaller, make the box wider or add this to add a scroll bar:
overflow: auto;
or to hide the overflowing text:
overflow: hidden;
You need to set a width on the containing div. The width would be the width of the image - 10px (the sum of the left and right padding).