prevent div moving on window resize

Question

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

Answer 1

You can put this divs inside parent div with fixed width/height for that div, or you can determine a percentage width/height for each two divs.

Answer 2

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.