I just started to design a small Webpage to present some designs.
It's a page with 2 collums, with a picture and some text for each. The problem I have right now: When I add more text to one collum, the picture of the other collum moves. Check out my fiddle: http://jsfiddle.net/JannikS/tMY57My HTML Code: \[code\] <div id="designrow"> <div class="design"> <img src="http://www.webdesign-is-art.com/wp-content/uploads/2008/05/goodbytes-webdesign.jpg" /> <h3>Title </h3> <p>Short description of our design..</p> </div> <div class="design"> <img src="http://www.webdesign-is-art.com/wp-content/uploads/2008/05/goodbytes-webdesign.jpg" /> <h3>Title </h3> <p>Short description of our design..<br /> but with some more text!</p> </div> </div> \[/code\]and CSS: \[quote\]\[code\].designrow { float: left; }\[/code\] .design {
width: 300px; margin-left: 20px; margin-right: 20px; margin-bottom: 20px; display: inline-block; } .design img{ width: 100%; height: 100%;
}\[/quote\]I hope somebody can help me. Best regards, Jannik
It's a page with 2 collums, with a picture and some text for each. The problem I have right now: When I add more text to one collum, the picture of the other collum moves. Check out my fiddle: http://jsfiddle.net/JannikS/tMY57My HTML Code: \[code\] <div id="designrow"> <div class="design"> <img src="http://www.webdesign-is-art.com/wp-content/uploads/2008/05/goodbytes-webdesign.jpg" /> <h3>Title </h3> <p>Short description of our design..</p> </div> <div class="design"> <img src="http://www.webdesign-is-art.com/wp-content/uploads/2008/05/goodbytes-webdesign.jpg" /> <h3>Title </h3> <p>Short description of our design..<br /> but with some more text!</p> </div> </div> \[/code\]and CSS: \[quote\]\[code\].designrow { float: left; }\[/code\] .design {
width: 300px; margin-left: 20px; margin-right: 20px; margin-bottom: 20px; display: inline-block; } .design img{ width: 100%; height: 100%;
}\[/quote\]I hope somebody can help me. Best regards, Jannik