jasonbrown
New Member
This question has come up similarly before, but I have looked around and can't find this happening to anyone else.I can make a 4x4 grid of divs together with images using in the HTML but one of the divs I want text in (top right). When I enter Some text within that div it goes below the div to the left and the bottom two are still aligned and under the moved text div.I have tried making the height fixed but nothing changed, the div just moved up but the others remained where they were.CSS:\[code\]/* Page Content */.container {width: 910px; height: auto; margin: 0px auto; padding-top: 35px; position: relative;}/* Home Page Content */.gridblock, .gridblock2, .gridtext {width: 450px; height: 200px; padding: 0px; position: relative; display: inline-block;}.gridblock {margin: 2px;}.gridblock2, .gridtext {margin: 3px, 0px, 3px, 0px;}.gridtext {width: 450px; height: 200px; position: relative; background-color: #f9f9f9;}\[/code\]HTML:\[code\]<div class="container"> <div class="gridblock"> <img src="http://stackoverflow.com/questions/14034313/images/homegrid1.jpg" alt="3345 Mastering"> </div> <div class="gridtext"> <p>Some Text</p> </div> <div class="gridblock"> <img src="http://stackoverflow.com/questions/14034313/images/homegrid2.jpg" alt="3345 Mastering"> </div> <div class="gridblock2"> <img src="http://stackoverflow.com/questions/14034313/images/homegrid3.jpg" alt="3345 Mastering"> </div> <ul class="footer"> </ul>\[/code\]This is an online demo: http://jsfiddle.net/saidbakr/2LCwg/