dauruk0512 Posted May 22, 2015 Share Posted May 22, 2015 Hello guys, i need help to make template like this http://prntscr.com/7814xr if you asking me what i have been try 3 days make this tmeplate by used multi column css3 and jquery column but hard to make it, anyone if you free please kindly comment here Link to comment Share on other sites More sharing options...
tejasamrute Posted May 23, 2015 Share Posted May 23, 2015 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Untitled Document</title><style type="text/css">body,html { margin:0; padding:0;}.wrapper { width:980px; height:auto; margin:0 auto; background-color:yellow;}.para1 { width:320px; float:left; background-color:pink;}p { margin:0; padding:0;}.image { width:660px; float:right; background-color:red; text-align:center;}.multicolumn { width:100%; float:left; background-color:yellow; -webkit-column-count: 3; /* Chrome, Safari, Opera */ -moz-column-count: 3; /* Firefox */ column-count: 3;}</style></head><body><div class="wrapper"> <div class="para1"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque ultricies, risus ac fringilla volutpat, risus ex molestie velit, non lobortis nunc enim sed elit. Donec lobortis diam sed arcu gravida, vel viverra urna ullamcorper. Praesent arcu justo, sollicitudin eleifend nibh a, lacinia dictum nunc. Duis feugiat volutpat massa, et tincidunt purus dapibus sed. Mauris quis augue et elit condimentum varius. Integer vestibulum convallis orci, quis dapibus nisl semper a. Sed quis posuere quam. Nulla condimentum iaculis lorem in dignissim. Maecenas dictum quam ac ex porta finibus. Mauris eu ex dignissim, tristique purus id, vulputate libero. Etiam nulla mauris, feugiat in leo at, accumsan venenatis tortor. Nam gravida purus arcu, non gravida mauris scelerisque sed. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque ultricies, risus ac fringilla volutpat, risus ex molestie velit, non lobortis nunc enim sed elit. Donec lobortis diam sed arcu gravida, vel viverra urna ullamcorper. Praesent arcu justo, </p></div> <div class="image">IMAGE</div> <div class="multicolumn"> <p>Aliquam at luctus lectus. Aliquam pharetra turpis euismod libero mollis lacinia. Donec vitae accumsan tellus, eu volutpat ligula. Aenean dapibus a sapien nec bibendum. Fusce dignissim quis dui in lacinia. Morbi quam ante, dictum in massa eget, aliquam iaculis libero. Aenean accumsan enim vel diam consequat, vel tincidunt mi malesuada. ###### sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse pharetra libero in ex porttitor tempus.Ut pellentesque sollicitudin augue ut fringilla. Cras ornare condimentum condimentum. Maecenas ac risus purus. Donec at venenatis sapien, dignissim auctor erat. Cras elementum faucibus neque, id pulvinar velit bibendum vel. Vestibulum ac ornare metus. <br><br>Morbi odio mi, maximus vel tortor et, lacinia consequat nisi. Duis lacinia est a maximus iaculis. Aenean commodo bibendum eros, quis molestie nulla cursus at. Suspendisse potenti. Proin blandit elit sit amet magna auctor efficitur. Nunc pulvinar ultricies mauris quis sollicitudin. Nam consequat blandit urna eu finibus. Aenean bibendum varius porttitor.Cras tempor nisi id tortor bibendum, ac fermentum ligula dictum. Mauris a pretium ligula. Etiam egestas enim et pharetra interdum. Donec aliquam massa in nunc bibendum scelerisque. In convallis porttitor turpis. Etiam quis augue erat. Proin sed elementum orci. Aenean pulvinar nibh dui, quis congue diam elementum et. Sed ultricies varius dolor, at pharetra enim ornare a. Ut mattis maximus lacinia. Aliquam at euismod odio. Donec erat nunc, faucibus sed euismod quis, fringilla nec justo. Ut magna leo, semper sed tristique et, dignissim et libero. Cras vestibulum ex ac mi gravida pulvinar. Pellentesque habitant morbi tristique senectus et <br><br>netus et malesuada fames ac turpis egestas. Mauris pulvinar scelerisque pretium.Fusce ac lacinia nibh. Nulla rhoncus nisl ut lorem pulvinar tincidunt. Mauris faucibus posuere tortor. Sed accumsan est sed lectus ultrices, sed accumsan massa blandit. Phasellus purus orci, dapibus vitae interdum in, sodales eget sapien. Vivamus nunc orci, sodales et fermentum vestibulum, ornare at enim. Curabitur at magna pretium, lobortis ex et, tempus leo. Curabitur justo nulla, posuere non elementum sit amet, faucibus in nibh. Praesent id eros fermentum libero rhoncus ullamcorper. Maecenas nec maximus ante. Donec malesuada euismod ante, eget <br><br />consectetur metus varius vel. Cras luctus consectetur ligula, et bibendum justo vehicula sed. Nunc in leo nunc. Nulla semper orci aliquet placerat suscipit. Aenean bibendum mi a dictum tincidunt. Praesent quis leo sit amet erat lobortis pretium.Aenean id leo dictum augue ornare eleifend. Aliquam id erat nec felis faucibus maximus. Nam nisi ante, interdum id lobortis sit amet, dictum ut neque. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nunc id volutpat massa. Fusce consequat tincidunt justo sed porta. <br><br>Morbi quis facilisis mi. Etiam at iaculis augue. Donec dictum malesuada felis sed placerat </p> </div> </div></body></html> Link to comment Share on other sites More sharing options...
tejasamrute Posted May 23, 2015 Share Posted May 23, 2015 Please check browser compatibility for "column-count " property Link to comment Share on other sites More sharing options...
dauruk0512 Posted June 9, 2015 Author Share Posted June 9, 2015 Wow you save my life bro but why image not full as dummy design bro oh ya because you dont declare height in css right or might be height depend on height images ya, Thanks man this is my last issue in css, i guess this forum not active so i leave it, Thanks man Regard Fredddy Sidauruk Link to comment Share on other sites More sharing options...
dsonesuk Posted June 9, 2015 Share Posted June 9, 2015 Err? you are the one who has not replied until now, to say yes or no to supplied solution. You could have taken the solution and be happily continuing with another project without a thank you. Link to comment Share on other sites More sharing options...
dauruk0512 Posted June 10, 2015 Author Share Posted June 10, 2015 Sorry for bad activity by my self, please don't angry i'm new bie at this forum so i don't know the rule promise i will give my contribution and try answer people question, did i say thanks above comment Thanks man this is my last issue in css, i guess this forum not active so i leave it, Thanks man There is 2 thanks , Thanks for your reply Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now