help with tableless design (floating divs)
How can I achieve a similar structure of blocks like on this page: http://www.sovietrussia.org/o
Basically I need one block (like the image) to be on the left, and all other blocks take up all of the right side and below at开发者_如何学编程 100% width. If a block on the right side passes the left image block then it will go below it and take up the width of the page 100%
this will be set your image in left and all remaining text in right of the image.....!
<html>
<head>
<style type="text/css">
.setwet{
float:left;
vertical-align:top;
}
.setwetpic{
float:left
}
br{
clear:both;
}
</style>
</head>
<body>
<div>
<span class="setwetpic"><img src="image.gif" /></span><span class="setwet">Name:waqas <br />Auther: Waqas</span><br/><span class="setwetpic"><img src="image.gif" /></span><span class="setwet">Name:waqas <br />Auther: Waqas</span>
</div>
</body>
</html>
Float the image with style="float: left;". Everything will lay out to its right. When you want to force everything to be full width, place an element with style="clear: bloth;" to clear the float.
Consider using a CSS grid layout system
There are 4 different one available at http://www.gridsystemgenerator.com/
加载中,请稍侯......
精彩评论