Basically I have float divs with fixed width of 250px. I need to make it so that the width of a parent div and the width of the browser resize automatically based on the amount of float divs i add.
For example: if my browser size is 800px wide and i have 2 float divs which combined are 500px wide than there will be no horizontal scroll bars because 500 fits inside 800. But when i add 2 more float divs the total width of all float will be 1000px which is bigger than my browser width thus creating horizontal scroll bars and making the browser resize automatically.
Right now when i try to do it, float divs that dont fint inside 800px just drop down instead of adding on the side.
I could specify fixed width of parent container but the whole point is to make float add to the side dynamically.
Any suggestions? If CSS can't do it maybe Javascript can.
Is there a Javascript that will explicitly add width to the parent div whenever child divs are added?
Thanks.
use width:reminder; to the parent DIV.
Related
I'm trying to achieve the below layout.
I have a region that, ideally, fills most of browser's height; I want it all within view, with a potential minimum height. On the left is an image that stretches to fill the area, with the aspect retained, but will not go beyond a maximum width. On the right is a div that takes up the remaining space.
I can't figure out the HTML and CSS flex-box styles that would achieve it.
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.
My html page has some text, a search bar, a results pane, a navigation bar, and several other elements which i want to stay in the same position relative to each other.
My thoughts were to make absolutely positioned divs inside a relatively positioned container div, and then give them all min/max pixel values.
If i gave them min/max pixel values they wouldnt change size/positioning when the window was resized, correct?
But if i did this then wouldnt they not fit on monitors with smaller screens?
Forgive any inaccuracies in my statements, im still in the learning process.
If you set the height and width to a percent, then set a min-height and min-width, the divs will flex to the size of the parent div (which is dependent on the size of the parent window). The problem with that solution is that with smaller screen size windows, the absolute positioning for the elements won't allow you them to nudge down if the content of an individual div needs to wrap. You might be able to position your internal divs using the default browser settings and adjusting the margin values, and use float: left or float: right to position elements that need to be adjacent.
I have two divs as follows:
fluid width content
fixed width content
I'm trying to make it so that when the available screen width is > 600px, they'll appear side by side. When the screen is resized below that, the second div needs to drop down below the first one. In either scenario, they need to take up all available width (so when the second one drops down I can't have a 200px padding/space on the right of the first one).
I believe it's possible to do this with JS and/or css3/media queries, but I'm wondering if there's a simpler solution?
To put it in context, I need to design a fluid page that will be displayed via an iframe. I will not be able to control the width of the iframe, so need my two column content to be fluid.
Apply a min-width to the div that's not floating. If the browser can't satify the min-width with the floating box to the side, it'll drop the floating box down and the fluid width box will fill the entire width, until it gets shrunk to its min-width again in which case it overflows the body.
Try this:
div
{
min-width:100px;
max-width: 150px;
background-color:yellow;
float:left;
}
min-width and max-width
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.