Jump to content

placing one div block near another


gauravc7
 Share

Recommended Posts

hi ,Prob 1: i am making links same as we make in table by inserting multiple tds.i want to have same structure as table. but i i do it with div by settiing its float to left and right for another i am just able to place two div. hot can i the desidred result.Prob 2: how to center div according to page as we do with table by applying align=center: and the complete table comes to center of the page.

Link to comment
Share on other sites

#1: I don't understand the problem. Think you can explain it better for us?#2: You can center a <div> by adding the following code:

div {  margin-right: auto;  margin-left: auto;}

or inline CSS

<div style="margin-right:auto; margin-left:auto;"> ... </div>
Link to comment
Share on other sites

Thanx ::margin worked:<table width="600" align=center><tr> <td> <a href=#> Link 1 </a> </td> <td> <a href=#> Link 2 </a> </td> <td> <a href=#> Link 3 </a> </td> <td> <a href=#> Link 4 </a> </td> <td> <a href=#> Link 5 </a> </td> </tr></table>But with div<div> Link 1 </div> <div> Link 2 </div> <div> Link 3 </div> <div> Link 4 </div> divs are placed one after another vertically, not horizontally. How to place them side by side

Link to comment
Share on other sites

Try this, I haven't tested this code, but in theory it should display all <div>'s on one line.CSS:

.links div {  float: left;}

HTML:

<div class="links">  <div>Link1</div>  <div>Link2</div>  <div>Link3</div>  <div>Link4</div>  <div>Link5</div></div>
Link to comment
Share on other sites

major divitis there... look at using spans inside a single div, like so:

<div  style="background-color: #0099FF; height: 27px; width: 100%; padding-top: 11px;" >		<span style="float: left; margin-left: 10px; " >			  <a href="http://www.trap17.com">Trap17</a> :			  <a href="http://www.astahost.com">AstaHost</a> :			  <a href="http://www.imagefilez.com/">ImageFilez</a> :			  <a href="http://www.qupis.com">Free Web Hosting</a> by			  <a href="http://www.qupis.com">Qupis</a> - a member of -			  <a href="http://www.xisto.com">xisto</a>			  </span>			  <a href="http://www.computinghost.com" style="float: right; margin-right: 10px; " >Affordable Web Hosting</a>			  <a href="http://www.computinghost.com" style="float: right; " >Servers powered by ComputingHost.com - </a>	</div>

Example from http://www.jlhaslip.com/aef_103_demo/

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