I have a simple responsive 2 column design, the left column has pre and a nested code elements in it.
The code element has overflow: auto set, so when its content exceeds its specified width, it should show a horizontal scrollbar inside it without wrapping the lines.
This works fine but only when the parent (i.e. the left column) is not floated. I.e. when the window is narrow. You can try it yourself here.
#media (min-width: 300px) {
.left {
float: left;
margin-right: 100px;
max-width: 400px;
}
.right {
float: right;
margin-left: -100px;
width: 100px;
}
}
pre {
overflow: auto;
word-wrap: normal;
white-space: pre;
}
code {
overflow: auto;
}
This is odd because I expect the code element to have a dynamic width like when it does when the window is narrow, but it acquires a fixed width for some reason when the parent is floated.
Am I doing something wrong here? Is this supposed to happen?
Please note that I am not looking for a JS workaround, this is very simple html/css and should work out of the box.
Based on your updated Fiddle, you gave the element in question a max-width of 400px to expand to. When it has a long line of text in it, it may take up that entire width. Basically, it's just your design being responsive to its content. The right column drops down below it exactly as it should, and if you resize the container to be smaller the pre block starts shrinking right along with it.
To see what I mean, right-click the element and Inspect Element to look at its calculated width. Also, if you think about it, it has to be 400px (or whatever the max width is). Otherwise, it hasn't reached its overflow point to acquire the scrollbars you were testing!
Related
I've been playing with this one for hours, with no success.
I have a top menu with submenus (that contains a popup menu).
In one of my popup menus, i need the container to be maximum 170 pixels width and all of the items to wrap around that width. For some reason they don't wrap up.
I've reproduced the exact menu in a fiddle. Notice the submenu COUNTRY. It contains a popup with flags, but they don't wrap around
https://jsfiddle.net/h81y2t0L/
I've added attributes like a width, a min-width, a white-space with no success
.flagMenu {
max-width: 170px;
/* white-space: normal; */
}
.flagMenu li {
display: inline-block;
}
How do i wrap around the flags in the container?
To wrap the inline-blocks you need to define a container width - but since you don't want an exact width, use width: max-content; That way the width will be equal to the width of the content but the max-width will stop it from growing further.
.flagMenu {
max-width: 170px;
white-space: normal;
width: max-content;
}
Demo
I want to position a div beside another one. They both should have a width of 100%, whereby the left div has a width specified in px. This width can vary. I want the right div to expand to the right side, so that both divs together take 100%.
I've made a fiddle to describe my problem: http://jsfiddle.net/2gWLn/
As you can see the words "right" are not in one line. I've tried to solve that by applying a padding-left or float: left to the right div. But this does not work because the width of the left div can vary, so I can't specify that as padding-left.
How can I solve that?
The following may work:
.right {
width: auto;
height: 200px;
background-color: yellow;
overflow: auto;
}
Set overflow: auto to .right and this will establish a new block formatting context for .right and hence, prevent the content of .right from interacting with the adjacent floated element. Also, set the width value to auto instead of 100%. (A width value of 100% works in Firefox, but not in Chrome or IE.)
See demo: http://jsfiddle.net/audetwebdesign/9X6VY/
Please take a look at this fiddle to go with the explanation:
http://jsfiddle.net/Br3jz/1/
I have a background style set on a containing div, and I want this background filling the entire screen at all times. I have inner .containers that are centered and are at a fixed with of 1064px. The problem arises when the device width is less than 1064px.
When this happens, the containing div, as well as the HTML body element are both stuck at the original device width. Why is this happening and how can I fix it?
The problem is that #main doesn't want to have more width than its parent, so it has a fluid width. But .container has a fixed width, which can be greater than #main's one. In that case, it overflows.
You have two possible solutions, with different effects:
Solution 1: Demo
Instead of width: 1064px, use
.container {
max-width: 1064px;
}
Solution 2: Demo
.container {
width: 1064px;
}
#main {
min-width: 1064px;
}
How can I prevent my squares from wrapping when resizing the window?
I want the squares to stay at their positions, but every time I resize the window, they get pushed down and are hidden.
This example is currently working, but the solution, which makes this possible, is just ridiculous.
Is there a "cleaner" way or how can I make it look more professional?
My JSFiddle Example
.content {
width: 100000000px;
}
Remove position:absolute and overflow:hidden from the parent element.
Since the elements are inline-block, you could use white-space:nowrap to prevent them from wrapping. If that's not the desired effect, just remove it though.
jsFiddle example
#container {
width: 100%;
height: 100px;
white-space:nowrap;
}
.square {
display: inline-block;
width: 100px;
height: 100px;
}
http://jsfiddle.net/CLErY/2/
/* The following rule can be romoved, is just to give a smooth overflow hidden visibility */
.content {
width: 200%; /* Always bigger than the real value, so 200% is the double and it should work. */
}
.content should have at least the size of the whole element plus the size of one children (100px), so 200% is the double and it should work.
In case we have 4 squares the size should be (width x 4 + width) in case the width of the square is 100 the result is 500px.
Also this is to give a smoother overflow dissapear but not necesary.
Hope it helps.
I am trying to set font size, family and line-height on a div. I then need to know the correct height of the div for some layout stuff. However, the height I am getting is wrong, and a scrollbar is appearing on the div's parent for probably the same reason. The following jsfiddle best illustrates my problem:
http://jsfiddle.net/JYkAX/19/
Here is the html:
<div class="separator">
<div class="PleaseNoScrollBar">
Some Text Here
</div>
</div>
Here is the css:
.separator
{
background: gray;
display: block;
overflow: auto;
}
.PleaseNoScrollBar
{
font-family: cursive;
background: lightgray;
line-height: 32px;
font-size: 32px;
display: block;
opacity: 0.5;
vertical-align: top;
}
The following jquery retrieves the outer height of the div (but its incorrect).
alert($(".PleaseNoScrollBar").outerHeight());
Any ideas on what is causing this? Unfortunately, I need to be able to retrieve the actual outer height of the div, I can't just make the parent div larger.
I should mention, the scrollbar only appears in Chrome and IE. In firefox the div is scrollable by dragging the mouse, but no scrollbar appears.
You are viewing a scrollbar cause you set overflow:auto; on .separator. Just remove it and you won't have scrollbars anymore.
As for the height, the alert function retrieves "32" which is, I think, the correct height of the div.
Remove the overflow:auto declaration from the container div.
.separator
{
background: gray;
display: block;
overflow: auto;
}
from the w3c spec...
overflow: auto The behavior of the 'auto' value is user agent-dependent, but
should cause a scrolling mechanism to be provided for overflowing
boxes.
source: http://www.w3.org/TR/CSS21/visufx.html#overflow
this means that the folks that coded the browser determine how overflow:auto works. If you set the height of the . separator div to 34px, the scrollbar goes away.
I would recommend removing the overflow:auto from the .separator div.
Check out this: http://jsfiddle.net/JYkAX/26/
If the height of the container div is set to anything less than two pixels greater than the child elements height, the scrollbar shows up. My guess is that the browser adds the 1px border that is added to both the top and bottom when an "overfow auto" is declared.
I have had similar issue, while using font from Google Fonts and it had implicitly set line-height of 1.5em, which the jQuery probably did not see. Once I explicitly wrote line-height:1.5em to my CSS reset (or website font setting), it was OK.