I am trying to make a fluid grid website and now im facing a problem which a just cant seem to fix just using css. Obviously i'm doing something wrong, but i just cant find what.Here's the thing: I have one column (div: left) and one body (div: right) displayed in-line. in stage one div left has a width of 180, and div right is growing till it reached 640px (like youtube). In stage two i want to make the column grow some more from 120px to 150 px, But when the column is growing div right gets pushed down, even though there is enough space. Im thinking it has something to do with the margin's technique ive been using but i cant find it, and dont know any alternatives i could use since im trying to do this without using java.Here is my jsfiddle: which will show the problem clearly: http://jsfiddle.net/tomvisser/WcbYL/embedded/result/I happy with all help i can get.Thanks in advance.\[code\]<body><div class="gridContainer clearfix"> <div id="center"> <div id="left">This is the content for Layout Div Tag "left"</div> <div id="right">This is the content for Layout Div Tag "right"</div> </div></div></body>\[/code\]here is the css:\[code\]#left { float: left; height:400px; width: 150px; display:inline; background-color:#F00;}#right { margin-left:150px; background-color: #6F0 ; height:400px;}@media only screen and (min-width: 650px) {.gridContainer {}#right { margin-left:0px; width:500px; float:right; display:inline;}#left { margin-left:0px; float: right; width:100%; margin-right:500px; }\[/code\]
How to resize one div when its neighbouring div is done resizeing?
- Thread starter ck1991
- Start date