I have a page with two divs "list_events" and "right_content" one next to each other. When I resize the window "right_content" moves down "list_events" but i dont want that! I dont want those two divs to move neither to scale down on window resizement..how can I achieve that?
this is the code
.list_events{margin-left:1em;float:left;}
.right_content{float:left;margin-left:1em;}
thanks Luca
It is mostly used with textarea and div elements. To disable resizable property of an element use resize to none.
Basically, by giving an element absolute positioning, it is no longer being taken into account when positioning the rest of the page. It will take up its alloted space in its set position no matter what. In your case, the div was moving relative to the elements surrounding it.
To resize to fit inside the window while maintaining aspect ratio, set up your container with an initial size and then divide the area width by the container's width to get the scale. You then need a check to make sure that scale doesn't make the height too great.
The css rule: white-space: nowrap; will prevent your lines wrapping. Set a width of the error div to 100% and it will automatically fill the space available.
first add a parent div/wrap and put those two divs of yours into it.
like so:
<div id="wrap">
<div id="list_events"></div>
<div id="right_content"></div>
</div>
then you can try the
min-width(px/ems/ etc) on the parent/wrapper div like so:
#wrap{
min-width: 600px;
}
Overall, whatever size you add to the min-width itll scale the parent div down to the size specified.
once the window is sized down past your specified size, itll behave like any other window.
this is my way of doing it.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With