css - How can float be used to position columns? -

css - How can float be used to position columns? -

how float used here position contact info bar underneath photos. floating left, ic figure out how stick lastly contact info pictures.

this want move towards, unable so. here current set up:

<div id='post'><div id='vpphotos'> <img src='images/img.jpg'/><img src='images/default.png'/><img src='images/default.png'/><img src='images/default.png'/></br><a id='posttitle' href='#?photoid=$photoid'>view more pictures</a> </div> <div id='vptitle'> <h3>$eventtlt</h3> </div> <div id='vpprice'><b>price: </b>$priceofevent</div> <div id='vpdate'> </br><b>start date:</b> <div class='float-right'>$eventsd </div> </br><b>end date:</b> <div class='float-right'>$evented</div> </br><b>start time:</b> <div class='float-right'> $eventtime </div> <br/><b>location of event:</b> <div class='float-right'>$location</div> <br/><b>address of location:</b> <div class='float-right'>$locationaddress</div></div> <div id='eventdesc'> </br></br><b>description:</b> &nbsp&nbsp$eventdesc </div> <div id='vpcontact'> </br><h3 align='left'><b>contact information</b></h3> &nbsp&nbsp </br><b>name:</b> &nbsp&nbsp$contactname </br></br><b>email:</b> $emailaddress</div> <div style='clear:both;'/> </div>

i floating left. i'm not sure thats right after of other divs floating left. #post outer , rest describable name.

#post{ border:3px inset red; margin-right:20px; } #vpphotos{ border:3px outset blue; float:left; width:25%; } #vptitle{ float:left; border:3px inset green; } #vpdate{ float:left; width: 20%; border:3px inset blue; margin-right:100px; padding-right:300px; } #eventdesc{ float:left; width: 73.74%; border:3px inset green; } #vpcontact{ float:left; width: 24%; border:3px inset red; } #vpprice{ float:right; width: 15%; border:3px inset black; }

in order need set photos , contact div in separate div, float , set other divs in div floated.

working illustration on js bin.

updated code:

html:

<div id='post'> <div id='column-one'> <div id='vpphotos'> <img src='images/img.jpg'/><img src='images/default.png'/><img src='images/default.png'/><img src='images/default.png'/></br><a id='posttitle' href='#?photoid=$photoid'>view more pictures</a> </div> <div id='vpcontact'> <h3 align='left'><b>contact information</b></h3> &nbsp&nbsp </br><b>name:</b> &nbsp&nbsp$contactname </br></br><b>email:</b> $emailaddress </div> </div> <div id="column-two"> <div id='vptitle'> <h3>$eventtlt</h3> </div> <div id='vpprice'><b>price: </b>$priceofevent</div> <div id='vpdate'> </br><b>start date:</b> <div class='float-right'>$eventsd </div> </br><b>end date:</b> <div class='float-right'>$evented</div> </br><b>start time:</b> <div class='float-right'> $eventtime </div> <br/><b>location of event:</b> <div class='float-right'>$location</div> <br/><b>address of location:</b> <div class='float-right'>$locationaddress</div></div> <div id='eventdesc'> </br></br><b>description:</b> &nbsp&nbsp$eventdesc </div> </div> <div style='clear:both;'/> </div>

css:

#post { border: 3px inset red; margin-right: 20px; } #column-one, #column-two { float: left; width: 24%; } #column-two { width: 76%; } #vpphotos { border: 3px outset blue; width: 98%; float: left; } #vptitle { float: left; width: 80%; border: 3px inset green; } #vpdate { width: 99%; float: left; border: 3px inset blue; } #eventdesc { float: left; width: 99%; border: 3px inset green; } #vpcontact { float: left; width: 98%; border: 3px inset red; } #vpprice { float: right; width: 15%; border: 3px inset black; }

css design position css-float multiple-columns