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.
Related
somehow my image is not scaling down or up at all. I have seen many things on the internet but I could not solve it. W3schools told me to make it like this, with the formular-banner image.
.formular-banner
{
max-width: 100%;
height: auto;
}
<div class="formular-banner">
<img src="koala.jpeg">
</div>
First of all, you are defining settings for the parent element of the image, not for the image itself. So you can't expect that to have an effect on the image...
For the image itself, you also shouldn't use those settings, but instead of max-width: 100% (to make it the full width of the container), you should use width: 100%, plus a max-width that has the original width of the image in pixels, in order not to make it any bigger (i.e. distorted) than the original image in case it's smaller (i.e. less wide) than the container.
So your CSS rule would be
.formular-banner > img {
width: 100%;
max-width: 1240px; /* use the actual width of your image here */
height: auto;
}
If the image is smaller than the container (which, as a div = block element) will have 100% width by default) and you want it to be centered, you can add this rule (for the container) which will horizontally center the image (as an inline element) inside the container:
.formular-banner {
text-align: center;
}
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 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!
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;
}
All the images have one thing in common; they are all 300 or 600 pixels wide. But the heights vary from around 300-900 pixels. Now I need a small group of the images which will be used to suggest other images for the user. These will only be around 100x200 pixels(might change). My previous attempt has made the images shrink into the 100x200 aspect ratio. I need it to overlap, but the excess is hidden.
Try something like this http://dabblet.com/gist/2769112
The CSS you will need is simply
.img-container {
width: 200px; /* whatever set width */
height: 100px;
display: inline-block; /* or you could float them */
overflow: hidden;
}
.img-container img {
width: 100%;
}
Put the images in a wrapping element, such as a DIV, with a defined height and width and use overflow:hidden.