css3 - Getting CSS divs to appear left -
i'm new css , i'm having issues divs. i'm not quite sure how word question correctly , unfamiliar lot of terminology used, i'm having trouble finding answer question.
basically, goal have container holds several square or rectangular divs @ different sizes (160x160px, 320x320px , 160x320px) can displayed in responsive grid.
the issue i'm having larger divs 'push' things away them; example, smaller divs not appear left of bottom half of 320x320 div class.
the css i've written looks this;
body{ max-width: 1280px; background-color: #333333; } div{ border: 1px solid #333333; height: 158px; width: 158px; float: left; text-align: center; background-color: #cc00ff; display: block; float: left; vertical-align: text-bottom; } .extra{ height: 158px; width: 318px; background-color: #ccff00; } .feature{ height: 318px; width: 318px; background-color: orange; } i have linked in html pasted below 20 divs, classes div.
<head> <link type="text/css" rel="stylesheet" href="new1.css"/> <title></title> </head> <body> <div>article title</div> <div>article title</div> <div>article title</div> <div>article title</div> <div>article title</div> <div>article title</div> <div>article title</div> <div>article title</div> <div>article title</div> <div>article title</div> <div>article title</div> <div>article title</div> <div class="feature">article title</div> <div>article title</div> <div>article title</div> <div>article title</div> <div>article title</div> <div>article title</div> <div>article title</div> <div>article title</div> <div>article title</div> <div>article title</div> <div class="extra">article title</div> </body> </html> a screenshot illustrate i'm talking about
i apologize again if i've worded strangely, , appreciate advice give or links appropriate thread answer question.
in example have got hint design how make it. not solutions here have key point.
<head> <title></title> <style> .row1 { height:50px; width:100px; background-color:green; float:left; position:relative; border:1px solid black; } </style> </head> <body> <div> <div class="row1">article title</div> <div class="row1">article title</div> <div class="row1">article title</div> <div class="row1">article title</div> <div class="row1">article title</div> <div class="row1">article title</div> <div class="row1">article title</div> <div class="row1">article title</div> </div> </body> </html> result:- 
Comments
Post a Comment