Jump to content

Multi columns with images


dauruk0512
 Share

Recommended Posts

<!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

  • 3 weeks later...

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

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 :dirol:

 

 

 

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

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...