I have 2 divs inline. One of which has fixed width. I want div to fill in all the space until the second div when the window adjusts. To clarify the situation, take a look at picture below:
After resizing window I need to get next layout:
How to do this?
You can take advantage of display:table-cell.
Demo
Related
I'm hoping I can use flexbox to solve a div stacking problem.
I have one container div. Its height is 100vh.
Inside that div, I have two divs.
One, contains an image. Its height is dependent on the size of image, which grows proportional to browser width up to a max-width.
A second div is on top of the first div. I want its height to be equal to the remaining height of the div.
Can flexbox compute this for me automatically? Hoping so.
The answer is yes. Try appying flex: 1 to the second div. That tells it to stretch to fill the remaining space in the container.
Here's an illustration of the effect: DEMO
I am using Bootstrap. I have div with class="row" and three columns inside with divs in each column.
The third column overflows outside the row div, which could be fixed by giving padding-right to row div. But it still repeats when resized to smaller size.
While resizing from md to sm to xs, the column divs overlap during the transition.
How do I fix this?
If all of your columns (col--) add up to 12 you should be alright. If it's an image that's overflowing (which it sounds like it is) you can add the img-reponsive class to it. This will set max-width: 100% which sounds like the issue but I can't be sure without a code sample.
I'm creating a fluid layout with 2 divs (named status and status_edit) in a container.
The second div is overlapping when resizing the window, also ellipsis are not working on the status_list spans. Do you have any solution? i have tried a lot.
You can see it in this Fiddle
Thanks
The li inside .status-edit are floating outside the box. You could add overflow: auto to .status-edit. However, when the screensize gets smaller, 'icon1' and 'icon2' disappear. To fix that, you could set a min-width to .status-edit.
You could also set a min-widht to .container. The div than will be resized in ratio, depending on the window size but will keep a defined minimum width. When the window size gets smaller than that value, the horizontal scrollbar will appear.
I found a simple web site design example using DIVs at the following link:
http://www.htmlgoodies.com/img/3_column.html
The problem with this design is that it is a fixed width. I need a design where the wrapper DIV expands to the full screen area (100% width) and the header, main and footer DIVs resize along with it.
If I set the wrapper and footer widths to 100% it does take up the full area on a maximized browser window but shortening the window causes the right and main DIVs to wrap downwards. How can this wrapping be prevented?
I'm not sure if this is the answer you are looking for but surly using float:right or float:left on the div that is wraping under another div should fix the problem?
I recommend looking into using fluid960gs
Cant be done, only one attribute for DIV, which is the align attribute. Maybe consider using tables: http://www.w3schools.com/html/html_tables.asp
Shadowpat
How do I make a div that has a variable width? So I want a div to span a certain width inside a container and if there is another element in it, the div will automatically fill a portion of the of the width.
Don't give the div a width and it will fill 100% of the horizontal space. Add margins to it (as either % or px) and it will shrink accordingly.
It sounds like you may be asking how to have something inside the div force it to grow wider with its content. I don't think that's possible without javascript.