Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

prevent div moving on window resize

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

like image 404
luca Avatar asked Jan 20 '11 10:01

luca


People also ask

How do I stop a div from resizing?

It is mostly used with textarea and div elements. To disable resizable property of an element use resize to none.

How do you stop a moving element in HTML?

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.

How do I keep aspect ratio when resizing windows?

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.

How do I autosize a div?

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.


1 Answers

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.

like image 194
somdow Avatar answered Sep 16 '22 17:09

somdow